One store, three views, four kinds of range
A real brush would call select(from, to) from its end event (Topic 8.5).
Linked views react to one shared selection. A tiny store with get, set and subscribe is enough: views never talk to each other, bursts of changes are batched, and the selection can live in the URL if every incoming value is checked.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write same(a, b) for two ranges (or null) and use it so store.set skips views when nothing changed.
Write the code that updates the URL when a brush ends and restores the brush when the page loads with a hash.
Explain it without notes
Why use a shared store instead of letting charts call each other?
Why does batching with a scheduler draw once for ten changes, and why is that still correct?
What must you check when you read a selection from the URL?
Preview
Console
Nothing logged yet.Expected console output
start | shaded px: 0 | orange dots: 0 | No range selected
select June | shaded px: 25 | orange dots: 30 | 107,712 rides, 1 Jun to 1 Jul
same, reversed | shaded px: 25 | orange dots: 30 | 107,712 rides, 1 Jun to 1 Jul
starts before the data | shaded px: 26 | orange dots: 31 | 43,439 rides, 1 Jan to 1 Feb
empty range | shaded px: 0 | orange dots: 0 | No range selected