Creating Animated Data Stories | Data in Motion

Creating Animated Data Stories | Data in Motion

July 4, 2025

Not long ago I was tinkering with AI/BI Tools: ChartBrew, ChartDB, DB2Rest and Streamlit x PyGWalker

From there, I could not resist to create this project:

Sometime ago, I was exploring some options to create video as a code

I tried something on RemotionJS on this repo

As always, there is a fireship cool video on Remotion:

But…it was not enough for me to get started with someting cool.

Maybe now this can be a thing, since we have MCP + Windsurf or GeminiCLI Configured with Git-MCP

{
  "mcpServers": {
    "gitmcp": {
      "serverUrl": "https://gitmcp.io/remotion-dev/remotion"
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}

I created this repo for putting real life videos together, as covered on these posts

Animations with Python

Python is a versatile programming language that can be used for a wide range of tasks, including creating animations.

And on the mechanical engineering post, we saw how people are doing amazing Lorentz attractor animations.

Matplotlib Styled Charts

Before animating: be aware that you can create styled plots with matplotlib.

They wont be interactive, but they can look pretty cool!

Vibe Coding Proper Styled Matplotlib Charts 📌

If you are using Windsurf or similar tools, make sure to ask them to bring:

  1. Brand Colors
  2. Adding watermark / url or not
  3. Proper modules for: pull data, store data, transform data + style plots (you can have one for price, another for dividend oriented…)
  4. Output format size (resolution)

You can create a script with modes, in such a way that given few parameters, it will generate for you whatever domain specific chart you need.

But now…

Is it even possible to create a full .mp4 with code?

Matplotlib Animations

Apparently, it is: and not necesarily with plotly, as I tought

And again, people are doing fantastic stuff with matplotlib:

Even very interesting video use cases with them!

From Data to Streamlit to Animation to Video, is a topic that I tinkered during the AIssistant, here.

Now, the concept I want to do is very simple:

  1. Generate Code & Data driven animations
  2. Use Python to pull the data (and save the data for the records)
  3. Use matplotlib for the final .mp4 animations
  4. Have as parameter the time of the animation and its output resolution

Something very similar, but with mechanisms, can be done as well!

But same as it can be done for mechanism, it can be done for time series data, like this SP500 returns which is powered by this script

Then, your imagination is the limit, as you can do scripts to compare few stocks returns and placing some OpenAI APi TTS audio that describes them:

  1. Create your AI-audio and matplotlib generated video (of 10s duration):
uv run ./OpenAI-Audio/openai-tts.py --env=./.env
ffmpeg -f s16le -ar 24000 -ac 1 -i audio_reply.pcm audio_reply.mp3 #transform it to mp3

uv run animate_sequential_compare_price_evolution_flex_custom.py MC.PA RMS.PA 2010-01-01 10 short
#ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=s=x:p=0 animated_yt_short.mp4

Creating a “full circle” or cyclical narrative can be incredibly impactful for youtube shorts (1080x1920)

https://www.youtube.com/watch?v=XrQliJX-e8A https://www.youtube.com/watch?v=GrVIJ6Xb_I0

The trick is to reference the beginning in the end, but with the added context or impact of what was just revealed in the middle.

  1. Combine them and give 5 seconds time for the video to be paused and audio to keep going:
ffmpeg -y -i luxury-ytshort.mp4 -i audio_reply.mp3   -filter_complex "[0:v]tpad=stop_mode=clone:stop_duration=5[v_extended]"   -map "[v_extended]" -map 1:a:0   -c:v libx264 -preset fast -crf 23 -c:a aac   ./luxury-ytshort_extended_frozen_audio_added.mp4
ℹ️
You can bring those, even snapshots or gif to other social media platforms

Animations x SSG

This year I also was playing around with Astro components.

And withing the datanova theme, I found out that they are doing a really cool animation (which is a SVG!)

npm install
#npm run dev
npm run dev -- --host 0.0.0.0 --port 4321 #http://192.168.1.11:4321/

Conclusions

We’ve learnt how to do cool Python Animations.

Including cool .gif that you can easily share.

But, as you can imagine, there are more ways to generate animations as a code

  1. MotionCanvas
  2. Animotion
  3. RemotionJS
  4. The 3B1B way…

Ive been having the need to do some git recap:

You can organize your repository in a way that from one source code, you have different kind of outputs.

Say you have your animations for a website/twitter:

git branch libreportfolio 285484eafeae5c79436cef73678df8ae5153bc52
git checkout libreportfolio

Or say you have similar data collection, but different outputs for some youtube channel:

git branch unfoldingdata 285484eafeae5c79436cef73678df8ae5153bc52
git checkout unfoldingdata
git branch -a

Embedded Analytics

Ipyvizzu

Probably oriented more if you are building PoCs at work.

Apache v2 | Build, present and share animated data stories in Jupyter Notebook and similar environments.


FAQ

Social Media Automation

If you are able to create mp4 animations, you can also create images or animated .gif from them.

With those, you can go to different social media platforms and share the content you have just created.

Social Media Management Apps

Social Media can be simplified:

Forocoches3kbmw

  1. Postiz-App - https://github.com/gitroomhq/postiz-app

📨 The ultimate social media scheduling tool, with a bunch of AI 🤖 and Apache 2.0!

I got working PostIZ recently, together with Traefik, both as containers and locally accesible: https://postiz.jalcocertech.com/launches

Do the setup for the platforms you need: https://docs.postiz.com/providers/youtube

ℹ️
PostIZ also has MCP: Connect your MCP client to Postiz to schedule your posts faster!

You will get something like:

https://postiz.jalcocertech.com/api/mcp/some_id_here/sse
  1. Zapier

N8N with ollama video

Your friendliest open source AI automation tool ✨ Workflow automation tool 200+ integration / Enterprise automation tool / Zapier Alternative

Cool Data Driven Videos

Fractal stuff:

Data is beautiful, indeed:

How could I not mention the awsome 3B1B channel and its OSS animation engine, that I recommended here

Math Animation engine for explanatory math videos. The ones 3Blue1Brown Channel created!

https://youtu.be/xpvWHrgVZUg?si=a0wOyHHtd_KD2GtA

https://youtu.be/u2C3NMDrmCw?si=W2dMEVlUdvw2me8X

https://youtu.be/DZQ5-INW32Y?si=a1YPGn77-8vH-F8H

https://youtu.be/5xsUOmi-MxY?si=uK7sNHScVORAWf6R

https://youtu.be/5d_WxPEpr3Q?si=kMubQx542aCQlHlT

If you are into physics and mechanics…