Guides · · Maxwell Prehoda
11 Data Visualization Animation Examples That Make Numbers Land
Animation earns its place in a chart when change over time, or a change of view, is the story: bubbles crossing a chart as countries get richer, a column of soldiers rising off the screen, a ranking re-sorting year by year. The nine examples below, from Hans Rosling's four-minute history of the world to The Pudding's pocket measurements and Nadieh Bremer's Webby-winning bird story, each show a different reason to make data move, and each is labelled with the job it suits.
Every piece was opened at the link given, and the facts come from the creators' own pages and uploads. The last two entries are ours: chart animations built as code that you can open, feed with your own numbers and export.
1. Hans Rosling: 200 Countries, 200 Years, 4 Minutes: Best for showing a long trend in one sitting
Platform: BBC Four, The Joy of Stats, YouTube
In this four-minute segment from the BBC's The Joy of Stats, Hans Rosling runs 200 years of income and life expectancy for 200 countries as moving bubbles, narrating like a sports commentator, which is how the BBC itself describes his style. It has more than 11 million views. His 2006 TED talk, "The best stats you've ever seen", showed off the Gapminder software behind it.
The animation works because each bubble is a country you can follow and the axes never change, so all the viewer has to track is movement. Our Bubble Chart Over Time below is our own take on the same chart form, with fictional data.
Watch out for: Rosling's narration does half the work: he points, pauses and tells you where to look. An animated bubble chart with no voice or annotations is much harder to read.
The best stats you've ever seen, TED (YouTube) ↗Gapminder Tools ↗
2. The Fallen of World War II by Neil Halloran: Best for data documentaries with real emotional weight
Platform: Film and interactive, about 18 minutes
A 2015 data-driven documentary about the human cost of the war and the long decline in battle deaths since. Neil Halloran wrote, directed, coded and narrated it, with original music and sound design by Andy Dollerson, and the YouTube version has more than 15 million views. An interactive version pauses so viewers can explore the charts themselves.
In Halloran's words, the charts and visualisations "take the leading role", set to a score "to give the statistics of war their full human weight".
Watch out for: Emotional data stories need careful sourcing and honest comparisons. Publish your methods and sources alongside the film, as Halloran does, before anyone has to ask.
3. U.S. Gun Deaths by Periscopic: Best for turning a total into individual lives
Platform: Interactive web visualisation
Periscopic's visualisation counts up two numbers as it plays, people killed and "stolen years", next to an age scale from 0 to 100: each death is counted with the years of life it took, not just as one more in a total. The current page covers U.S. gun murders in 2018 and links its sources and methods.
Counting up rather than showing the final number lets the total build in the viewer's head, which is the point. It is the model for any story where the unit is a person.
Watch out for: Derived measures such as "stolen years" rest on assumptions about life expectancy. State them plainly, because readers who disagree with the framing will look for them first.
4. Flourish bar chart race template: Best for bar chart races with no code
Platform: Flourish, free plan includes it
Flourish describes a bar chart race as "an animated bar chart that turns changing rankings into a race." You upload a spreadsheet with a row per participant and a column per point in time, then customise colours, fonts, images, captions and the timeline. The free plan includes the template with unlimited projects; image and SVG export come with paid plans.
Races work when rank is the story: who overtakes whom and when. Our Bar Chart Race further down does the same in code, if you want an MP4 or an HTML scene with your own styling.
Watch out for: Races hide the actual values behind the motion and get chaotic with many close bars. Keep to ten bars, slow the timeline, and show the value at the end of each bar.
5. Women's Pockets are Inferior, The Pudding: Best for scrollytelling with a physical comparison
Platform: Web, scroll-driven, The Pudding
Jan Diehm and Amber Thomas measured the front and back pockets of 80 pairs of jeans from 20 popular US brands, then drew every pocket from the measurements. Scroll-driven animations reveal the story, and readers can click a phone, a wallet, a pen or a hand to see what fits in each pocket. The headline finding: women's front pockets are on average 48% shorter and 6.5% narrower.
Interaction turns a statistic into a test the reader runs themselves. "Only 40 percent" of women's front pockets fit one of three leading smartphones is a number; watching your own phone fail to fit is a feeling.
Watch out for: Scrollytelling is expensive to build and easy to break on mobile. Make sure the static version of each step still makes sense if the animation fails.
6. Searching for Birds by Nadieh Bremer (Visual Cinnamon): Best for illustrated data stories for brands
Platform: Web, d3.js, made for Google Trends
An interactive story for Google Trends that turns millions of searches about nearly 700 US bird species into charts shaped like eggs and nests, combined with eBird sightings and population counts. Bremer's hand-drawn birds are part of the charts, not decoration, and "subtle motion and whimsical transitions create the feeling of wandering through a designed environment." It won the People's Voice Webby for Best Data Visualization in 2026.
Motion here is atmosphere rather than spectacle: small transitions that make the reader want to keep exploring. It was built with d3.js, Python and R, with illustrations drawn in Procreate.
Watch out for: Custom illustration inside charts takes a designer who can draw and code. Without that pairing, the metaphor can get in the way of reading the numbers.
7. LinkedIn Year in Review by BUCK: Best for personal stats people will share
Platform: Built in Rive, 45-second showcase
BUCK partnered with LinkedIn on its first Year in Review, an animated recap of each member's 2025 with stats, highlights and celebration. BUCK says it was fully built in Rive and made to be shared.
Year-in-review recaps are data visualisation for an audience of one: your own numbers, animated like a reward. Building them in Rive lets the same animation run with each member's data plugged in, rather than rendering millions of videos.
Watch out for: Personal stats need edge cases designed in: the member with almost no activity, the huge outlier, the very long name. Test the animation with the worst data first.
8. GitHub Gitmos by GMUNK: Best for live data walls in offices and events
Platform: Real-time generative installation
GMUNK built immersive, real-time visualisations of GitHub's activity as live generative visuals in a dashboard for the company's headquarters. Visitors entering the lobby meet their own code on a huge screen, "everything pulsating and modulating together as one live information stream."
Ambient data does not need to be read precisely; it needs to feel alive and true. A live feed gives people a reason to look again every time they walk past.
Watch out for: Real-time installations need a data pipeline, uptime monitoring and someone on call. Budget for running it, not just designing it.
9. D3 transitions: Best for custom animated charts on the web
Platform: JavaScript, D3 by Observable, open source
D3's documentation defines a transition as "a selection-like interface for animating changes to the DOM." It interpolates colours, numbers, transforms and even strings with embedded numbers, such as paths, so a bar can grow, a line can morph to new data and an axis can rescale smoothly.
Bremer's Searching for Birds above was built with it. Use D3 when a template tool cannot do the transition you need, such as a chart that changes type mid-story.
Watch out for: D3 has a steep learning curve and leaves accessibility to you. Add text alternatives and a reduced-motion path that jumps straight to the final state.
10. Our Bar Chart Race (Studio): Best for a race video with your own styling
Platform: Motions Animation Studio, prompt is CC0 Ours
Ten fictional cities race through 125 years of census data on a charcoal stage: bars glide past each other as ranks change, the scale eases as the leader grows, a giant year counter runs from 1900 to 2025, and a callout marks one city's climb from ninth to first.
The callout is the part templates rarely do and stories need. In the Animation Studio you can describe your own data and annotations, scrub the timeline and export MP4, GIF or HTML.
Watch out for: Check every number. A code-built chart is only as accurate as the data you give it, and races make errors look dramatic.
11. Our Editorial Data Story (Studio): Best for newsroom-style animated charts for reports
Platform: Motions Animation Studio, prompt is CC0 Ours
A newspaper-grade animated chart: a serif headline that states the finding, a two-line chart that draws year by year, a shaded 2020 band, a crossover callout and a source note. The chart builds in the order a reader should take it in.
Use it for annual reports, investor updates and social posts where the chart has to carry one finding on its own. For more chart styles, see our Sankey Flow and Isotype Pictograms scenes.
Watch out for: The headline must match the data. If the chart needs a paragraph to explain, the finding is not ready.
How to choose a data animation
Animate only what changes, and only when the change is the story.
Match the motion to the question
How did this change over time? Play the years (Rosling, our bubble chart). Who overtook whom? A race (Flourish). How big is this really? Build up the count or the scale (Halloran, Periscopic). How does this compare to me? Let readers interact (The Pudding's pockets). If none of these is the question, a static chart is probably better.
Match the tool to the team
No code: Flourish for races and standard charts. Designers with some code: D3 for custom transitions. Product teams shipping personalised recaps: Rive, as BUCK did for LinkedIn. Video and social: a code-built scene you can render, like our Studio pieces, or After Effects for one-offs.
Match the pace to the reader
Viewers need time to find their place in a moving chart. Keep axes fixed, move one thing at a time, annotate the moment that matters, and hold the final state long enough to read. On the web, give a pause control and honour prefers-reduced-motion by jumping to the final frame.
Make one chart move this week
Pick one chart from your next report where time or ranking is the story. Write the finding as a headline, then animate only the part that proves it: the line drawing year by year, the bar overtaking, the count climbing. Add one annotation at the key moment.
If you want it as a video or an embeddable scene, describe it in the Studio with your data: Claude draws the chart, choreographs the build and checks every frame, and you can export MP4, GIF, HTML or React.
Make a 12-second animated line chart of [metric] from [start year] to [end year] using this data: [paste CSV]. Headline states the finding in under 10 words; the line draws left to right at a constant pace over 7 seconds with a 0.3s ease-out at the end. Fixed axes, direct labels, light gridlines, one annotation that appears when the line reaches [year], and a source line. Hold the finished chart for 3 seconds. If the viewer prefers reduced motion, show the finished chart with a 0.3s fade.
Common questions
When should a data visualization be animated?
When change over time, ranking or a change of view is the story, or when building a number up helps people feel its size. If the reader needs to compare exact values, a static chart with good labels is usually better.
What tools make animated charts?
Flourish for no-code bar chart races and story charts, D3 for custom web transitions, Rive for interactive and personalised animations, After Effects for one-off videos, and code-built scenes like our Studio for MP4 and HTML exports.
How do I make a bar chart race?
Put your data in a spreadsheet with a row per item and a column per time step, then load it into a template such as Flourish's bar chart race, or describe it in our Studio. Keep to about ten bars and slow the timeline so people can follow.
What is the most famous animated data visualization?
Hans Rosling's moving bubble charts are the best known: his BBC segment 200 Countries, 200 Years, 4 Minutes has more than 11 million views on YouTube, and his 2006 TED talk introduced the Gapminder software behind it.
Are animated charts accessible?
They can be. Provide a text summary of the finding, a static final state, a pause control and a reduced-motion version, and avoid flashing or fast colour changes. Do not rely on motion alone to carry the message.