explorable library · recipe

Build a dashboard

A dashboard is many components wired into one coordinated model: a single hero lever drives every panel at once. Here is the recipe, and a prompt you can hand straight to an AI.

Anatomy

  1. Find the spine. Pick a single hero lever — a rate, a budget, a shock — that propagates through everything else.
  2. Write one compute(state). Derive all outputs from the levers, so every panel reads from it and dragging any handle re-runs compute() and updates every panel at once.
  3. Make each panel a component. Every one obeys the component rules — marks-are-handles, reasons in prose, auto-scale, no flash, honest.
  4. Cite your source prominently. For any data-derived dashboard, say it was built from {X} and link it so the reader can open it and compare.
  5. Separate fact from model. Treat exact, official numbers precisely; label directional or illustrative relationships as such; never fabricate an unknowable — let the reader set it, or drop the claim.
  6. Keep it tight. A hero panel plus three to six supporting panels is plenty; the win is that one gesture moves the whole system.

The build prompt

Copy this into your agent:

You are building a coordinated explorable DASHBOARD from {SOURCE / DATA}.

A dashboard is many components wired into ONE model:
1. Find the spine — a single HERO lever (a rate, a budget, a shock) that propagates through everything.
2. Write one compute(state) that derives ALL outputs from the levers (the coupling). Every panel reads from it; dragging ANY handle re-runs compute() and updates EVERY panel at once.
3. Each panel is a component — obey all the component rules: marks-are-handles, reasons-in-prose, auto-scale, no-flash, honest.
4. Cite your source prominently (built from {X}; open it to compare) for any data-derived dashboard.
5. Honesty is the hard part: separate exact/official numbers (model them precisely) from directional/illustrative relationships (label them clearly). Never fabricate an unknowable — let the reader SET it (e.g. a current price), or drop the claim.
6. A hero panel + 3-6 supporting panels is plenty. The win is that one gesture moves the whole system.

Kill it if: the panels do not actually couple (it is just charts side by side); a number is invented; or the line between fact and model is blurred.

Kill-criteria

  • Panels do not couple — it is just charts side by side.
  • A number is invented to fill a panel.
  • The line between official fact and directional model is blurred.
  • A hero gesture moves one panel but not the system.

See it in the wild