While looking at examples of visualizations for my thesis writing this fall, I was struck by how many made effective use of documentary-style narrative visualization in some way. Whether used as an introduction to orient the user, or used as the primary technique in the piece, many successful visualizations are based on cinematic techniques that incorporate music or animation to improve both the understanding and memorability of a graphic.
When my Sketching with Code class was asked to program a line or bar plot in d3, it seemed like a good opportunity to recreate another of the simple visualizations from my original soil poster, and to use transitions, music, and animation to increase interest in this simple bar chart, and to direct attention to the information it contains.
For me, realizing that soil stores more than half as much carbon as all of the global coal, oil, and gas reserves was a big surprise. It was also a turning point in shaping how I understood the relevance to soil health as a method of combating climate change. In the original poster, this surprising revelation was pushed to the final visualization in the bottom right corner, and didn’t have the prominence that I felt it deserved. It’s a simple piece of data, and doesn’t require a complex visualization. A simple bar chart does quite well for the purpose, but it’s easy for viewers to miss the important comparison because bar charts are so ubiquitous. For this reason, this visualization seemed like a particularly good candidate for animation.
(Warning: this video has background music!!)
The bar and pie charts were constructed in d3 using sequences of transitions and easing to draw one bar at a time, accompanied by text that interprets the meaning of each piece of data incorporated. The narrative steps the viewer through the data, interprets significance, and provides context for each piece of data shown. It also helps to connect the pie chart to the soil bar, and to link the organic carbon content of the soil to its storage capacity.
When developing the visualization without music, I found myself annoyed with the delays caused by the animation, and impatient to rush the transitions between states. It was clear that it would be difficult to balance the speed of the animation against the time that people need to read the text and watch the animation, especially when viewing for the first time.
Adding the background music made a dramatic difference in how I perceived the animation. The 500 ms transition time that had felt agonizingly slow now felt too fast, because it didn’t match the tempo of the music. In the final version, the text dwell time on the screen is 2000 ms, with 3000 ms transitions for the fade in time. The entire visualization takes just over a minute, which felt impossibly long without the music, and much more reasonable with it.
The music also added an emotional component to the visualization that was not there before. I used the Epilogue piece from Doug Hammer’s album Travels: a slow, deliberate piano score with a lot of emotion. This set the tone of the visualization and emphasized the subjective importance that I wanted to convey.
Overall, I think that this was a successful experiment. The animated visualization helps to improve the impact and emotional significance of an otherwise unremarkable graphic. The narration provides important context and places emphasis on the meaning of the data shown, rather than the presentation.
This animation would make a successful introduction to the project or to a section of the exploratory piece. I would not use this presentation style for every visualization, because the enhanced impact comes at the expense of time. I felt that the additional time was justified here, because it was so easy to
miss the important feature of the bar chart in a cursory examination.
As a graphic for science communication, I would like it to go one step further. This simple narrative does not fully represent the nuance of this topic, and does not present alternate views. The visualization does not yet do justice to the full content of the paper, which gives a comprehensive overview of global carbon
cycles and how changes to soil carbon might affect climate change.
Though I was careful not to state it in this way, simplistic interpretation of my animated introduction could suggest that organic farming is sufficient to solve climate change. In reality, this is just one approach of many that must be taken to address an issue of this magnitude. There are many excellent reasons to focus on improving soil health in addition to its benefits for climate change, but it’s important to realize that increasing soil humus is not a cure-all solution. When discussing issues of scientific and social import, it is particularly critical to make sure that the design supports the full context of the issue, rather than a single component of it.
On a technical note, I found that the timing of the animation varied significantly from computer to computer and between my local server and github pages. Running my screen capture software on top of the visualization also changed its timing a bit, so that the video doesn’t quite represent the timing that I had planned. I think that this has something to do with the internal timing of d3 transitions, and how the easing functions stack up. For a quick homework assignment to try things out, this wasn’t a big deal, but I found it annoying that I couldn’t control the animation more precisely. I’m not sure how I would change this in the future, but I think I might experiment a bit with using browser-run events rather than stacked d3 transitions, to see if that might help to reduce variations in playback timing.