Data Visualization Explorer
Build a single interactive chart or data explorer page — bar, line, scatter, or pie — driven by sample or provided data, with controls to filter, switch series, or change the dimension and a tooltip on hover. Scopes the dataset and the question the chart answers first, then the chart type and encodings, then implements a canvas or SVG chart with real interactivity. A chart that does not map data to pixels correctly is worse than a table, so the data and chart-design phases lock the encoding and the axes before any rendering code.
Steps
Entry step: data-scope. Each step names the specialist role it wants; the full working prompt is expandable.
- Data scopeplannerentry
dataset shape + the question the chart answers
Show working prompt
Scope the data and the question. (1) Define the dataset shape (fields, types) and embed a realistic sample array if none is provided. (2) State the ONE question the chart answers (e.g. 'how do sales trend by month?'). (3) Identify the dimension(s) and measure(s) to plot and any aggregation. (4) Decide the interactive controls (filter, series toggle, dimension switch) and the hover tooltip content. (5) Write an acceptance-criteria checklist of 5-8 items, e.g. 'the chart renders from the data', 'axes are labeled with correct scales', 'a hover tooltip shows the underlying value', 'a control filters or switches the view and the chart updates', 'responsive', 'no console errors'. Write to notes/data-scope.md and via write_task_note. No chart code yet.
- Chart designdesigner
chart type, encodings, axes, legend, tooltip
Show working prompt
Design the chart precisely. (1) Choose the chart type that fits the question and justify it in one line. (2) Map each variable to a visual channel (x, y, color, size) and define the axis scales and ranges. (3) Specify the legend, gridlines, color palette (hex), and the tooltip layout. (4) Design the control affordances (dropdown/buttons) and the empty/loading state. (5) Self-contained — canvas or inline SVG, no chart-library CDN. Write the visual spec to notes/chart-design.md and via write_task_note. No HTML yet.
- Builddeveloper
implement index.html with the interactive chart
Show working prompt
Implement index.html with inline CSS/JS to the chart and data scope. (1) Embed the data and compute scales mapping data values to pixel coordinates correctly (mind the inverted y-axis). (2) Render the chart with labeled axes, gridlines, and a legend via canvas or SVG. (3) Implement the hover tooltip showing the underlying value at the cursor's data point. (4) Wire the controls so changing them recomputes and re-renders the chart. (5) Make it responsive; vanilla JS, no CDN. Verify a couple of plotted points sit at the right coordinates. On a loop-back, fix only the named gaps without regressing passing criteria. write_task_note the path and passing criteria.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Evaluate the explorer. Open/render index.html, hover for tooltips, and operate every control. Check EACH criterion from notes/data-scope.md and write PASS/FAIL with a reason: does the chart render from the data, are axes labeled with correct scales, does the tooltip show the right underlying value, does a control update the chart, is it responsive, zero console errors? Verify one data point's screen position against its value by hand — a mis-scaled axis is a FAIL, loop back to build. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- data visualization
- interactive chart
- data explorer
- build a chart
- visualize data
- graph page
Source
View this craftbook on GitHub · MIT license