Linked hover · change labels
The season so far
Harbor City FC after 24 matchweeks, on the library's charts and on two drawn with D3. Hover a matchweek in any of the first three charts and the others show the same week, with link(). Play the next matchweek to see each player's change rise past their bar with delta(), and hover a line in the slope chart to trace() it.
Linked by matchweek
Three charts in one link(): the library's barChart and lineChart, and columns drawn with D3 through expressive(). Hover a week in any of them, or Tab in and use the arrow keys, and the same week lights up in the other two, with their own hover effects: a ball up the goals column, a pulse round the line's points and the shots column. Only the chart you're on shows a tooltip or takes focus. After each matchweek, the goals line's change rises past its end label with delta(), clear of xG's label. Only the goals line has one: the two lines end close together and head the same way, so xG's change would land on it. The announcement says both.
Goals per matchweek
Shots per matchweek, drawn with D3
Goals vs expected goals, season to date
Since the last matchweek
The library's barChart, with flash() and delta() in its update slot. Play the next matchweek: each player who scored flashes, and their change rises past their bar and stays until the next one. The table's Change column and the announcement say the same, since screen readers don't read what effects draw.
The season so far
Each player's goals at matchweek 1 and now, on a slope chart drawn with D3. label() writes each change past the player's name, which the page gives as the line's own label (labelBounds), and follows it every matchweek. Hover a line, or Tab in, to trace() it.
Things to try
- Hover a week on the line: its goals column and its shots column light up too. Then pick Emphasis only, and the linked weeks keep their emphasis and dimming without the ball or the pulse.
- Tab into the goals per matchweek and use the arrow keys: the other two charts follow the focused week, and focus stays where it is. Escape ends all three.
- Press Play next matchweek: a week is added to every chart, the players who scored flash with their change past their bar, the goals line's change rises past its end, and the slope chart's changes follow.
- Pick Off, or turn on reduced motion: the changes and the slope chart's labels show at once, and a trace is drawn whole.
- Open the players' data table: its Change and Since matchweek 1 columns say what the charts write over the bars and the lines.