MSAN 622
Information Visualization

Homework 1

By Monica Meyer

See Code

Functionality

Basic

  • No decimals in tick marks of frequency counts on y-axis
  • Total number of tick marks on y-axis is always equal to the maximum frequency of letters.
  • Changed so that the x-axis is sorted alphabetically
  • Rotated the y-axis label so that it is above the axis line
  • Added "letter" label to the x-axis

Moderate

  • Added a button that allows user to change between sorting alphabetically (default) and sorting by value
  • Added a search box on the page, which allows user to show letter frequency for the text in that box instead of from the URL query (while still allowing user to enter data in the url to draw the chart)

Advanced

  • At the start of the visualization, show one bar at a time and smoothly grow each bar from the bottom up to its value
  • Mouseover and mouseout to show/hide axis lines/labels

Discussion

For basic functionality, I chose to remove decimals in the tick marks and make the tick marks equal to the maximum frequency of letters for ease of reading by the viewer. Since the graph is counting frequency of letters, there is no need for non-integer values on the y-axis. I also sorted the letters on the x-axis in alphabetical order so that the viewer could more easily find specific letters. I also added a label to the x-axis for ease of reading by the viewer. I chose to make the color of the bars a light blue, with the hover being a much darker hue so that it would stand out more easily against the rest of the letters.

For moderate functionality, I added a button to allow the user to change between sorting the letters alphabetically or by value. This allows the user to more easily see letters in relation to each other. Then, so that the user did not have to reload the page from the url search for a new string, I added a search box that the user can type into to see letter frequency.

For advanced functionality, I added a mouseover/mouseout to show and hide the axis lines and labels of the graph. With this functionality, I wanted to influence the user and get them to interact with the graph. I also grew one bar at a time because this highlighted the differences between letters in a smooth way.