My First Interactive Information Visualization

Project Description

Interactive visualization of the United States' energy consumption, production, and expenditure from 2010 to 2014 created by Brian Tang.

Background

As our final assignment for Northwestern University's Interactive Information Visualization course (NUCS 496), we were tasked to find a dataset and use concepts and techniques that we have learned throughout the quarter to create a visualization that is both expressive and effective. To be expressive and effective is to have all the data represented in a way that effectively conveys the significance of the data without misrepresentation. In addition, the visualization must demonstrate that interactivity is crucial and necessary--otherwise a single static visualization would suffice.

Storyboard & Motivation

Based on my experience from creating a visualization for the 2nd assignment in the class, I realized that it was difficult to create a static map that was both expressive and effective since there were a lot of visual encodings that could no longer be used. Thus, I decided to find dataset that would specifically benefit from having a geographical map to demonstrate the abilities of an interactive visualization. I eventually settled on a dataset on the United States Energy from 2010 to 2014. As mentioned previously, I used a map of the United States to represent the geographical location of the States (shown in Figure 1).

Figure 1: Storyboard #1 - mapping US State geographical location on map

The first variables from the dataset I looked at is the energy amount. Since it is a quantitative variable, I mapped the value to color value. The quantitative is sequential and has no meaningful breakpoints, so I used a sequential color scheme where the smallest value is the lightest and the biggest value is the darkest. Since it is difficult for humans to perceive the precise value from just looking at the color value, I used a cursor hover activated tooltip to show the exact value from the dataset (shown in Figure 2).

Figure 2: Storyboard #2 - mapping energy BTU value to color value

Since there are many different energy types, I used a dropdown selector as a filter. I originally planned to use color hue to represent the different energy types, but after some thought, I decided that it did not aid in the effectiveness of the visualization. In fact, I was afraid that using color hue would cause viewers to accidentally misinterpret the value based on human perception of color (shown in Figure 3).

Figure 3: Storyboard #3 - using dropdown selector as a way to filter energy type

As shown in my last storyboard (Figure 4), I used a slider selector to filter the data by year. This is because a slider intuitively suggests to the viewer that the variable it controls is sequential or ordinal, which is the case with the year variable.

Figure 4: Storyboard #4 - using slider filter to select year

After coding and also getting feedback from classmates, I implemented a bar graph that would appear when a state was selected to show its energy source or production composition as well the expenditure. I also included a color legend so that the range of values could be viewed immediately.

Takeaways & Conclusion

By using this interactive visualization, the most immediate and obvious observation is that California and Texas consumes and spends the most on energy. The states that produces the most amount of energy is Texas and Colorado. Unsurprisngly, within only a span of 5 years, the differences in values during that time is not immediately notable. In general, the amount of energy consumed and the type consumed is related to the population size and the location of the state. By looking at the bar graphs, we can see that despite the many different energy sources, fossil fuel is the main source of power for the US.

This assignment in total took approximately 20 hrs to complete. The main obstacle was trying to learn d3.js and implementing the features I had in mind, although selecting a suitable dataset also took a considerable amount of time. Although I am proficient in vanilla javascript and javascript frameworks (React.js, Node.js, jQuery), it took some getting used to using d3.js functions such as d3.select() and elements such as svg, path, and g.

Future Plans

Unfortunately, with the time limitation and the amount of data in the dataset, there are still plenty of features that could be implemented. My next steps are:

adding a toggle button to view the data in the form of energy or expenditure per capita
implementing a selector, such as a range selector, that can select and show the change in value between years
using a dropdown checkbox selector that can aggregate the different types of energy types

As someone who cares about human-computer interaction, I also plan to do the following:

improving the layout of the visualization with respect to the location of the filter selectors
increase responsiveness to window size and device support

Data & Citations

Although the work and code is mine, this visualization would not have been possible without the internet and its myriad of resources and people who were kind enough to share their work. The base idea and its structure was taken from tutorial code given in NUCS496 (Interactive Information Visualization). The dataset I used was obtained from Kaggle. I was able to create the bar graph chart with the help of a tutorial page from TutorialsTeacher. The color legend used in the visualization is taken and modified from Observable.