Hover, tap to pin, Escape to clear
Hover the real bars in the editor too: the same state drives them.
Highlighting dims everything except one thing, filtering takes things out. Keep all the changing facts in one state object, draw from it in one function, and decide in advance what the chart says when every item is filtered out.
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.
Make the legend keyboard-friendly: confirm Tab reaches each button and Enter toggles it. What in the example already provides this?
Add a "Solo" behaviour: double-click a legend button to hide every district except that one.
Explain it without notes
Why keep hover, pinned and hidden in one state object and draw in one function?
How does a phone user highlight a bar if hover does not exist?
Why is a listener added inside render() a bug, and how does event delegation avoid it?
Preview
Console
Nothing logged yet.Expected console output
start | full strength: 25 | hover: null | pinned: null
mouse over Quay | full strength: 1 | hover: S01 | pinned: null
mouse leaves | full strength: 25 | hover: null | pinned: null
tap Library | full strength: 1 | hover: null | pinned: S04
finger lifts | full strength: 1 | hover: null | pinned: S04
hover another while pinned | full strength: 1 | hover: S08 | pinned: S04
tap the same bar again | full strength: 25 | hover: null | pinned: null
pin it again | full strength: 1 | hover: null | pinned: S04
Escape | full strength: 25 | hover: null | pinned: null
rect elements in the chart: 25