Three everyday charts with motion rules built in. Hover, sort, scrub and morph them, then switch the motion mode to feel the difference between presenting and analyzing.
Motion
Harbor City FC: goals by player
Hover a bar to focus it. In Goals, a ball rolls out the length of the bar. In Assists, a boot steps along it. In Goals + assists, the ball rolls to the end of the goals and stops, then the boot carries on through the assists. Changing the metric or sort resizes bars first, then moves rows.
After matchweek 24
GoalsAssists
Data table
Goals vs expected goals, season to date
Scrub the season or press Play. The goals line turns red wherever the team has scored fewer goals than its chances were worth. Hover anywhere to read both lines and the gap.
Goals scoredGoals below xGExpected goals (xG)
Through matchweek 38
Data table
Shot outcomes
Switch between share of total and side-by-side counts. The same four shapes morph into each other, so you never lose which slice became which bar.
Data table
The motion rules behind this page
Hover feedback is a 100 ms color shift with the other marks dimmed. Nothing moves under the cursor.
Presentation mode stages data changes at about one second: values first, then positions.
Analysis mode caps every transition near 200 ms with no staging, so exploring stays fast.
Off removes all motion. It is the default when your device asks for reduced motion.
Every mark keeps a stable identity through sorts, updates and morphs. That identity is what makes the motion readable.