Bar chart race
- Size
- 1920×1080
- Frame rate
- 30 fps
- Length
- 8s
Six bars overtaking each other, gliding through the swaps instead of teleporting past them.
Make your own bar chart race
Races a bar chart to its final numbers, with the bars overtaking each other and the labels keeping up. Say a sentence like the one below and your agent writes you a different one — free, in your browser.
Say this to your agent
>An animated bar chart racing to last quarter's numbers.
Or ask for a different one
Not settings — each one builds something else.
>A bar chart race over twelve months instead of four quarters.
>Race the bars, but keep ours highlighted the whole way through.
>A horizontal bar chart that fills once, no racing — just the final numbers arriving in order.
What it worked out on its own
The hard part is the ORDER, not the bars. Sorting the rows each frame makes them teleport past each other on the frame their values cross.
Rank is computed continuously — how many bars are above me, counted with a smoothstep instead of a comparison — so a pair glides through the swap while their values are close.
No state and no per-frame sorting: position is a pure function of the frame, which is the only kind of animation a random-access renderer can scrub.
A race needs a WHEN or it is only growth, so the quarter reads out huge behind the bars, stepped to whole quarters.
