Homework #3: Interactive Time Series Visualization

Data Preprocessing

Before starting my visualizations, I updated the dataset to make it easier to read in and manipulate. First I added back in the month and year with some basic for loops since the data was inaccessible. Then for the charts that I ultimately used, I filtered the dataset for just those columns before writing it out to a csv. Here is the code that I used to do this.

Functionality

• Basic
• Multi-Series Line Plot
• Plotted three line charts with drivers killed or seriously injured, front passengers killed or seriously injured, and rear passengers killed or seriously injured
• Made all three lines distinctly different colors
• Added labels to the end to see which line is for which set of data
• Area Plot
• Plotted the distance driven vs. time as an area plot
• This plot is not shown. You can find the source code for it here.
• Stacked Area Plot
• Plotted the area of all people killed or seriously injured and showed the breakdown of drivers, front passengers, and rear passengers
• Created a legend to show which was which
• Moderate
• Details on Demand (tooltip)
• Added tooltips to both of the chart (Removed from stacked area once brushing was implemented)
• Shows point when hovered over it
• Shows number of deaths/injuries, month, and year
• Panning
• Added panning on the stacked area chart
• Select the area of the amount of points to see, and can scroll back and forth
• Advanced
• Brushing
• Added brushing to the stacked area chart
• Along with panning, can select the data you want to see and top chart adjusts accordingly
• Filtering
• Pending

How To Interact

• For the Multi-line Chart:
• Shows all three types of deaths/injuries
• Hover over points to see exact number of deaths/injuries for each month and year
• For the Stacked Area Chart:
• Shows the cumulative area of deaths/injuries
• Use context chart (small one on the bottom) to filter the larger chart
• Select area that you want to see
• Click and drag to see a different portion of the plot
• Or drag ends to show more or less data

Explanation

• For the basic functionality, I originally chose to do a multi-series line chart and an area chart. I first implemented the multi-series line chart because I wanted to be able to see the different number of drivers, front passengers, and rear passengers getting killed or seriously injured. Then I did a simple area chart to understand how area charts works. I plotted the number of kms driven since it was a simple number. However, because this was not very interesting, I went back to the data I used for the multi-series line chart and created a stacked area plot. Lastly, I added a legend to this plot so that we knew which color represented which set of data (keeping the colors consistent between both charts).
• For the moderate functionality, I chose to do details on demand and panning. I started with the details on demand and added them to both charts. First, I added points on the lines, with opacity zero. Then on the mouseover, I had them reappear with a pretty big radius so that we can see the circles when we hover. This was so the tooltip would be easy to tell which point we were looking at. On the tooltip, I included the number of deaths/injuries, the month, and the year. For the panning functionality, I added panning to the stacked bar chart. Because this didn't work well with the data points, I removed the tooltip from the stacked area chart to avoid confusion.
• Lastly, for the advanced functionality, I added the brushing aspect to the stacked area chart. This enables us to look at specific parts of the plot and be able to zoom in on a year or specific time frame.