data2motion-lite

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.

The only rules

• Never write the HTML / CSS / SVG / animation yourself. Produce a spec and run build.py — nothing else. The script is the guarantee of the look and the smoothness; hand-writing is the single way to break either.
• If build.py errors, fix the spec (the message says what's wrong). Do not work around it by hand-authoring a file.
• Put the real source and units in the spec (honesty).
• One spec → one chart. Want another chart? Write another spec and build it.

That's the whole skill. There is deliberately no chart-selection theory, no "one chart one story" rule, and no motion principles — the script already encodes the house style and the smooth easing, so you don't have to reason about any of it. Just give it correct data and a chart name.

Reference

• references/spec.md — the JSON spec format + the data shape each chart type needs. This is the only thing you need to read.
• showcase/ — two house-template galleries showing the target look (open in a browser, not required): Essential (showcase/chart-motion-atlas.html — the chart × motion catalog, source of the engine your builds use) and the FT Style Template (showcase/packages/ft.html — the FT poster style your "style":"ft" builds reproduce, shown across the FT chart vocabulary). build.py already reproduces these styles automatically; the galleries are just so you (or the reader) can see what "on-brand" means. You still pick the chart freely — these are a reference, not a rulebook.