Making Motion Data Blueprints
A data slot, Interartive.data(), a tier, and a sample that shows what it can do.
A Motion Data Blueprint is an experience (a .zip with index.html) that reads rows of data from Interartive.
1. Declare a data slot and what it is (interartive.json)
{ "slots": [ { "id": "data", "type": "data", "label": "Your data",
"fields": ["date", "value", "series"], "hint": "One row per date…" } ],
"blueprint": { "tier": "kinetic", "data": ["time", "comparison"], "live": true } }tier is precision, kinetic or bespoke; data lists the kinds of data it is made for; live says it updates while people watch.
2. Read the rows
Interartive.data('data', function (rows, meta) {
if (!rows) return showSample(); // no data given: show your sample
draw(rows, meta.fields); // called again when live data changes
});Rows are objects, one per row; numbers arrive as numbers. Never fetch data yourself: blueprints run sealed, and Interartive reads data addresses for you (keeping people's keys safe).
3. Design for insight
- Find columns by likely names and by type, so people don't have to rename theirs.
- Show your sample until data arrives, and label it as a sample.
- Let people read exact values (a tooltip, a Show the numbers table).
- Animate change, not decoration: when live rows arrive, move to the new values.
- Respect reduced motion; work with touch, mouse and keys.
4. Choose how people use it
Licensed (you receive 80% of every license) or free with any Motion Data plan (for exposure). Interartive reviews every blueprint before it is listed.