Data story
Make a film where one number or one chart is the claim, with the data in the page and the source on screen.
At the end of this page you have a filmA film is the mp4 file that the renderer makes from one page. that proves one claim with numbers. The numbers on screen equal the numbers in your data.
You need a data set with a source. The data is yours to bring. vawe does not read a data file by itself (see Batch from data).
What this film needs
A data story has one claim and one figure that proves it. The claim comes first, and every beat confirms it. Recipe 12 in prompts/moves/RECIPES.md is the proof film of 20 s: a number rolls up, a chart builds to the same figure, and a wall of names says who counts it.
Choose the template by who gains. If the film explains the data and nothing is sold, take story-explainer.md. If a real product is behind the data and the film markets it, take brand-launch-from-url.md (guides/ROUTING.md, ambiguities). Use the same chain of moves in both cases.
Two moves carry most of the film. count-up rolls each digit on a wheel, so digits never change width. chart-build draws the gridlines, raises all the bars in grey, then turns the newest bar to the accent and pops its value tag. Only one bar and one number are bright, so the chart says one thing.
The spectacleThe spectacle is the second of the one big moment in a film, set by <meta name="spectacle" content="6.2">. is the last bar turning accent, after about 1.35 s of silence. Place <meta name="spectacle"> on that second.
Steps
Write the facts down first
List each number with its source and the line it comes from. Mark what you could not verify. Use one unit and one data set across the number, the chart and the sparkline. The sparkline ends where the last bar ends.
Write the brief
bin/vawe new renders-proof --from prompts/story-explainer.md --length 20Put the numbers in the Words and Objects tables. Read Write the brief.
Keep the data as a literal in the page
Every tunable number is a literal in the page (AGENTS.md). Write the data as a [[f, v]] table or an array, and drive the count with kf(t, table, ease) from core/motion/springs.js. The count is then a pure function of time. Count to the sourced value, not to a rounded one.
Draft and check each figure
bin/vawe dev films/renders-proof/page.html
bin/vawe frames films/renders-proof/page.htmlRead the final frame of each beat and compare every figure with the facts list.
Pitfalls from the taste digest
- Every claim is backed (
claim-backed). “26 looks” needs 26 looks on screen. Cut a number you cannot show. - One accent (
accent-share). Put the accent on the one thing the beat is about: the number, then the last bar, then the line, then the button. In recipe 12 the chart’s tag is white and the chip drops its accent. - Read lines (
readable-hold). A chart holds about 3.2 s, because axis labels and a title are words that read at words / 3 s. - A hold keeps one part alive (
live-hold). Recipe 12 drifts the card, so the chart hold is never a still. - Text breathing (
text-breathing). Give one beat to the chart alone, with no words.
An invented wall of logos uses invented marks at one visual weight, never real brands. Exit the wall together with its line, and exit the count-up container, not its wheels.
Common mistakes
| What you see | Why | What to do |
|---|---|---|
| The number and the chart disagree | Two data sets in one page | Read both from one literal |
| The final number is rounded | The count ends on a display value | Count to the sourced value |
| The chart reads as decoration | No claim in the beat | Name the claim in the caption |