Homework 2

---

Functionality

---

Basic

• Implemented a bubble chart with income on the x-axis, murder rate on the y-axis, size of the bubble as population and color as the region to which the state belongs
• Bubbles are sorted so that the smaller ones appear on the top of them, and the opacity was lowered so as not to lose the shape of the bubbles behind
• There is a tooltip for each state bubble displaying the state name, population, income and murder rates when the bubble is hovered over
• Added a legend to show the color to region mappings

Moderate

• Implemented a small multiples graph showing bar charts with values for all 50 states for four variables: High School Graduation rate, Income, Murder per 100,000 pop and Illiteracy
• Added a tooltip so that when each bar is hovered over, it shows metrics for each graph in one tooltip
• Color coded each bar chart by region (same as the bubble chart)
• When bar is hovered over, all other bars' opacity is lowered except for bars of the states that are in the same region as the currently hovered over bar

Advanced

• Implemented a parallel coordinates chart with 5 linear axes (illiteracy, life expectancy, murder, high school graduation rate and frost)and 2 ordinal axes (state)
• Each line is colored by region
• Upon mouseover, the lines that are not being hovered over fade in opacity to highlight the line in relation to the others
• State names on the axis has been re-binded to the data so that they are also given the same effect of the lines for the mouseover

---

Discussion

---

For the bubble chart, I chose to plot income against murder rate to see that there is a trend, as income levels rise, murder rates lower. I chose to color the bubbles by region to highlight the fact that the southern states have lower income and higher murder rates. I added a tooltip to the chart so that the user could easily see all metrics that had been used to code the bubbles and easily compare between states.

For the small multiples chart, I chose to show several bar graphs comparing variables accross different states. This plot shows high school graduation rate, per capita income, murder (per 100,000 pop) and illiteracy. I wanted to see how income and high school graduation levels affect illiteracy and murder rates in each state. Again, I colored each bar by region for easier comparison between states. I chose to fade the bars for states in different regions upon mouseover as a way of using pre-attentive attributes to highlight specific regions. For example, from hovering over the southern states, we can see that many of them have higher rates of illiteracy and murder, and lower high school graduation rates and per capita income. By changing the transition time when the rest of the bars fade out over hover, I avoid the issue of change blindness for the user. I also added tooltips so that a user could easily see what each number corresponds to and what regions

Lastly, I implemented a parallel coordinate chart. On this chart, I chose to show two ordinal axes, the state and the region along with 5 other linear axes. I originally implemented brushing effects on these axes, so that only the lines that were within that range on the axis were highlighted, but ran into a few issues with getting the brushing effect to work on the ordinal axes. Instead, I chose to change and instead, fade out the lines (and state names) that were not being hovered over. The lines are still visible at a lower opacity in the background, which helps the viewer to still see the context. Again, I colored the lines by region to match with the colors used in the other two charts. I also rearranged the order that the axes appear so that life expectancy and high school graduation rate were on either side of murder to highlight the very clear trend in the south: low life expectancy and high school graduation rates with high rate of murder compared to other regions.