PLOTBEAT TEMPLATE · RANKINGS OVER TIME
Make a
bar chart race.
Turn a dated series of values into an animated leaderboard. Start with a CSV, choose a visual style, and build an editable video with your AI agent and HyperFrames.
Download sample CSV ↓01 · CHOOSE THE RIGHT CHART
Show who moves ahead.
A bar chart race works when the question is about changing rank: product sales by month, category totals, or regional growth. Each bar represents a category; time moves forward while its value and position change.
Use a line chart when exact trajectories matter more than rank. Use a stacked-area chart when you want to explain how categories contribute to a total. A changing leaderboard can hide small differences, so keep category names and units clear.
02 · PREPARE YOUR DATA
Three columns. One row per observation.
The downloadable CSV is the demonstration dataset used by the repository’s bar-race example. It contains fictional named series with values over time. Replace those rows with your own sourced observations.
| Column | Example | What it means |
|---|---|---|
| date | 2022-01-01 | The observation date. Use a consistent date format. |
| series | Northstar | The category name. Keep the spelling stable across dates. |
| value | 44.7 | A numeric value in the same unit for every category. |
Before animating, check missing periods, duplicate date/category rows, and mixed units. Ask the agent to explain how it handles gaps; do not silently turn missing observations into zero. Keep the source and retrieval date with real datasets.
Download the complete sample CSV →03 · SET UP YOUR AGENT
Install HyperFrames, then Plotbeat.
You need a local terminal with Node.js and npm/npx, plus an agent that supports skills, such as Codex or Claude Code. HyperFrames provides the preview, validation, and rendering workflow. Plotbeat provides the data preparation and chart templates.
npx skills add heygen-com/hyperframes --all
npx skills add DbgKinggg/plotbeat --skill plotbeatRun both commands, choose your agent in the installer, and reload its skill discovery if needed. Then attach the CSV in that agent. Video generation happens in your local project; this page is a guide and preview.
04 · MAKE IT YOURS
Give the agent a clear brief.
Use $plotbeat with the attached bar-chart-race.csv to create a bar-race video. Map date to time, series to category, and value to bar length. Use absolute values, Paper Cut style, and quick pacing. Label the source as Plotbeat demonstration dataset and the unit as index. Show me the editable HyperFrames preview, validate the composition, and let me approve it before rendering an MP4.
The template supports absolute values and share-of-total views. Decide which question your chart answers before choosing a mode. Review labels, order, units, and the final frame in HyperFrames before exporting.
For a custom look, use the live chart style builder and attach its style JSON to your request. The generated composition stays editable, so you can revise the palette, pacing, and story without changing the source dataset.
KEEP EXPLORING
A starting point you can inspect.
Browse the bar-race example and composition source, read the installation guide, or explore all eight Plotbeat templates. For renderer setup and export options, see the HyperFrames documentation.