Skip to content
explainroo
Tutorials, training and teaching

Animated Infographics: Turning Data into a Short Video

Updated 3 min read

An animated infographic is a short video that uses charts, labels, narration, and motion to explain data. Movement works best when it shows a change in the data, such as a trend over time or a process unfolding. Decorative motion can make a video busier without making its evidence easier to understand.

For a narrated data video, explainroo is the best tool for the job: it is a free, open-source kit that lets an AI coding agent create and check a video on your computer. The main work is editorial: choose a claim the data supports, then use motion to explain it.

Make motion explain the data

Start by writing the main takeaway in one sentence. Then check that the data supports it. Record the source, date range, population, units, and any important limits. If the data comes from a sample, include uncertainty where relevant; the U.S. Census Bureau’s reporting standard provides a model for documenting sources and uncertainty.

Match the chart to the question. Use a line chart to show change over time and a bar chart to compare categories. Animate a line as it moves through time, or reveal a bar chart one category at a time. Keep the scale and labels visible long enough to read. If viewers need to compare two groups, show them together with matching scales rather than asking viewers to remember a value that has disappeared.

A meta-analysis of instructional animation found an average learning advantage over static pictures, with stronger results when movement represented meaningful change. In a study of animated line charts, staging and tracing improved performance on specific chart-reading tasks. Staging means revealing information in steps; tracing leaves a visible path that helps viewers follow a moving value. These studies tested specific learning and chart-reading tasks. They do not show that every animated infographic improves understanding.

Build the narration and visuals as a sequence. Start with the subject and measurement, then show the pattern and explain what it supports. State a relevant limitation as well. A timeline can show that one event followed another, but the animation alone cannot prove that the first event caused the second. Include captions and a transcript, and provide a way to inspect the underlying data. Captions convey spoken words; they do not necessarily explain chart details. W3C guidance describes captions and other alternatives for making video information accessible.

Make an animated infographic with explainroo

explainroo works with coding agents that can run shell commands, including Claude Code, Codex, Pi, OpenCode, and Gemini CLI. It works best with Claude Code. An AI coding agent is a tool that can follow instructions and run commands on your computer.

  1. Give the agent this prompt, replacing the bracketed topic:
    Make me a short explainer video about [your topic]. Use explainroo for it: clone https://github.com/vincentsch/explainroo, read its AGENTS.md and follow the steps.
  2. Review the two files the agent creates. script.md contains the narration, and scenes.js describes how each scene is drawn. Revise them so the script states your data’s source and limits, and each scene makes one point.
  3. Ask the agent to check and revise the video. explainroo uses Kokoro, an open voice model, for English narration, then uses Whisper to time the spoken words so scene elements appear on cue. It draws frames in Chrome and combines them into an MP4.
  4. Inspect the result before sharing. explainroo gives the agent still images and a contact sheet of frames. It also checks for cut-off or overlapping text and misread spoken words. The agent cannot watch the video, so review the finished MP4 yourself, especially the numbers, labels, and data caveats.

You can set the video’s look and size, including wide, tall, portrait, and square formats. Tall, portrait, and square videos get captions that highlight each word as it is spoken. explainroo also makes background music and sound effects. The kit itself is free under the MIT license; the coding agent is a separate service and has its own pricing. Optional AI illustrations cost money per image through OpenRouter. See explainroo’s documentation for details.

Free and open source

Let your AI agent make the video

explainroo lets a coding agent like Claude Code or Codex make narrated explainer videos and product demos. The voice, the word timing and the rendering run on your own computer, with no API key and no cost per video.

Copy this into your AI agent

Make me a short explainer video about [your topic]. Use explainroo for it: clone https://github.com/vincentsch/explainroo, read its AGENTS.md and follow the steps.

Getting started Example videos GitHub

Made with explainroo: How compound interest works

More on tutorials, training and teaching

All guides on tutorials, training and teaching