← All craftbooks

Chart Pack from Data

Data and analysisevalv1.0.0released 2026-06-05workflow: build-loop

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Source

View this craftbook on GitHub · MIT license