Visibility chart

Click a day to pin it, drag across the plot to select a range, then press Investigate to have the panel explain what moved. Escape cancels a drag or clears the selection, and the arrow keys do everything the pointer does.

Selection is a small state machine instead of a handful of booleans. It is either nothing, a pinned day or a range, and the hover day and the drag anchor live beside it. A pointer up on the day where the pointer went down pins it, a pointer up on another day makes a range, always stored from the earlier day to the later one. Dragging updates the range live and remembers what was selected before, so Escape puts that back instead of leaving a half-made range. Shift with the arrows keeps the anchor fixed and moves the other end.

Every series has a stroke dash as well as a colour: solid, dashed, dotted, dash-dot. The legend shows the same stroke, so nothing depends on telling hues apart. The bars view swaps dashes for fills, because a dashed outline on a six pixel bar is noise: solid, stripes, dots and a grid. The faint line is the previous 90 days for the owned brand.

The table is not an afterthought. It carries the same selection, so arrow keys and clicks work there, and it is what a screen reader gets for the drawing, with annotations written into the rows.

The explanation is generated from the data in the browser: the change over the range, the average against the previous period, the largest one-day move, who led, and any annotation that falls inside. The scores come from a seeded generator and a fixed end date, so the first render is the same on the server and the client, and the two annotations move the numbers around their days on purpose.

Keyboard and access

Keyboard

The plot is focusable. Arrow keys move the active day and pin it, Shift with the arrows extends a range from the pinned day, Home and End jump to the first and last day, Enter opens Investigate and Escape cancels a drag or clears the selection. In the side panel Escape closes it and returns focus to Investigate. In the Table view the up and down arrows do the same through the rows, and rows can be dragged across or Shift-clicked to select a range. The legend, the view switch and the annotation markers are ordinary buttons.

Screen readers

The plot is a group described as an interactive chart, with a polite live region that reads the pinned day and every visible series value, or the selected range once a drag ends. The Table view is a real table with a caption and is the accessible alternative to the drawing. The Investigate text is announced once, when it finishes streaming, and legend buttons report whether each series is pressed.

Reduced motion

With reduced motion the view switch and the side panel appear without transitions and the Investigate text shows in full at once instead of streaming word by word.