A scrollytelling story on a single live chart. Scroll the story and the same twelve columns recolor, annotate, and finally reshape; scrolling back up rewinds the story.
Fiscal 2025, month by month: 341 k$ across twelve columns. A slow start and a strong finish, with two turning points hiding in plain sight.
A bad deploy took sign-ups offline for two days, and March is the only month that broke the climb. The spotlight narrows.
The hinge of the year. From May on, every month tops the last, and the slope never looks back.
Same columns, new grouping. Each quarter beats the last by half again or more: 35 k$ in Q1 grows to 157 k$ by Q4.
The twelve months curl into a ring, each column becoming its own slice. The quarter colors survive the change of shape.
Scroll the story, or use the beat dots and Prev/Next. Each beat is a saved view; scrolling back up reverses it.
chart.storyboard.bind({ beats, scroller }) pairs prose elements
with views; here scroller points the observer at the story
column, so beats apply as their step crosses the middle of that panel
(IntersectionObserver, no scroll listeners) and re-apply in reverse on the
way up. The design rule that keeps every transition smooth: all five beats
keep the same twelve marks. Emphasis moves by color (spotlights,
quarter groups) and annotations, never by cropping or re-binning, so nothing
pops in or out. The finale's options payload swaps
chart.type, and the morph feature curls each column
into its own donut slice, a one-to-one morph. The dots and Prev/Next call
chart.storyboard.goTo(i) and scroll the story to match, each
beat announces itself to the aria-live region, and beatChange
drives the step highlight. Transitions are cut instead of animated under
prefers-reduced-motion. Needs the storyboard feature (bundles
perspectives).