Bar charts · hover stories
Ball and cleat
A ball rolls along each player's goals and a boot steps along their assists, on barChart with travel, and the same story on a chart the library didn't draw. Hover a bar, then switch the motion mode, the metric and the sort, and play the next matchweek.
Harbor City FC: goals by player
The library's own barChart. In Goals, a ball rolls the length of the bar. In Assists, a boot steps along it. In Goals + assists, the ball stops at the end of the goals and the boot carries on. Switching the metric or sort animates: in Presentation the values change first and then the rows move; in Analysis it's one quick step; Off jumps. Play next matchweek flashes the bars whose numbers changed (on: { update: "flash" }), as does a metric switch, which changes them all; a re-sort or a new scale only moves them.
The same story on someone else's chart
A plain SVG chart drawn by hand, the way D3 code would draw it. It knows nothing about the library and redraws from scratch on every change, with no animation of its own. expressive() adds the same hover story, keyboard focus (Tab, then the arrow keys) and dimming, and refresh() keeps the effects in step after each redraw. A value accessor tells it what each rect shows, so update: "flash" flashes the same bars as above: the ones whose numbers changed, not every bar when the axis grows or the window is resized. The chart names each rect for screen readers ("Okafor: 4 assists"), but focus moves by player, so markLabel names each player as one item ("Okafor: 16 goals, 4 assists").
Things to try
- Tab into a chart, then use the arrow keys, Home and End: keyboard focus plays the same stories as the pointer. Escape stops.
- Sort in Presentation: the values change first, then the rows move. Click again mid-change, and nothing jumps.
- Pick Off, or turn on reduced motion: every change jumps to where it ends.
- Open the bar chart's data table: it lists each player's position too, as the tooltip does.
- Switch your system between light and dark: the charts' colours come from the library's own theme, and text is never in a series colour.