Team Members: Grace Chen, Rebecca Yuen, Karen Altergott

Design Rationale

The dataset we are using contains information about multiple types of storms. We decided to focus primarily on one type of storm for this visualization. We originally thought that a visualization showing the paths of hurricanes and the damage they caused (in terms of deaths and injuries) would be an interesting thing to see. However, we discovered that the hurricane data does not contain geographical coordinates (longitude/latitude), but rather associates each hurricane with a county. Instead, we decided to focus on tornadoes. We noticed that tornadoes had a beginning location as well as an ending location and thought that it would be interesting to track the paths of this type of storm. It turns out that tornadoes often only travel 5 to 10 miles and therefore the paths would not show up well on the map of the entire United States.

Tornadoes also have a Fujita scale that they are measured on. This rates the intensity of the tornado. By combining this with the number of deaths, we believed this would result in an interesting visualization. We chose a map of the US to display the locations of the tornadoes, and scaled each circle representing the tornadoes according to the rating the tornado received on the Fujita scale. We thought size was an appropriate visual encoding for this because tornadoes with higher windspeeds generally affect more areas. The coloring of each circle represents the number of people affected. Darker colors generally evoke a sense of sorrow, so we felt that this was fitting for cases where there are more deaths and injuries. The darker the circle, the more deadly the tornado. In addition, if we had reversed the color gradient, our map would have been mostly black, which was visually less appealing. Initially, we tried a red color gradient, but the red circles were too jarring, so we switched to blue. This was the basis of our visualization.

As we continued, we wanted to add in more effects and make the map more interactive. The dataset also spans several years. We wanted better granularity in terms of time so we added in a time slider. This also more clearly illustrates where tornadoes appeared since the majority of tornadoes occurred in the midwest and overlap each other in the same few states. In addition to this, we wanted more statistics for each tornado and state so we added tooltips that appear with specific information when a tornado is hovered over or when a state is clicked on. Lastly, we found that the data for the tornadoes contains official reports of the tornadoes (especially in more recent years). This was interesting information that added to the visualization, so we added this beside the two legends.

Development Process

After first wrangling the data, we started adding things in piece by piece. First we displayed the map on the page. Then we loaded in the data so that all the tornadoes were displayed on the map at their starting locations. Once that was completed, we added in color as well as sizing of each data point. The time slider and legends were added next. After this, we added in tooltips with date, injury, and fatality information, and then added in the tornado reports. The final step was getting the map to zoom to specific states so that users could more easily make out the number of tornadoes as well as select ones of interest. In total, we spent about 35 hours working on our application.

The part of the project that took the longest was figuring out how to display a map of the United States. Our first implementation rendered a map without borders, which was visually unappealing, so we tried again with a different map that worked much better. Learning how to use D3 in general was also a challenging aspect of this project. Overall, we did not clearly split the work, but rather met up to work on this visualization. Grace focused on displaying the map and adding the slider, Rebecca focused on the legends, and Karen focused on the data wrangling and map interaction -- she is a D3 wizard.