Streamgraph

Tab

Focuses the plot and reads the latest point.

ArrowLeftorArrowRight

Moves through time.

ArrowUporArrowDown

Moves the isolated layer up or down the stack.

PageUporPageDownorHomeorEnd

Jumps by a sixth of the range, or to the first or last point.

Escape

Clears the reading.

• The plot is a focusable group; each reading is announced with the point, the isolated layer's value, and the total.
• Legend toggles are buttons with aria-pressed; hovering or focusing one isolates its layer.
• A visually hidden table lists every point and layer value.
• Layers are separated by a 2px surface gap and named in place, so identity never rests on shade alone.

• The stream swells out of a hairline along its centre the first time it is seen.
• New data blends every layer on a shared grid, so ranges of different lengths morph without redrawing.
• Hidden layers thin to nothing while the rest reflow; the crosshair and tooltip glide on springs.
• Reduced motion jumps to the final shapes and keeps the crosshair and tooltip without travel.

• The plot fills its container; axis labels thin out to one per 72px, counted back from the latest.
• Direct labels hide where a layer is too thin or the plot too narrow; the tooltip and legend still name it.
• Touch drags scrub through time with pointer capture while vertical page scroll stays free.

• Each layer is resampled once per data change onto 161 points; paint recomputes the baseline and writes paths directly.
• Hover state re-renders only the tooltip and a few attributes; morphs never re-render React per frame.

• Choose it for how a mix changes over time when the overall rhythm matters more than exact totals.
• Put the most important layer first; it runs through the middle of the stream.
• Use offset="zero" when people need to read totals against a baseline, like a stacked area chart.
• Keep layers to about eight; fold the rest into Other.

The full library index for assistants is at /llms.txt.