A couple of weeks ago, I published 4 Observations on Animating Your Data Visualizations on the Urban Institute’s Data at Urban blog. In that post, I shared some observations about animation in the data visualization field. I was encouraged to think about animation for a talk I gave in June here in Washington, DC for Sage Ocean (the video from that talk should be available soon). Since that talk (and another one I did at the Data Visualization DC Meetup) some people have asked for my slides, so I’ve posted them below with some short annotations.
I’m certainly not done thinking about this topic. I continue to develop my thoughts and have been reading and exploring different academic papers and different people’s projects. I’m now turning my focus to two distinct areas: using animation to visualize uncertainty and why using sound in data visualization may be an especially useful communication device. If you have any thoughts about either of these, or any of the topics I explore below, please add a comment below or get in touch.
I don’t view what I’ve written below as a “script” for the talk–I’ve included some things here I didn’t mention in the talk and I left some things out that I did talk about. I’ve also replaced some of the slides with the actual tweet or video. Once the Sage Ocean video is up, I’ll add it to this page as an additional reference.
A quick note for those who have vision or balance issues–some of the following slides have animated GIFs or other animations that autoplay.
I had John Burn-Murdoch (aka “JBM”) on the PolicyViz Podcast a few weeks before I gave this talk. In a tweet JBM posted to share the interview, he listed some of the things we talked about, including the advantages of animation and characteristics of his bar chart race.
He also referenced some interested research from one of the Microsoft teams led by Danyel Fisher. People who viewed animated visualizations in their research study were more engaged but also less accurate in their conclusions. I’ll come back to this later.
This tweet from Francis Gagnon was posted in jest, but I used it as my foil for the talk because it’s certainly not an uncommon perspective. Many (e.g., Tufte) believe that the only thing that matters is content. And while content is clearly and obviously of crucial importance, sometimes we need to engage people too (or solely). Sometimes we need to help people have fun with the topic and the visualizations and this is where animation can help.
In a follow-up tweet I sent a few weeks after the Sage Ocean talk, I asked people in my Twitter network to share examples of gratuitous data visualization animations. Just like a bad graph, there are times when people add animations that are unnecessary.
I received a couple of good examples for my library, but Andy’s response–also likely meant to be tongue-in-cheek–reflects what I think many feel, which is that animation is just not necessary.
Okay, so in this section I turn to a schematic of the field of data visualization to lay out a model of function and form. I’ve written about this in the past, so I won’t repeat it here.
These are the 5 types of animated visualizations I discuss in this talk. There’s an asterisk after the Sound category, because data visualizations tat use sound are probably the next stage in the evolution of this part of the field. (I have not yet built in animation for uncertainty into my thinking yet, but Jessica Hullman has sent me a treasure trove of things for me to review.)
I also root some of my understanding of animation in data visualization from Tamara Munzner’s great book, Visualization Analysis & Design.
In her book, Munzner distinguishes between three types of animation: Narrative Storytelling (e.g., movies); Transitions from one state to another; and video playback. I focus on the second category here and leave the other two for another time.
Munzner writes about how one of the big advantages of animation is that it helps us “maintain context.” In other words, you can see the bubble slide from one position to another or how the bar expands and shrinks from one year to the next. In a static case, you would have to curtail the amount of data you show or imagine that change.
It’s also worth stepping back for a second to think about how the field is evolving. I don’t have any quantitative data to back up this very short history (i.e., the last 6-8 years), but I feel like the following is not a big reach.
Only a few years ago, we were mostly making static graphs.
Then the tools got better (e.g., Tableau, D3, etc.), the browsers got faster, the computers got better, and people spent more times on their phones, so we moved more and more to interactive visualizations. And everything became interactive! You could click on every line, bar, and dot and some tooltip or rollover would pop up.
But what we learned–from Gregor Aisch, Archie Tse, and others–is that people don’t really click and creating interactive visualizations is a relatively expensive enterprise. So there now seems to be a turn away from interactivity and back to static graphs. Obviously, this isn’t to say people don’t make interactive visualizations, but it is to say that interactive visualizations are probably used more strategically.
What I think we are seeing now is a move towards animated visualizations, which is kind of in between the two forms. There are a few reasons for this–they can be relatively easy to make, they work on different platforms, and they can help engage people in ways that other forms don’t do.
So that brings us back to the three categories from Munzner.
The other thing that’s interesting to me is that Hans Rosling used animation five years ago in his famous TED Talk. Now, Rosling’s animated scatterplot doesn’t seem that amazing–you can make this in PowerPoint if you want–but his ability to make data come alive is unparalleled. What’s amazing to me is that no one has been able to capture the same excitement for data and visualizations the way he did.
Admittedly, this is a bit of detour about animations, but why haven’t we been able to capture that same excitement? Or maybe we have and it’s just more diffused with all of the other content we see every day?
Back to animation. The thing that we should all remember is that our individual fields don’t live in a vacuum. If you think about marketing and advertising, we moved from these kinds of static advertisements…
to these early videos. And it’s worth noting that making these movies are not particularly easy to do. (If you want to freak yourself out, look for pictures of early Ronald McDonalds–that is a scary clown!). There was a great episode of the 99% Invisible podcast on these techniques a while back.
And look where we are now. Super close ups; big, juicy hamburgers; and really red tomatoes. It’s not just about the content, but about engaging people through the images.
So, yeah, I’m using Francis as my foil.
Let’s turn to the Bar Chart Race. It’s an interesting way to start the discussion about animation in data visualization because people got really excited about these.
If you haven’t seen it, this Bar Chart Race from JBM shows changes in the population of major cities around the world from the year 1500 through 2018. The length of the bars shows the population and the position shows their ranks. Notice also how the whole thing starts with a fairly long pause, the “1500” and map title both expand, and then the animation starts (we’ll come back to that in a bit).
JBM’s initial tweet has more than 19,000 likes and for a data visualization, thats pretty impressive.
If you take Francis’ tweet to heart, you might not want an animated bar chart, but instead a more traditional chart. Try a line chart: you really see nothing other than ‘cities have more people.’
If ranks are your primary interest, then you could make a bump chart; but again, you don’t get much out of this.
You could, of course, simply focus attention on some subset of the data. But again, this doesn’t have the same clarity or engagement as the Bar Chart Race.
In the podcast interview, JBM lays out three ingredients for a Bar Chart Race.
One, the values need to change hugely over time. In his, the population continues to expand over time and there are various points in history when things really accelerate.
Second, you need a changing cast of characters. Notice that JBM’s visualization only shows the top 9 or 10 cities. If he showed all the cities in the data set, the graph would be really tall and you wouldn’t really be able to see anything in detail. By focusing on just the most populous cities, the cities change quite dramatically.
Third, the audience can get on board with this visualization type quite naturally–it’s just a bar chart, which everybody knows, and the ranks are easy to figure out. I think there’s also a secondary way in which this is natural and that is that we relate to the cities we see. I’m from the United States, so when I see New York City and Chicago appear in the chart, I can identify them and understand why they appear when they do. I assume people in other regions of the world have a similar experience.
What’s also interesting is people’s reactions to the Bar Chart Race. Tweets like this were common reactions to JBM’s visualization. This one in particular makes an interesting point–the “evolving plots” are interesting and we’re inclined to actually watch the entire thing, but why? Why does the format draw us in? This is the most interesting thing about animated data visualizations–I might not be able to define it, but I know a visualization is engaging when I see it.
So, yeah, it’s not just content. Content really matters of course; if the data were totally made up or I had no basic understanding, I wouldn’t want to interact with the visualization at all.
Plus, this video RJ Andrews made–while really funny–is actually part of the fun of the Bar Chart Race. (Incidentally, when I showed the original animation to my recent Georgetown class, some of them were rooting for different cities! So I don’t think this video is really too far off from the truth.)
The other point JBM makes is that by sitting and watching the animation, it gives you time to immerse yourself in the subject matter. Again, the content matters because you have to be at least somewhat engaged with the topic, but the act of animating the data forces us to take time with it.
Okay, onto three ingredients for animated data visualizations in general, which I developed from JBM, Munzner, and some other sources and experiences.
First, the pacing needs to be right. Too fast and you don’t get it; too slow and people aren’t going to watch. Remember how the year “1500” glowed at the beginning on the Bar Chart Race? That helps us root our basic understanding of the visualization before the animation kicks in.
Second, the right text. You might need to explain how to read the graph or point out specific aspects of the graph.
Third, the right platform. Some of these will work well on Twitter or Facebook, but might not work well in a blog post. So not only do we need to consider the expertise and needs of our audience from a content perspective and an understanding perspective, but also from the platform they are using.
I talk a lot about Preattentive Processing in my data visualization workshops, and while I don’t always get to animation or interactivity in the basic workshop, it should be noted that there are perceptual rules for movement as well as for static graphs.
You can see some of these Gestalt Principles at play here: Proximity and Similarity (in color and size) all help us understand and organize the circles in this bubble chart from Axios. (Image on the left from Wagemans et al).
Common Region (e.g., enclosure) helps us organize this scatterplot from the Economist.
And Common Fate can be used to help us organize movement. Consider a flock of birds: when you see them flying in the sky, you view them as a group. If a few birds were flying the other way, you would view them as a different group. For animation, therefore, being careful about how things move together is really important for people’s perception of the visual.
Okay, let’s get to some examples.
The first point to mention is that when some people talk about animation in data visualization, they often refer to something more like what I call “layering” where you build up a slide one element at a time.
Like this slide and the next two: you show the axes, then the first line, then the second.
But this isn’t really what I have in mind when I’m talking about animation in data visualization, because this strategy is reserved for a presentation, which is a “fundamentally different form of communication than writing.”
The first animation technique I talk about is what I call “Soft Transitions.” This animation helps soften the transition between views, and while it may not necessarily help readers better understand the content, it can help them move through sets of visuals in an easier, more natural way. This can, for example, help readers see there’s a new visual coming into focus in a different section of the story.
Here’s one example of a treemap moving from one option to the next; the soft transition gives you context to root your eyes before moving to the next view.
A familiar scrollytelling-type visualization–here from the Wall Street Journal–uses a soft transition to spread the icons the screen. Again, I think the approach is gentler on the eyes and senses.
A little less gentle here in this piece from ProPublica–the highlighted icons just kind of appear.
Notice the transition from the map to the bar chart in the Urban Institute “Black Butterfly” story and how the bar chart doesn’t just appear out of nowhere. The transition feels softer because of the animation.
I can do something similar with the PowerPoint graph from before, but it’s the same issue that this is intended for a presentation.
Okay, now we move to what I call “The Socials & the GIFS,” which kind of reminds me of a good band name.
Anyone want this t-shirt?
Here, Munzner distinguishes between animations in which you can control the replay versus animations (e.g., GIFs) where you can’t. Lena Groeger, by comparison, gave a great talk at OpenVisConf where she notes that the advantage of the looping is that it enables us to shift our attention to different places in the visual.
This is a good example of what I have in mind. As far as I know, this 3D bar chart was intended for Reddit and Twitter, and for those platforms I think it works really well. Yes, you could create a static choropleth map of the change of the population in Manhattan, but the animation gives you that sense of the city “breathing.” It also has the right pacing at just the right speed.
Similarly. the series of tweets the New York Times published during the 2016 Summer Olympics worked really well on Twitter because they visually summarized these swimming events in a fast, engaging way. Again, notice the pacing works well here as they speed up the race to 8 times the original.
And Munzner’s argument that the looping doesn’t let you track the animation is not always true; this tweet from Len Kiefer, for example, leaves the trail so you can see the entire sequence.
But GIFs don’t always work–well, I should say that sometimes they break up what the original animation did really well. This GIF from the Urban Institute’s 9 Charts on Wealth Inequality story shows the changes in the distribution in each year as a discrete set of changes….
but the animation on the original webpage was softer and more organic. This softer animation enables you to maintain the view as the distribution changes over time.
Now we can turn to storytelling with animation.
Lots of ways to do this: pair video with animation (source: US Coast Guard via Busines Insider).
Use 3D…. (source: New York Times)
Or just really recognize that an animated visualization is sometimes better than a complex table or graph. In Aaron Koblin’s famous Flight Patterns project, you can see the skies above the United States grow dark overnight, and the red-eye flights travel from the west coast to the east coast. You can then see the flights from Europe come across the Atlantic and the east coast wake up at daybreak. You can see the country wake up as day progresses, and then people on the west coast in San Francisco and Los Angeles take their trips to Hawaii. This visual works as a static image too, but the animation is what makes it come alive.
Adding sound to a visualization is relatively new, so this is a bit of an extension on the topic of animation. (I’m currently trying to learn more about how we process sounds, so if you have good resources please send them my way.)
I think this is a great example of how animation and sound can make the exact same content more engaging (sorry, Francis!). If you saw this static line chart on the Berliner Morgenpost website, you would say, “Okay, that’s a nice line chart–the polling numbers are trending downward.”
If you saw it as an animated chart, you might say, “Okay, that’s pretty interesting. I need to wait a second to see where these numbers end up.” So you might stay a little bit longer on the page.
Now add some sound. I think you’re even more inclined to watch this finish because it’s like waiting for the end of a song. It’s also innovative and new, which certainly helps.
The Financial Times did an experiment with the yield curve and sound. I’m not sure this version really worked for me–I found the voice a little creepy.
But I do really like the Alan Smith narrated version [I didn’t show this with sound in my talk]. Not only does he explain how the chart works, but he also explains the content. I would be interested to know the web traffic statistics for the standalone version and Alan’s explanatory video.
Let’s dive a little bit deeper into sound.
Lena Groeger showed this example in her OpenVisConf talk, so I just stole it. I wanted to make the broader point that there is a theory and practice about how we perceive sounds, so if we, as a discipline, are going to root our work in Gestalt Principles and Preattentive Processing, we should also consider research in this area as well.
An an example, if you listen to this sound clip from Diana Deutsch’s work (click the sound bar above, not the slide image), the phrase “Sometimes behave so strangely” will eventually repeat. And eventually, you will start to hear those words play out in song. [Head’s up: I hope to have Prof. Deutsch on the podcast this fall.]
What’s really cool, is that you can’t un-hear the song. Try listening to the whole thing again.
Obviously, podcasts are an audio-only way we can think about communicating data.
The Economist Data Team added sound to a time series of changes in Swedish men’s and women’s wages before and after the birth of a child. I don’t really think the video works, and I think it’s because the aural and visual inputs are competing with one another. It might work better overlaying the data on top of a line chart, but I’m not sure. (Interestingly, I showed this to someone who used to be professional musician and she understood this easily.)
That being said, check out the podcast version of this same approach (click the bar below the image). I think this works great here; again, I think having only one channel (aural) to try to understand the data makes my perception of the pattern much easier.
The final visualization type I focus on is Small Multiples, which I think can be a substitute for actual animation.
Munzner and Groeger essentially agree here–Munzner argues that seeing all the frames at once can be more effective than animation while Groeger has this great line that “small multiples let us off-load our memory onto the page.”
You may be familiar with this image from Edward Muybridge (want a tshirt?). Muybridge was tasked with showing whether horses leave the air when they gallop, so he developed a fast-action camera to show this is indeed the case. You don’t need actual animation here to see the movement across the 12 frames; the small multiples does the work for you.
Muybridge applied this technique to lots of other animals and people.
You get a similar feeling from this The New York Times small multiples map of drought from 1896 to 2012. They could, of course, have plotted this as a line chart of the total number of acres in drought or some such metric, but that wouldn’t be as engaging, would it?
Let’s go all the way back to the Fisher paper. That paper showed that people who looked at animated visualizations were less accurate in their assessments than people who looked at static small multiple images, but they also found the animation more engaging.
So, do we want to make our users/readers happy or do we help them be more effective? This is the core question of creating any visualization, and we need to figure out what we want people to do with our work.
I also spend a bit of time at the end of this talk highlighting some of the tools you can use to create animations. I just list the links here.
GIFMaker (this is the one I use)
How to create an animated GIF using PowerPoint. I don’t mention Photoshop here, but that’s another tool you can use.
Flourish added Bar Chart Race capabilities.
gganimate, part of the R coding language.
I haven’t used this, but presumably it lets you convert interactive visualizations from Excel.
To wrap up, do we want to make our users happy or help them to make accurate conclusions about the data? I think animation has the capabilities to help people clearly see our data and find the stories in the data.
I know Francis and Andy are making these comments a bit tongue-in-cheek, but I also think these sentiments are not uncommon. I hope I have demonstrated that there are lots of way to create animated visualizations, that our perception of those animations is rooted in our understanding of our perceptual system, and that creating such animations is not necessarily super difficult.
Encouraging readers to sit and watch not only helps them immerse themselves in the subject matter, but also helps them engage with our data and our content. And that needs to be one of our primary goals because if no one is looking at our work, it can’t do any good.
PostScript. I hope you found these slides and the resources within them helpful. If you have any comments about anything I’ve shown above, or good examples of animated data visualizations, please share them in the comments section below.