Charts and scrolling

Declare complete chart statesCopy Anchor Link

import { bar } from 'visdelta/bar'
import rows from './data.json'

export const overview = bar(rows).x('region').y('revenue')

<Scrolly>
<Step chart={overview}>The whole picture.</Step>
<Step chart={overview.highlight({ region: 'North' })}>Focus on North.</Step>
<Step chart={overview}>Return to the overview.</Step>
</Scrolly>

Each Step receives a complete immutable state. highlight() returns a new declaration; it does not modify the base chart. No parallel states array or scroll handler is needed.

Move chart code into chart.jsCopy Anchor Link

The chart editor supplies bar, line, area, point, unit, pie, d3 and the records as rows. Declare const chart = ..., then import it in MDX:

const chart = bar(rows).x('region').y('revenue');

import { chart } from './chart.js'

<Scrolly>
<Step chart={chart}>Compare the regions.</Step>
</Scrolly>

chart.js is evaluated as an editor script with these bindings; it is not an arbitrary module bundler. For shared controls and named views, use a StoryData model.

Playback and layoutCopy Anchor Link

Use distinct Step IDs for navigation and shareable hashes. Multiple Scrolly blocks own independent playback. Reduced motion snaps to states. Controls update the active native chart, and scrolling prepares transition legs on demand.

For chart mappings, transforms and differences, use the VisDelta library reference.