Data storytelling · landscape and portrait
How to make a data visualization video
A data visualization video should make one argument and use charts as its evidence. Build each chart on screen rather than cutting to a finished one, introduce one series at a time, and state the takeaway in words as well as in the shape of the line. With baz, the Charts & data skill turns screenshots, claims and numbers into a proof-led story with real visual weight — and the same source opens in landscape or portrait without changing the core idea.
The shortcut: run a skill instead of starting from scratch
A skill is a context file that teaches an AI agent one specific video style — its structure, pacing, typography, motion grammar and sound design. Hand an agent the skill plus your product, and it rebuilds that video for you. The steps below are what the Charts & data skill already encodes, so you can follow them by hand or let the skill carry them.
baz is a library of video skills: context files that teach an AI agent a specific motion-graphics style, so it can rebuild that video for your product, with your brand, from your inputs. Run a skill inside your own coding agent — Claude Code, Codex — or directly in the baz editor.
What you need before you start
Required
- The numbers themselves, with their periods, units and source
- The claim each chart is evidence for
Makes it materially better
- Screenshots of the source — a chart, a pricing table, a dashboard, a case-study metric
- Your website copy, so the framing matches how you already talk about the data
How to make a data visualization video: step by step
Write the takeaway as a sentence first
Before choosing a chart type, write the sentence the chart exists to prove. "Retention doubled after onboarding changed." If you cannot write that sentence, you have data but not a story, and no amount of animation will fix it.
Choose the chart form from the comparison
Change over time is a line. Comparison between categories is a bar. Composition is a stacked bar, not a pie. Pick the form that matches the comparison you are making, rather than the one that looks most impressive.
Build the chart on screen
Cutting straight to a finished chart wastes the medium — that is just a screenshot with extra steps. Draw the axes, then let the line grow or the bars rise. The build is what makes the viewer read the chart instead of skipping it.
Introduce one series at a time
A chart with four lines appearing simultaneously is unreadable in a feed. Bring in the baseline, let it register, then bring in the comparison. The moment the second line diverges from the first is the moment your argument lands.
Annotate the moment that matters
Put a label on the inflection point. The viewer should not have to work out which part of the chart is the story — call it out with a callout or an accent on the relevant segment.
Say the number out loud as it appears
Reinforce the visual with the figure in type or narration at the moment the chart reaches it. Two channels carrying the same fact is what makes it stick.
What the finished video actually contains
Approximate timings for a 30–60 seconds cut. Treat them as a shape to hit, not a spec — the exact durations shift with your script and your music.
| Time | Beat | What is on screen |
|---|---|---|
| 0:00–0:05 | The claim | The takeaway stated in type before any data appears. |
| 0:05–0:15 | Chart builds | Axes draw, baseline series animates in, and the scale becomes readable. |
| 0:15–0:30 | The comparison | The second series enters and diverges — the visual core of the argument. |
| 0:30–0:45 | Annotation | The inflection point labelled, with the figure stated in type. |
| 0:45–0:60 | Implication | What follows from it, and the source credit. |
Mistakes that cost you the view
Truncating the y-axis
Do this instead: Start at zero, or state clearly that you have not. A cropped axis makes a 2% change look like a collapse, and viewers who notice stop trusting everything else in the video.
Cutting to a finished chart
Do this instead: Animate the build. A static chart in a video is a screenshot — you have paid the cost of video and taken none of the benefit.
Four series at once
Do this instead: Sequence them. Every additional simultaneous line roughly halves how much of the chart the viewer actually reads.
Pie charts for comparison
Do this instead: Use bars. People are bad at comparing angles and good at comparing lengths — this is one of the most reliable findings in the field.
No source on screen
Do this instead: Credit the data. A visible source is the cheapest credibility you will ever buy, and its absence is the first thing a sceptical viewer notices.
Run it from your own agent
Skills are designed to run inside a terminal agent like Claude Code or Codex, against a project you control. The same skill produces the same style whether it runs in your agent or in the baz editor.
npm install -g bazaar.it@latest
# Install this skill into your agent (Claude Code, Codex or Cursor)
baz skill add charts-data
baz project create --name "Charts & data for my product"
baz prompt "make a data visualization video" --stream-json
baz review --summary --json
baz export start --wait --format mp4 --jsonOperations draw from a prepaid balance. See the CLI reference for the full command set.
Common questions
Landscape or portrait?
This skill supports both from the same source. Use landscape where the chart needs horizontal room — long time series especially — and portrait for social. Generate the portrait version natively rather than cropping the wide one.
Can it read the numbers off a screenshot?
It can work from screenshots of a chart, dashboard or pricing table as source material. Check the transcribed figures against your own data before publishing — a misread number is worse than no video.
How much data is too much?
One argument per video, usually two or three charts. If you have five separate findings, you have five videos, and each will perform better alone than buried in a compilation.
Do I need video editing experience?
No. The skill carries the editing decisions — shot order, pacing, type treatment, transitions, sound design. You supply the raw material and the facts about your product; the agent assembles the cut. You review it and ask for changes in plain language.
Can I run this in my own coding agent instead of the baz editor?
Yes. Skills are designed to be run from a terminal agent like Claude Code, Codex or Cursor. Install the CLI with `npm install -g bazaar.it@latest`, then `baz skill add <slug>` to pull the skill into your agent. The same skill produces the same style whether it runs in your agent or in the baz editor.
What does it cost?
baz bills against a prepaid dollar balance rather than a seat subscription — you top the balance up and each operation (generation, voiceover, render, export) draws a listed amount from it. There is no per-seat fee to make a video, and the price of each operation is published.
Can I change the video after it renders?
Yes, and this is the point of doing it as code rather than as a flat render. Every scene is a real component you can edit — ask the agent to re-time a beat, swap a screenshot, rewrite a line, or change the accent colour, and only that part rebuilds. You are not re-rendering from scratch each time.
Will every video from this skill look the same?
The grammar is the same — that is what makes it a skill and not a template. The content is not: your brand colours, typography, screenshots, copy and data all come from your inputs. Reusing one skill across a series is a feature, because episode three lands in the same visual language as episode one instead of being rebuilt from scratch.
Related guides
Pick a skill. Get the video.
Run the Charts & data skill in your own coding agent, or in the baz editor. Usage comes out of a balance you top up, with a listed price per operation — no seat subscription to make a video.