In my book on presentations, I describe what I call “layering” as a technique to break up dense slides and show individual points one at a time. Instead of showing four bullet points on a slide, break them up into four separate slides so you can show and discuss the first bit of text, then gray it out, show the next bit of text to discuss, and so on. Although I also recommend reducing the amount of text on slides, this technique is the easiest way to focus an audience’s attention on each section of text.
This layering technique can be applied to anything you put on a slide, including text, graphs, and other images. You might have a line chart with lots of lines or a scatterplot with different groups, and instead of putting everything on the screen at once, you can focus your audience’s attention and walk them through each line, data point, or group. When many data visualization specialists think of animating their data visualizations, this layering technique may be the primary approach they consider — present a chart in PowerPoint, one line or one bar at a time.
Showing each piece of your visualization is not the only way to animate your data, however. You can create visualizations in which the elements smoothly transition from one position to another, or you can stitch together a series of images like a cartoon. An even easier way may be to show a set of static graphs that suggest movement.
Creating animations with data can engage readers and viewers in ways other visualization types may not be able to. Animations can help people see transitions from one state to the next and enable them to more easily track changes as parts of your visualizations move from one point to another. In this post, I’ll lay out some of the perceptual reasons animation can be useful and walk you through some different ways to animate your data.
Types of data visualization animation
We can root our understanding of ways to visualize information by considering principles of psychology, such as the Gestalt principles of visual perception. Gestalt psychology was developed in the 1920s by German psychologists who sought to understand how humans acquire and maintain information in our visual field, and their theories often refer to how we subconsciously organize visual elements into a group.
The basic tenet of Gestalt psychology is that we perceive some objects in our visual field as having stronger associations than others. There are different “laws” of Gestalt psychology (described by German psychologist Max Wertheimer in 1923) including proximity (objects physically close to one another belong to a group), similarity (the most similar element in color, size, and orientation, tend to be grouped together), and enclosure (objects physically enclosed together are a group). The concept of “preattentive processing” is a subset of Gestalt psychology and is another way to think of how we can draw people’s attention to different parts of an image.
With respect to animation, Wertheimer’s grouping principle of common fate is most applicable: “all else being equal, elements that move in the same way tend to be grouped together.” Consider a flock of birds. When we see a group of birds flying in the same direction, we assume they belong to a single group. Birds flying in different directions, by comparison, do not appear to be in the same group. So when we start thinking about how to animate data, we know users will perceive visual elements that move together as being related.
The fundamental issue with animating a visualization is showing the reader how something changes from one position to another. In her book, Visualization Analysis and Design, author Tamara Munzner distinguishes between three kinds of animation: narrative storytelling (i.e., movies), transitions from one state to another, and video playback where the user can control the sequence by playing, pausing, and rewinding. She writes that, “Animation is extremely powerful when used for transitions between two dataset configurations because it helps the user maintain context.”
In the world of data visualization publishing — distinct from the world of presentation slide design — animation can therefore be used in different ways with different impact. In fact, animation is more than simply moving from one slide to the next, adding (or deleting) information as you go, and narrating each chart. Instead, you leave it to the reader to focus their attention on an area of the graph as it transitions or as they control it.
Animated transitions
I have identified six general types of data visualization animations: data update (selection and scroll), soft transitions, looping, fun (and sometime gratuitous), and small multiples. I don’t view these animation types as mutually exclusive or exhaustive, but they have helped me organize my thinking around different ways to animate data to explain or communicate information to audiences.
The data update animation: Selection and scroll
Perhaps the most common type of animation is one in which the visualization changes as a result of updated data. There are two different methods for this type of animation: enabling the user to control the data selection or options (think of a data dashboard) and animating the data from one state to another as the user scrolls or clicks.
I’ll use two Urban Institute examples to illustrate. In Urban’s National Assessment of Educational Progress tool, users can select different years, grades, test types, and demographics to compare results across the 50 states. This animation makes it clear that the data are changing and the states are being re-sorted.
Another approach is to animate the data as the user scrolls or clicks through the page. In this Urban feature on school funding formulas, we use an approach you have likely seen elsewhere — as you scroll through the piece, the bars animate to show the change in values from one state to another. With this approach, the user is able — as Munzner notes — to maintain context from one state to another.
The soft transition animation
A subtler animation technique is to animate a chart as a user arrives to the graph. In Urban’s recent “Black Butterfly” feature, which explores racial segregation and investment in Baltimore, users vertically scroll through a series of maps and graphs paired with text. Notice in this section how the bar chart subtly animates as it appears on the screen — this softens the visualization for users to slow down their perception as the visualization changes.
I distinguish this type of animation from the first two because it is not the data that are transitioning from one set of values to another — the view is transitioning instead (from a map to a bar chart). The animation helps soften the transition between views, and while it may not necessarily help readers better understand the content, it instead helps them move through sets of visuals in an easier, more natural way. This helps readers see there’s a new visual coming into focus in a different section of the story.
The looping animation (or GIFs)
Another way to animate a visualization is to show a series of transitions stitched together, like a comic strip. You could think of this like the “layering” approach, but instead of requiring a speaker to narrate the changes from one scene to the next, the animation can stand on its own with minimal commentary.
An easy way to create this comic strip effect is the popular animated GIF. A GIF (graphics interchange format) is, simply put, an image format. GIFs can hold up to 256 different colors, which doesn’t make them ideal for color photographs or images with color gradients but does make them fairly effective at showing changes from one state to another. Although GIFs were a bit out of fashion in the early 2000s (FastCompany wrote this nice review of the history of the GIF a couple of years ago), many people now use them (even my kids use them in their school projects), and they can help us quickly communicate pretty much anything.
From a data visualization standpoint, animated GIFs are powerful because they enable us to stitch together different graphs into an animated whole. For example, we could first show a graph with one line, then add a second line, and another and another to build up to the final line graph with four lines. There are a multitude of tools to create a GIF — you can export a series of PowerPoint slides or use Photoshop. Online tools like GIFMaker or EZGIF allow you to simply load a set of images to get stitched together. The gganimate package in R can be used to create animated visualizations, like this one from Len Kiefer.
As opposed to the layering approach in a presentation — where the speaker narrates the visual and draws the audience’s attention to the most important part of the slide — in an animated GIF, the user needs to find the area of interest on his or her own. In a 2015 talk about animated GIFs (and looping more generally), Lena Groeger, an investigative journalist and developer at ProPublica, said, “Looping makes us notice differences because our attention can shift around to different places.” It’s a simple concept — consider (similar to what Lena showed) the comparison game you can try in any Highlights magazine at your local pediatric dentist’s office. In the pair of images, you need to flip back and forth to find the differences; the animation, however, makes those differences obvious by effectively layering both images on top of each other and continuously toggling back and forth.
In data-driven GIFs, the important characteristics are to first, make the data change obvious and second, keep them short. In a 2018 feature story, “Segregated Neighborhoods, Segregated Schools?”, Urban researchers looked at the relationship between school and residential segregation. The feature’s animated visualization in the feature also appeared on Twitter where the short, clear transitions made it easy for users to see the data change. (For more Urban GIFs, follow us on Twitter or see our collection on Giphy.)
This being said, Munzner argues — quite convincingly — that animations like these are not as effective as the video play-pause-stop approach: “The difficulty of multiframe animations is that making comparisons between frames that do not adjoin relies on internal memory of what previous frames look like…. Giving people the ability to pause and replay the animation is much better than only seeing it a single time straight through.”
I think this becomes clearer if we compare how this histogram from Urban’s updated “Nine Charts about Wealth Inequality in America” feature is animated on two different platforms. In the website version, you can either select individual years and the graph will lightly transition to that year, or you can allow the visualization to animate through the graph itself. The animation takes an anchored position and helps your eye track the change in the data from that initial position to the next. In the animated GIF version, however, the animation is a bit choppier and you can’t control the pace of the change from one year to another. Thus, as Munzner notes, readers must rely on their internal memory to understand the changes over the years.
Fun (and sometimes gratuitous) animations
Not all animations need to serve a particular data-driven purpose. Like the soft transition animation, creating fun animations can be a useful way to engage users.
In 2017, the New York Times showed sped-up versions of swim races during the Summer Olympics in a series of animated GIFs on Twitter. The sped-up animation over the four-minute race was much more effective than, say, a bar chart showing finishing times — the animation encourages you to watch the entire race and see the winners speed ahead. It’s also a terrific example of how to animate data on a social media platform, like Twitter, that might not have the same effect in the full story on the Times’ website.
In another feature about school funding, Urban compared the progressivity of school funding in Florida and New York. The animation between the two maps is not particularly necessary, but it’s a fun way to help move the story forward and demonstrate the change from one state to the other (see Noah Veltman’s 2017 OpenVis talk and his ‘flubber’ package for more about this animation type).
And yet there’s a thin line between fun and gratuitous. Fortunately, I think the use of gratuitous animations has diminished over the past few years as developers and storytellers have discovered that showing bubbles flying from one graph to the next or charts bouncing and rerendering on every click doesn’t necessarily help readers understand the content and that these animations can be time consuming (and expensive) to create.
Small multiples
As strange as it may seem, animated data visualizations do not actually need to move. A series of small graphs (often called small multiples), can serve the same purpose of showing change from one position to another. Groeger makes this explicit: “Small multiples let us off-load our memory onto the page.”
But you can’t overdo it. Again, from Munzner: “For tasks requiring detailed comparison across many frames, seeing all the frames at once side by side can be more effective than animation. The number of frames must be small enough that the details within each can be discerned, so this approach is typically suitable for dozens, but not hundreds, of frames with current display resolutions.”
Urban’s “Mapping America’s Futures” project combined a variety of data visualizations, including maps, line charts, and bar charts. These five bar charts show the breakdown of ages by race in four different decades. You can visually compare the distributions across age groups in each decade. Layered on top is a simple animation that shows the change from one year to the next as you select.
The small multiples approach may be preferred in certain platforms over others. In this story on the spread of Wal-Mart in DC, Chicago, and Atlanta (and shared in the Groeger talk referenced above), NPR used a small multiples approach on the desktop version but animated GIFs on mobile platforms. Notice the importance of the different platforms that likely drove this decision — there is less space on your mobile device, and you are likely moving a bit more quickly; by comparison, on your desktop computer, there is more screen space to spread out the visuals across these different small multiple maps.
You can also use small multiples to illustrate changes over time, like this series of maps of drought in the US published by the New York Times in 2012.
Another approach is to combine small multiples with animation, which can enable you to combine comparisons between and within categories (of course, this may require too much on the part of your reader). This tile grid map from Urban’s “A Matter of Time” feature about the causes and consequences of lengthening prison sentences has animated line charts for each state. Instead of a single line chart with more than 100 lines — which would be nearly impossible to disentangle — you can see all of the states simultaneously and then make comparisons over time within each state.
As with animated visualizations, it is becoming easier and easier to create small multiple graphs. The `facet_grid`option in R allows you to quickly create a set of small multiples. Simple drop-and-drag moves in Tableau will also let you quickly create multiple charts. Creating small multiples is more of a manual process in Excel. You’ll need to create the various charts and then position them using the Align menus, though you can use VBA code to automate the process.
In closing
Animating a data visualization is not the same as layering a graph in a presentation, where you might display the graph one step or slide at a time. In an animated visualization, you are asking the reader to follow the progression of information as it moves from one frame to another. There are different ways to do this, from narrative stories to videos to a series of images in static form, but all require users to track information and hold it in their memories. There are certainly limits to what we can expect users to hold onto as they view our animations or sets of small multiples, but such animation gives us the opportunity to create more engaging, detailed content.
