Homework #1: Letter Count Bar Chart

This homework counts the letters entered in the query string of the URL or in the text box, and displays a bar chart of those counts.
Please enter a query string after the URL (e.g. ?HelloWorld) or enter string into text box to regenerate the chart.
Kailey Hoo: Source Code

Fill in below to regenerate a new chart

Fill in below to add letters to current chart

Functionality

  • C-Level
    • Modify the tick label formatting (max tick frequency set to 12, without decimal points)
    • Modify the underlying grid and axis lines (add horizontal grid lines as well has axes with labels)
    • Modify the bar colors (vowels vs consonants; larger vs smaller than mean)
    • Modify the sort order (alphabetically vs by value)
  • B-Level
    • Add buttons that allow you to change between sorting alphabetically and sorting by value (default is order it was typed in)
    • Add a tooltip that shows the exact value of a bar when hovering over it
    • Add a search box on the page, and show the letter count for the text in that box instead of from the URL query string
  • A-Level
    • At the start of your visualization, show one bar at a time and smoothly grow each bar from the bottom up to its value
    • Allow the user to add new text via a search box and button combo, and use transitions to smoothly update the values (can only add text to initial string)

Explanation

  • Most of the functionality I implemented was for the clarity of the graph. After figuring out how to create the actual bar chart, I choose colors based on preference. I did not want the colors to be too harsh and also wanted them to be categorical, rather than any sort of gradient. This is why I chose to make blue the main color and green the color for the vowels. I also wanted to be able to distinguish between the original letters and the ones that got counts added to them which is why they turn purple.
  • Another part of the functionality was the axis and grid lines. I tested many different sizes and fonts for the axes. I did not want them to overpower the chart but I also still wanted them to be readable. This is why I chose the axes to have very thin lines and only 12 ticks max on the y-axis to avoid clutter. Lastly, I ended up adding the grid lines because it was easier to see the values of each of the letters.
  • The last part of the functionality that I wanted to mention was the check boxes and search boxes that I added. I wanted to make this chart a bit more interactive so that whoever was looking at it could see a couple different views. This is why I added both a sort button for alphabetically and by value. Also, I wanted someone to be able to regenerate the chart with new letters without having to reload the page.