component lab
Components
Data & visualization

InteractiveChart

Multi-type chart (bar, horizontal, line, area, donut, scatter) with multi-series, thresholds, hover scrub and keyboard navigation.

bar / annotated

CSS-animated columns; annotation with emphasize outlines the story's data point.

Review picks up half of what slips past the agent.
shipped
the review gap
caught in review
caught by tests
Sample data
horizontal

Rows with value column — better when labels are long.

time per task (min)
scaffold
12
first pass
34
review loop
where the day goes
58
polish
21
line / annotated

The line draws itself in as it enters the view. Replay to watch it again.

The suite got slower until the fixture rewrite landed.
0 20 40 60 Jan Feb Mar Apr May fixture rewrite suite time (s)
area

Line plus a translucent fill — for cumulative or volume-shaped stories.

posts published, cumulative
0 1 2 3 4 5 2025 Q4 2026 Q1 2026 Q2
multi-series / legend toggle / thresholds

Hover to scrub the crosshair, click legend chips to hide a series, focus the SVG and use arrow keys. Threshold renders as a dashed reference line.

The agent ships faster, but only the tested branch stays under the error budget.
0 5 10 15 wk1 wk2 wk3 wk4 error budget regressions
scatter

Numeric x/y points with nice ticks on both axes. Hover or arrow through points.

PR size vs review time
0 100 200 300 0 200 400 600 review SLA review minutes lines changed
donut

Part-of-whole with legend; total set in serif in the center.

Most of the month went to the review loop.
42
review loop 19 · 45%
writing code 11 · 26%
writing tests 8 · 19%
thinking 4 · 10%