Legend toggles, the empty state and the double-binding mistake
The legend's buttons are created by render() and reused by the join. Because the listener is on the legend itself, they never need their own.
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 | empty message: hidden
hide Harbour | full strength: 20 | empty message: hidden
hide Old Town too | full strength: 15 | empty message: hidden
show Harbour again | full strength: 20 | empty message: hidden
hide every district | full strength: 0 | empty message: shown
press Show all | full strength: 25 | empty message: hidden
rect elements after all that: 25 (the join reused them)
handler runs for ONE click after 3 redraws: 3