Highlight, Filter and Legend Toggles

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

state

All the facts about the chart that can change: what is hovered, what is pinned, what is hidden.

event delegation

One listener on a parent that handles events from its children.

aria-pressed

An attribute that tells assistive technology a toggle button is on or off.

empty state

What the screen shows when there is nothing to show, with a way out.

1. 1

   Dim less, or more

   In the shared setup change 0.35 to 0.15. The other bars almost vanish. Hover in the editor: the highlighted bar is clear, but you can no longer see where it stands among the others.

2. 2

   Stop the empty message

   In the second example's setup, change state.hidden.size < districts.length to true. After "hide every district" the message stays hidden and the chart is just faded colours: the reader has no clue what happened.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: 25 coloured bars are hard to compare in one look. The reader wants to follow one station, or look at one district. Highlighting and filtering let them focus without losing the picture.

2. 2

   Keep all the facts that change in one object. The example uses state = { hover, pinned, hidden }. Events never touch the bars. They change state and call render(). render() reads state and draws everything. That removes a whole class of bugs: a highlight that stays after the pointer leaves, a legend that says "hidden" while the bar is visible, two handlers that disagree.

3. 3

   Draw with a keyed join. render() runs on every change, so it must reuse the elements: .data(data, (d) => d.id).join("rect") (Topic 5.4). The example ends with 25 rect elements after every kind of change, not 25 new ones per redraw.

4. 4

   Hover, tap and Escape. Hover helps mouse users but not phones (Topic 8.1). So a click, which a tap also produces, pins a bar: click the same bar again to unpin, press Escape to clear. The rule "a pinned bar wins over hover" is one line: state.pinned ?? state.hover. Keyboard users get the same highlight when each bar has tabindex="0" and its focus and blur events set and clear state.hover; the build does this for the station bars.

5. 5

   A legend is a set of buttons. Real <button aria-pressed="true"> elements get keyboard focus, Enter and Space, and a screen reader says "pressed" or "not pressed". A clickable <rect> in an SVG legend has none of that. Attach one listener to the legend container and read event.target.closest("button") (event delegation, Topic 5.6). One listener survives every redraw. A listener added inside the function that redraws is added again each time: after three redraws one click calls the handler three times, and a toggle that runs an even number of times does nothing.

6. 6

   Plan the empty state. If the reader hides every district, there is nothing to draw. A blank chart looks broken. Show "No districts selected" with a Show all button, as the example does, or do not let the last item be hidden. Decide also whether filtered bars keep their place (the example fades them, so the chart does not jump) or leave and the others re-spread (easier to compare the rest, but harder to follow what moved).

• ↔

  Fading filtered bars keeps the layout stable, but wastes space. Removing them uses the space but moves everything, which makes the reader re-find their place.

• I can keep hover, pinned and hidden in one state object and draw from it in one function.

• I can highlight by tap and by keyboard, not only by hover, and clear it again.

• I can build a legend of real buttons with one delegated listener.

• I can show an empty state with a way back.