Timeline
Drag or touch to jump to any point
Build a bar chart race video from time series JSON, entirely in your browser
It fits data whose ranking changes between points in time, such as yearly population, revenue or traffic. Showing the moment one entry overtakes another is easier to follow than a row of separate charts.
There are three ways to load data: paste JSON directly, fetch one of the public data samples, or load the offline example. Whichever you use, the JSON box becomes the source of truth afterwards, and you can save it to reuse next time.
"Set the length by" chooses which end you fix. The value you did not fix is calculated and written into its input, so the current total and per-period seconds are always visible.
| Mode | You enter | Solved for you | Good for |
|---|---|---|---|
| Seconds per period | Base seconds per period | Total video seconds | Keeping each year read at the same pace |
| Total video seconds | Total video seconds | Base seconds per period | A fixed running time: matching BGM, fitting a platform limit |
The formula is "total = intervals x base seconds per period / playback speed". There is one fewer interval than there are periods (six periods from 2020 to 2025 give five intervals), because the first period is the starting state and only the moves out of it take time.
Fixing the total means swapping in data with a different number of periods does not change the running time — the per-period seconds tightens or loosens instead. Fixing the per-period seconds does the opposite: more periods make a longer video.
Asking for a total so short that a period gets under 0.15s makes the period changes almost invisible, and a note says so. Anything below 0.5s cannot work at all, so it is raised to 0.5s and that is shown too.
Recording produces a WebM file. Recording uses the same length and pace as the preview, so once the preview feels right the exported video matches it.
| Resolution | Ratio | Typical use |
|---|---|---|
| 1280x720 | 16:9 | Quick tests. Smaller file |
| 1920x1080 | 16:9 | Standard landscape video |
| 1080x1920 | 9:16 | Short-form and vertical social posts |
| 1080x1080 | 1:1 | Square post slots |
"Fetch public data" imports indicators from the World Bank Indicators API. This is the only action that contacts an external service. Fetched values are expanded into the JSON box immediately, so you can keep working offline afterwards. The available indicators are GDP, population, GDP per capita and internet usage.
The meta.valueDivisor field divides numbers for display only, for example to show GDP in trillions of US dollars. Bar lengths are still compared using the original values, so changing the display unit never changes the ranking.
If you point entity.image at an external image URL, the CORS settings of that image host may prevent recording. If recording fails, try removing the image reference.
It is a bar chart where the bar lengths and their ranking change over time. It suits data whose ranking moves year by year, such as population or GDP, and is often used for video and short-form clips.
A JSON format specific to this tool. The page includes a specification and a minimal example you can copy as is. Order the timeline from the oldest point to the newest. Values between two points are interpolated automatically.
WebM. You can choose 1280x720, 1920x1080, 1080x1920 or 1080x1080. The 1080x1920 option is the vertical size used for short-form video.
Yes. Set "Set the length by" to "Total video seconds" and type the seconds. The base seconds per period is solved backwards for you. In that mode, swapping in data with a different number of periods leaves the running time at the value you asked for.
What takes time is the moves between periods, not the periods themselves. Six periods give five moves. The first period is the starting state and no travel time is spent reaching it.
No. Parsing, rendering and recording all happen in your browser. The only exception is the "fetch public data" button, which calls the World Bank public API to import indicator data. If you do not use it, no external request is made.