Coal vs. Geothermal: Who’s up in Smoke?
Authors: Anushikha Sharma, Stefano Cobelli, Lukas Munoz, Sean McDonough
Introduction
Over the course of the last two weeks, our team focused on building two different visualizations for a dataset of our choosing. The visualizations included one that was designed to be persuasive and memorable, and another visualization that was designed to be clear and unbiased. After some research into possible datasets, we decided on the Energy CSV Library from the CORGIS Dataset Project. This data is from the US Energy Information Administration, and covers the consumption and production of coal, geothermal, hydropower, distillate fuel oil, wood, kerosene, and other kinds of energy from 1960 to 2014. One important note about the dataset is that it is not complete, and there were many cases where information was not available and the data point would be replaced with a 0.
After our dataset was selected, we had to decide what to do with the data. The group consensus was to focus on coal and geothermal energy consumption patterns. In particular, we wanted to compare the consumption trends of each kind of generated energy. With our clear and persuasive visualizations, we found that with each visualization the data was interpreted similarly. However, the difference came in that the persuasive visualization didn’t tell the full story. There was bias that came into play with the persuasive visualization that was reflected in class feedback. Both visualizations can be seen below in figures 1, 2, 3, and 4.
Both visualizations can be seen below in figures 1, 2, 3, and 4.
Clear Visualization: the design process
Design Brainstorming
To build our final design we followed the five design-sheet approach to design. The five stage design process starts with the brainstorming sheet(s). To create a clear design that represented the data and allowed for the user to see trends in energy consumption, we had to create an expressive visualization. It had to show the information that we wanted shown in a clear fashion. Our visualization also had to be effective: the conclusion of the user from the data should be easily perceived. Additionally we tried to follow the design principles of consistency, importance ordering, and prioritize important information. Figures 5, 6, and 7 show our brainstorming sheets.
From our brainstorming, we decided on three initial designs that could be implemented to make our data prioritized and simple to understand. The following figures are our three initial designs that we would test on users.
User Testing and Feedback
With these initial designs built, we had to test our visualizations on our users. The purpose of this was to find which design followed the design principles that we were trying to follow. By interviewing users and taking notes, we could find which design was the most expressive, effective, consistent, and prioritized information correctly. To try and make the testing as unbiased as possible, questions were asked in an open ended way. A few questions that were asked were “what do you like and dislike about initial design (1,2, or 3)?” and “Is there anything you would change about initial design (1,2, or 3)?” Additionally, the designs were not shown in the same order to different users in an attempt to prevent biasing the first shown design. The next figures show some user testing as well as notes that were taken by an observer during those user tests.
After analyzing notes based on user testing, we found that the best way to follow the design principles that we were trying to follow was to use one chart with user interactivity. The majority of users favored initial design 3 because it was easy to understand and represented the data well. Our realization design reflects initial design 3 fairly closely and can be seen below.
The design principles that we sought to fulfill were well covered by this final realization design sheet. The visualization is expressive in that the user has the ability to explore all of the data. The visualization is effective in that the user is able to see the trends in the data very obviously using the log scale. Additionally, we even order what the user will see in order of priority to show the trends that we want the user to see.
Final Result and Reflection
After establishing our realization design, we set out to implement it using the visualization grammar Vega. Since Vega was new to us, we started out by going through the galleries of tutorials and examples available online. As we worked through them, however, it became apparent that the tutorials and examples were only relevant for some of the functionality we wanted to implement. Furthermore, they seemed to provide little between the very basic and the overly complex. After spending significant time attempting to implement the functionality we desired, we came to the conclusion that, for our desired end product and the timeframe of the project, Vega was not the tool to use.
From that conclusion, we made the decision to focus on desired functionality over using Vega. We created image files of the graphs we wanted to display, and hard coded them into the site with buttons to change the data displayed and the scale of the y-axis. Due to what ended up being essentially wasted time working with Vega, however, we were unable to polish the site into what we had visualized in the realization design. Functionality to customize the data was limited to to choosing between geothermal, coal, or both, instead of individual sources, and the buttons themselves were not as intuitive or pretty as we had originally intended. In addition to this, user feedback on the final design also picked up on details that we missed due to the time crunch, such as proper axis labels across the various graphs
Overall, our process of brainstorming, design sketches, and user feedback went well up through the creation of the realization design. At that point, we felt we had a good idea that was representative of what worked and what users found useful. However, when we tried to implement it, we ran into time issues that were exacerbated by our difficulties with Vega. As a result, our final product was looked more like an initial prototype than we wanted it to. If we had more time to refine our prototype, however, polish would not replace our primary goal. If we were still unable to create our visualization in Vega, we would probably attempt a different method of creating the visualization we wanted; throughout our process, our focus was on creating what we could of the functionality of our realization design before making it pretty, and that was what we delivered.
Creative Visualization: the design process
Brainstorming — What story did we want to tell?
As mentioned above, even for the creative visualization, we followed the five design-sheet approach. The first step to our brainstorming was deciding what aspect of the data we wanted to choose that would help us persuade the users of a specific narrative. The more we looked at the data and considered the different combinations of independent and dependent variables, we realized that coal was still significantly more in use than geothermal and hence, comparing direct consumption numbers was not helping us tell a story. Thus, we decided to look at relative change in the use of coal vs. geothermal over the years. Looking at the change over the decades it was obvious that the usage of geothermal energy had gone up several times between the years of 1989 and 2013. In contrast, the relative change in coal consumption was not very significant.
Thus, we had our narrative — we were going to build a creative visualization that demonstrated the percentage change in the relative consumption of commercial geothermal energy vs. the percentage change in the relative consumption of commercial coal. By looking at the dataset from this angle, we could hope to persuade our viewers by giving the illusion that geothermal was taking over coal in the energy industry.
Once we had our independent (years) and dependent variables (percent relative change in consumptions), we began to brainstorm visualization ideas. Though at first we put down any and every idea that came to mind, we eventually chose a few good ones for the purposes of our design sheets.
Design sheets
For the design sheets, we chose ideas that had potential for persuasive imagery (what would attract the users, ease of interaction (scales, sliders, buttons) and clarity (users should understand the comparison being made). The following are the four design sheets that eventually lead us towards our final visualization -
User Testing and Feedback
Once we had created our 4 design sheets, we took them to our clients (in this case, classmates) for feedback. For the creative designs sheets, the feedback was as follows -
- Design Sheet 1 and Design Sheet 2 were clear in their demonstrations because they used circles that would increase or decrease in size depending on the relative change in consumption. However, users also said that these weren’t the most creative or enticing visuals that they had seen and were similar to bar graphs and pie charts.
- Design Sheet 3 and Design Sheet 4 were well-received in the criteria of creativity. The testers really liked the idea of the coal and geothermal fumes growing/reducing in size as the relative consumption changed over the years. However, the common critique was that the overlapping circles of coal and earth were not necessary and rather confusing.
- The users said that simply clicking on the years to demonstrate change was not the best approach because unless instructed, it was unclear how they should interact with the visualization.
- Sliders were more popular as a means to interact with the visualization. We were also told that that the sliders in combination with statistics ensured that one could tell the what the dependent and independent variables were.
Realization Design
Based on all the feedback, we decided to use the fumes in our visual, sliders for navigation and display statistics to help users clearly follow the relative change.
Results and Reflection
For the persuasive visualization, we immediately chose p5.js as our library. p5 offers a lot of room for creativity with easy to use tools. The first step was setting up, which was simply downloading the library, and hosting the index.html. The package came with a pre setup html and javascript file that was ready to be used. A canvas was then added with a background color, and we were able to enjoy our boring, grey stage. After exploring examples and simple shapes to see if our plans were viability, we found an example that p5 had posted an example using particle effects, seen in Figure 28.
This is a p5 port of Dan Shiffman’s SmokeParticleSystem. It is a particle generator that also simulates wind, making the smoke go to where the mouse is pointed.
The idea was to take two of these smoke generators and use them to represent smokestacks for coal and geothermal energy consumed. To manipulate the data to bias geothermal, the data was chosen with the most available, the largest trend of increasing geothermal energy, and the area where coal decreased the most. We found that commercial coal and geothermal energy in Pennsylvania from 1989 to 2013 fit this criteria. To get the relative ratio for each energy, we took each years data over the base year, 1989. We multiplied that ratio by 100 subtracted it by 100 to get the percent change.
The above figure shows how commercial geothermal increases by almost 3800% and coal decreases by only around 88%. These percentages had solidified our narrative.
So now we have our data to visualize and our vehicle to represent it. To show an increase in energy, more smoke would be produced, while a decrease would mean less smoke. One of the most intuitive ways would be to add more particles proportionally i.e.100% increase meant 100% more particles.
To manipulate the visualization, we use the opposite of what some clear techniques are. When it comes to representing data, one important design element is to make sure the data is separable so there is no interference. Here we are purposely making the smoke interfere. We are also increasing the persuasive factor by decreasing its effectiveness in scale. It’s going to be very hard to tell the difference in size in smoke between the two stacks, as they don’t use length and instead use volume.
A slider was added to change the year of the data points to use. Text was added below the smoke stacks to explicitly state the exact change in percent. Some minor text and basic color details were added to improve the aesthetic of the visualization and, and voila, a persuasive narrative was born.
In 1989, both smoke stacks are nearly identical. As the years increase, the coal stack shrinks down to a tiny cloud while the geothermal stack grows nearly exponentially.
While this process was very engaging, there were also several challenges. It was thought that we could add wind and produce particles faster to simulate a bigger stack. Immediately we realized that more the number of particles produced meant more strain on the browser. We were bottlenecked into being able to have a certain amount of particles on the screen. There were a few strategies to get around this. One was to change the size of the particles, but this wasn’t an easy solution as they didn’t scale well and would have had to been created from new sprites. Another solution was to increase the life of the particles. This was easy to scale with the data and appeared okay. We were still having issues with how much was going on the screen at a time. To fix this, we moved the smoke sources halfway up the canvas, so that old particles would leave the screen before dying. This worked for the most part because p5 did not have to draw particles that weren’t in the canvas. Though this impacted the effectiveness in showing the scale of increase, as was the common feedback from our peers during demo day, it was effective enough to be create a presentable visual. The framerate was also cut in half to 30 frames per second to try to reduce the stuttering. The lag still exists on most computers running the animation, but it was faster and better as compared to other solutions.
When drawing in p5, you are suppose to draw the entire screen each frame. This means drawing the background, then drawing the next layer, and so on. When attempting to display a coal stack and a hot spring under their respective stacks, we had issues drawing images. p5’s image function wasn’t working as intended and would only be drawing on the first frame. To get around this, we tried using an image as a background with the two pictures in the correct spot. The background image also had trouble loading every frame. After spending a significant amount of time to fix this small problem, we decided to leave the images. We displayed statistics and used labels and contrasting colors for the smoke stacks to ensure clarity.
As a group, we felt the creative visualization achieved the level of persuasion that we had hoped for but still had many areas for improvement. We feel many of our challenges align with the class’s thoughts on the product. It would have been a more effective representation if the animation was more polished. Making the smoke stacks larger and less laggy and making the screen bigger are all common themes within the feedback. Given more time, these would all be possible to add. On lighter note, we do feel proud that we were able to convince people that geothermal power was a huge presence in our area. Framing the answer as “a 3800% increase in geothermal consumption” does not lead people to think it is such an insignificant player in the industry as it really is.
Conclusion
We believe that our visualizations were able to show the two sides to a story. On our clear visualization, we have an accurate representation of the consumption of coal and geothermal energy being consumed. Coal is a clear superpower, even if other sources are starting to take a share of the consumption. Geothermal contributes very little to the total consumption amount (whether it’s industrial, residential or commercial). However, using our creative visualization we were able to create the narrative that use of geothermal was increasing by factors in the thousands and taking over coal consumption.
This design experience really speaks to the responsibility that computer scientists have when it comes to telling a story through visualizations. Information can easily be manipulated and bent to further an agenda and that brings up many ethical challenges. However, if used effectively and ethical, it can also be used to start movements and change world.
The links to our visualizations —
- Creative Visualization: http://eg.bucknell.edu/~sjc032/bucknell-hci/p5/DESIGN%20FOR%20UNDERSTANDING/
- Clear Visualization: http://eg.bucknell.edu/~lam046/bucknell-hci/
