C-level Functionality
- Query string is obtained from page URL, decoded and converted to lower case
- Spaces, punctuations and special characters are ignored and letter counts are obtianed
- Letters and corresponding counts are logged to the console
- Basic Bar chart of these counts is constructed
Customization
- Frequency of Y-Axis tick labels is modified
- Number of decimal points of Y-Axis tick labels is changed to 2
- Font family and size of Y-Axis tick labels is altered
- Length of inner and outer tick marks of Y-Axis differs
- Position of Y-Axis label is changed
- Vowels are displayed in steel blue color and consonants are displayed in light blue
- Letters are sorted in alphabetical order to begin with
B-level Functionality
- Two buttons are added. One is "Sort by Value" and the other is "Sort by Alphabet". The functionality is obvious from the name of the button.
- Added a tooltip that shows the exact value of a bar when hovering over it
A-level Functionality
- At the start of visualization, one bar is shown at a time and each bar is smoothly displayed from top to bottom
Discussion
This visualization displays count of alphabets obtained from query string. In case the query string is empty, The default query string used is "Default Letters". I chose to display Vowels in steel blue and consonants in light blue to differentiate between them.
I also increased the font size of Y-Axis tick labels. I reduced the frequency of tick labels on Y-Axis as I 'm displaying the exact count when mouse is hovered over the bar. I used tool tip and red-colored text to highlight exact count of the bar. I added two seperate buttons to sort the bars by value or alphabet.