I was tasked with creating a frequency count for each letter present in a sentence and then visualizing that frequency in a chart. To achieve this, I used a 1px by 1px gif image and stretched it to represent the normalized value (max 100px) based on the frequency of each letter. For instance, if I have the phrase "Cwm fjord bank glyphs vext quiz", each letter would be allotted 100px as every letter is utilized only once.
To accomplish this task, I created an array to track the occurrences of each word. By determining which word appears most frequently, I can establish the divisor required for each word. This divisor will then dictate the height of the image when it is generated.
function htmlChart() {
var table = document.getElementById("table");
input = document.getElementById("userInput").value;
table.innerHTML = generateTable(input);
}
function generateTable(input) {
var frequency = new Array(26);
var letters = new Array(26);
var freqPos = 0;
var newInput = input.toUpperCase();
var max = 0;
var myHeight = 0;
var test = 9000;
var image = new Image();
image.src = "orange.gif";
for (i = 65; i < 91; i++) {
//calculates the occurrence of each character and stores its value
frequency[freqPos] = newInput.split(String.fromCharCode(i)).length - 1;
freqPos++;
}
//identifies the letter with the highest occurrence
for (i = 0; i < frequency.length - 1; i++) {
if (frequency[i] > max) {
max = frequency[i];
}
}
table = input + "<table>";
//first row
table += "<tr>";
table += "<td>Letter Frequency 100px</td>";
for (i = 0; i < frequency.length - 1; i++) {
//utilizes myHeight to adjust the image height accordingly
myHeight = (frequency[i] / max) * 100;
table += '<td><img src = "orange.gif" id = "orange" alt = "25" height = myHeight + "px" width = "5"></td>';
}
table += "</tr>";
//second row
table += "<tr>";
table += "<td></td>";
for (i = 65; i < 91; i++) {
table += "<td>" + String.fromCharCode(i) + "</td>";
}
table += "</tr>";
table += "</table>";
return table;
}
Although I've successfully created the frequency chart, I'm struggling with adjusting the height of the images according to the value stored in myHeight. Can someone provide guidance on how I can achieve this?