data2motion-lite

Turn data into a smooth, on-brand animated chart in one self-contained HTML file.

This is the lite variant. It assumes you are a text model that cannot see images, so it puts all of the design and animation into a deterministic script. You never write HTML, CSS, SVG, or animation code. You do four things — get the data, pick a chart, write a spec, run the build — and the script makes the result look like the template every single time. Your output cannot drift from the house style or lose its smoothness, because you don't author the pixels: the script does.

Use it in 4 steps

1. Get the data. From a table, CSV, a paragraph, or a single number — pull out the labels and values. Group them into rows (or series / points, depending on the chart you'll pick).
2. Pick a chart — your call, no rules. Choose whatever form shows the data best. The supported forms (and the data each needs) are in references/spec.md: kpi · bar · column · diverging · line · multiline · area · stacked · scatter · lollipop · dumbbell. If the form you imagined isn't on that list, pick the nearest one that is — never hand-build a chart type. The script colours every mark uniformly — no single mark is singled out: single-series charts draw all marks in one house colour, multi-series give each series a distinct colour from a categorical palette, and diverging colours by sign. (Optional per-row role for honest up/down semantic colour is in references/spec.md.)
3. Write the spec. A small JSON file. Copy the shape for your chosen chart from references/spec.md and fill in the real numbers, plus title, takeaway, source, and unit.
4. Build it — this is the whole deliverable:

   python3 scripts/build.py spec.json chart_motion.html
   

   You get one dependency-free HTML: dark-console surface, Barlow (loaded), the three-colour system, a smooth eased reveal, reduced-motion-safe, with a replay · speed · dark/light · colour-scheme control bar. The build prints OK (or an error telling you what to fix in the spec). It's done.