
Chart Pack from Data
Build a single interactive HTML page of charts that answers a defined set of questions about a dataset. Scopes the questions and the right chart type per question FIRST (so you don't make a pretty chart that answers nothing), then analyzes the data into chart-ready series, then builds one self-contained HTML page rendering every chart with titles, axis labels, and a one-line takeaway caption each. Use this for a dashboard of charts, a visualization pack, a metrics page, or turning a CSV into graphs and plots.
Steps
Entry step: question-scope. Each step names the specialist role it wants; the full working prompt is expandable.
- Scope the questionsplannerentry
lock the questions and the chart type that answers each
Show working prompt
Decide WHAT the chart pack must answer before any analysis. Step 1: list 4-8 specific questions a reader has about this data (e.g. 'how did revenue trend by month?', 'which 5 categories are largest?', 'how are values distributed?'). Step 2: for EACH question pick the chart type that answers it best and say why (trend over time -> line; part-to-whole -> bar/stacked, not pie unless <=5 slices; distribution -> histogram; comparison -> grouped bar; relationship -> scatter). Step 3: name the exact columns and aggregation each chart needs. Step 4: write an acceptance-criteria checklist ('one chart per question', 'every chart has a title + axis labels', 'every chart has a one-line takeaway caption', 'chart type matches the question'). Call write_task_note and write the question->chart mapping + checklist to notes/question-scope.md. - Analyze into chart-ready seriesdata-analyst
aggregate the data into the exact series each chart needs
Show working prompt
Transform the raw data into the precise series each scoped chart needs. Step 1: for each chart, group/aggregate the columns named in the scope (sum, count, average, bucketed histogram) and produce ordered (label, value) arrays. Step 2: sort sensibly (time ascending, categories by magnitude) and cap to a readable count (top-N + 'other' if needed). Step 3: write the computed takeaway caption for each chart from the numbers ('March was the peak at 4.2k, up 38% from Feb'). Step 4: emit the series as data/series.json keyed by chart id so the build phase reads it directly. Call write_task_note with the series summary and the captions. - Build the chart pagedeveloper
render every chart in one self-contained index.html
Show working prompt
Build a single self-contained index.html that renders every scoped chart from data/series.json. Step 1: use inline <canvas>/SVG drawing or a single inlined chart library — no external network asset that could fail offline; if you embed the series, keep it in sync with the JSON. Step 2: render each chart with its title, labeled axes, readable ticks, and a legend where needed. Step 3: place the one-line takeaway caption under each chart. Step 4: lay the charts out responsively in a grid that reads top-to-bottom in the scoped order. Step 5: ensure no console errors and that charts have real data, not placeholders. On a loop-back, fix only the named gaps. Call write_task_note with the path and chart count.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Open index.html (render it if a browser capability exists, else trace the source). Verify: there is one chart per scoped question; each chart has a title, labeled axes, and a takeaway caption; the chart type matches the question from the scope; charts render real values from the series, not placeholders; and there are no console errors. Spot-check two charts' values against data/series.json. Write PASS/FAIL per criterion; any FAIL loops 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.
- make charts from data
- chart pack
- visualize this dataset
- graphs from a csv
- build a charts page
Source
View this craftbook on GitHub · MIT license