Data Visualization Videos

Examples

Sorting Algorithms
4000 Weeks
Flappy Bird

9 sorting algorithms on 100 bars — bubble sort through merge sort. Each comparison plays a pitched tone. 76 seconds with synthesized audio.

The Problem

Data tells a story, but spreadsheets and static charts don’t. Animated visualizations are compelling — but building them as shareable video (not just an interactive webpage) usually means screen recording with all its artifacts.

How It Works

Data source → Generate visualization HTML → Animate with GSAP → Render to MP4

Hyperframes renders anything a browser can display. D3 charts, Canvas graphics, SVG diagrams, CSS animations — they all become pixel-perfect video frames.

Build It

Prepare your data

Your data can come from anywhere — a CSV, an API, a database, or generated programmatically.

# Example: pull GitHub stats
import requests

repos = requests.get(
    "https://api.github.com/users/your-username/repos",
    headers={"Authorization": f"token {GITHUB_TOKEN}"}
).json()

stats = {
    "total_repos": len(repos),
    "languages": {},
    "total_stars": sum(r["stargazers_count"] for r in repos),
}
for r in repos:
    lang = r.get("language") or "Other"
    stats["languages"][lang] = stats["languages"].get(lang, 0) + 1

Describe the visualization to your AI agent

I have GitHub data for a developer: 13 repos, 472 commits,
top languages are TypeScript (5), Dart (3), JavaScript (1).

Create a "GitHub Wrapped" style video — vertical 9:16, 45 seconds.
Show the stats one by one with animated counters, a bar chart of
languages that grows, and end with a highlight reel of project names.
Use a dark theme with green (#00ff88) accents like GitHub's contribution graph.

The AI agent writes the HTML composition with the data baked into the animation.

Add generated audio (optional)

For data visualizations, synthesized audio often works better than voiceover. You can generate tones programmatically:

import wave, struct, math

# Generate pitched tones for a sorting visualizer
sample_rate = 44100
samples = []
for value in data_points:
    freq = 200 + (value / max_value) * 1000  # pitch = data value
    for i in range(int(0.03 * sample_rate)):  # 30ms per tone
        env = 1.0 - (i / (0.03 * sample_rate)) * 0.7
        s = env * 0.25 * math.sin(2 * math.pi * freq * i / sample_rate)
        samples.append(s)

with wave.open("data-sound.wav", "w") as wf:
    wf.setnchannels(1)
    wf.setsampwidth(2)
    wf.setframerate(sample_rate)
    for s in samples:
        wf.writeframes(struct.pack("<h", int(max(-1, min(1, s)) * 32767)))

Then reference it in the composition:

<audio id="data-sfx" data-start="0" data-track-index="5"
       data-volume="0.8" src="data-sound.wav"></audio>

Preview and render

npx hyperframes dev    # preview at localhost:3002
npx hyperframes render # export to MP4

Visualization Ideas

Type	What it looks like	Complexity
Animated bar chart	Bars growing, sorting, racing	Simple — CSS + GSAP
Counter/ticker	Numbers rolling up from 0 to target	Simple — GSAP snap
Line chart drawing	SVG polyline with stroke-dashoffset animation	Medium — SVG + GSAP
Dashboard	Multiple panels updating simultaneously	Medium — layout + timing
Algorithm visualization	Sorting bars, pathfinding grids, tree traversals	Complex — pre-compute states, animate
Physics simulation	Bouncing balls, pendulum waves, particle systems	Complex — math-driven positions

Automate It

The real power: data in, video out as a pipeline.

import subprocess

def generate_data_video(data, template_dir, output_path):
    """Generate a video from data using Hyperframes."""

    # 1. Write data into the composition
    with open(f"{template_dir}/data.json", "w") as f:
        json.dump(data, f)

    # 2. Render
    subprocess.run([
        "npx", "hyperframes", "render",
        "--output", output_path,
        "--quality", "standard"
    ], cwd=template_dir)

    return output_path

# Generate weekly report videos from database
for week in get_weekly_metrics():
    generate_data_video(
        data=week,
        template_dir="templates/weekly-report",
        output_path=f"renders/report-{week['date']}.mp4"
    )

Combine with Docs to Video for a fully automated pipeline: data changes → Hyperframes renders visualization → Video Agent adds avatar narration.

CookBook

Examples

The Problem

How It Works

Build It

Visualization Ideas

Automate It

Next Steps

Motion Graphics

Automated Pipeline

​Examples

​The Problem

​How It Works

​Build It

​Visualization Ideas

​Automate It

​Next Steps

Motion Graphics

Automated Pipeline

Examples

The Problem

How It Works

Build It

Visualization Ideas

Automate It

Next Steps