Animation can enhance visualization in many ways, by helping viewers make connections, by showing them different perspectives, and by just drawing them in to take a closer look. Animation can be subtle and act in a supporting role, or it can be the main feature of a visualization.
It can also be polarizing, and with good reason. Used carelessly, animation can add unnecessary complexity and distraction, and turn into a gimmick. That is why it is often avoided in serious visualization – but by doing so, visualization developers and designers lose out on its potential benefits.
In this post, we share five ways that animation can improve data visualizations. For each, we describe how it can be useful for viewer understanding and experience, highlight published examples showing the approach used effectively, and point to ways to achieve similar effects with D3 or Observable Plot.
It is sometimes interesting to show different kinds of representations of the same or related data. This can be hard to communicate to the viewer, however. It can also be an opportunity to explain a more complex or unfamiliar chart type by building on a more familiar one.
One way to do all these things is to morph, or tween, between different views. Tweening is a term from animated movies, and comes from junior animators drawing the frames in between the ones drawn by senior artists. In data visualization, it usually means creating a smooth transition between different settings, shapes, or entire visualization types.
Take this example transitioning between vote counts for the winning party in each electoral district in the German state of Brandenburg. It shows votes gained by the AfD party (in blue), number of votes in each district (as circles), votes gained by the SPD party (in red), and votes lost by the Green party (in green).
While the base map stays the same for context, the way data is shown changes from a choropleth map showing data as color, to spiky shapes using length/height, to circles using area.
Another great example of tweening is this data story called, Is the love song dying? by The Pudding. It starts out with a collection of dots for specific songs, then filters to a smaller selection of serenades that are put into a beeswarm plot on a time axis. From there, it creates a stacked area chart by adding all the other Billboard Top 10 hits from that same time period. After a few more steps that add songs about heartache, pursuit, things being complicated, and more, we end up with a bump chart!
Tweening can also translate between types of maps. After elections, especially in the U.S., people often create maps that represent vote counts rather than area. These can be difficult to navigate though, because the distortion naturally shifts parts of the map around. A transition between the two can help preserve context, even when the map has been carefully designed like in this example using data from the 2024 presidential election.
These are some of the more elaborate examples of tweening, but it can also be useful for much simpler transitions, similar to the group comparisons in the previous sections. If you want to use it yourself in a D3 application, there’s the shape tweening function for this purpose.
There’s usually more than one way to sort data, and in some cases it’s useful to let your viewer see how the ordering updates over time or across different metrics.
Imagine sorting a series of lines or bars by different criteria. Animated sorting can help viewers more easily track a group or series of interest as they toggle between metrics, providing visual continuity that makes a series or group easier to follow. The visualization below from the New York Times highlights Tom Brady’s performance with smooth animation (in combination with thoughtful use of labels, stroke width, and color) as a user toggles between playoff wins by player age or year.
Racing bar charts are another way that animation can add visual interest and help users track changes in relative position over time. They consist of a sorted bar chart to which data is added over time. The changes are animated, which makes it possible to see how they change relative to each other, and in particular when they change position in the sort order.
Below is an example, created by Catherine Ramsdell and recently published in Nightingale. It shows gross earnings for Broadway shows from 2001 - 2024, played back over time.
Notice, for example, how easy (and frankly, just kind of mesmerizing) it is to track Wicked’s gross earnings once it appears in 2004. Of course, racing bar charts have earned some well-deserved criticism (even banishment) for their overuse and general lack of novel insights. But their longevity and popularity on social media, Reddit threads, and blog posts make a strong case for the value of animated data visualization simply because it can be fun to look at.
Want to build animated charts like the ones above using D3? See and fork our reusable code for racing and sortable bar charts to get started.
Maps naturally lend themselves to showing spatial data changing over time, even when they’re not being distorted. While this effectively shows motion as motion, it can work on a few different levels.
Perhaps the most straightforward way to show data on a map is to show individual locations. This animated map of the growth of Walmart over almost 50 years places Walmart locations on a map of the contiguous U.S. over the course of a few seconds. This reveals where the chain originated and how it spread, first over a small area, then across the entire country.
This scrollytelling piece about bird migration uses motion to animate the counts of birds in different regions over the course of months and seasons. This lets the viewer get a sense of the migration patterns of mallards and how they change over time. This example doesn’t show individual birds, but works on a higher level of abstraction and aggregation.
Another example of spatial data over time is this map of forecasted precipitation during Hurricane Milton. It depicts the amount of predicted rainfall across two days as a sped-up animation on a map. The result is straightforward, easy to read, and makes areas with more expected rainfall easy to identify.
Finally, navigating between locations can itself be done using animation. The D3 world tour jumps between locations on a 3D globe and animates each hop. This makes it easy to always stay oriented about where each country is located and how far apart they are.
Sometimes, motion itself can be a useful visual cue that helps viewers get a better sense of the uncertainty in data. The most (in)famous use is in election forecasts and in particular the New York Times’ election needle. It shows the likely outcome of an election along a scale and encodes the uncertainty of the forecast in how smooth or jittery its motion is.
Another example of the same visual cue and use for elections, though used slightly differently, is this visualization of the simulated outcomes of an election in Germany. The points for each party move between the predicted outcomes, which creates more jitter where the range is larger and less where it is smaller.
Motion isn’t only used to show uncertainty, however, it also helps viewers trace the paths of data points through a complex shape. In an unusual diagram, this piece in the New York Times shows the transition of Black and white boys from their parents’ households to their own as they grew up and whether they moved up or down in income level.
The way they show this is an unusual animated Sankey diagram, which draws a dot to represent 100 boys in the study and moves them from their parents’ income group to their own as adults. Race is encoded in the dots’ color, which allows viewers to directly see how the different points end up following different trajectories.
Perhaps the most famous use of an animated chart is Hans Rosling’s TED talk from 2006. He used a custom program called gapminder that created a chart that had not been in wide use until then: an animated scatterplot. It showed GDP per capita on the horizontal axis, and the percentage of child survival on the vertical axis (as a measure of health). Each country was represented by a bubble, sized by its population.
What drew people’s interest was his use of animation to show how the world had evolved from 1960 to 2003.
Rosling’s talk became iconic and made a large impression on people back in the early 2000s because of the novelty of the animated scatterplot. Today, it is easy to create animated scatterplots in most tools – including in D3 (see for example Mike Bostock’s The Wealth & Health of Nations).
Some of the other examples we showcase above also fall into this category, such as the Hurricane Milton precipitation map.
Motion is a powerful tool for data visualization. It can help people understand, prevent them from getting lost, and even encode data itself. It is best used sparingly, but when it is used with care, it can be incredibly powerful.
Want to add animation to your toolkit? Here are some places to start: