Phase 9Intermediate10 of 19 in Data Visualization

Motion

How D3 transitions really run, how to ease and time them, keep bars recognisable when the data changes, draw lines on, and respect people who want less motion.

Until now, every change of data made the chart jump. In this phase you make it move, and you learn what moving means inside the browser: D3 does not animate anything itself. It schedules small steps on a clock and writes a new attribute value in each step.

You learn when motion helps (it shows where something went) and when it only gets in the way. You choose easing and timing, keep each bar the same element across updates so the eye can follow it, handle updates that arrive in the middle of an animation, and draw lines on from left to right. You also write your own animation loop, and you make every one of these respect the person who has asked their device for less motion.

At the end the dashboard's station bars slide, grow and shrink when the month changes, the rides line draws itself once on load, and one small file decides how much motion everyone gets.

Phase 9 · the story

Tomás, founder

“When I switch the month, the bars jump, and I lose track of which station is which.”

Before the board meeting, Tomás flips the dashboard from June to July. The station chart redraws in one frame. The bars have new lengths, the order is different, and he cannot say whether Lantern went up or Quay went down. He has to read every name again.

"It's like someone shuffled the cards while I blinked," he says. Priya agrees: the numbers are right, but the picture does not tell her what changed. Meera adds a different worry. Her cousin gets dizzy from screen animation and switched it off in the system settings. Whatever the team adds must obey that setting.

In this phase the team learns how transitions work, how to keep each station's bar the same element so it slides to its new place, and how to give the person who wants less motion exactly what they asked for. By the end, Tomás can watch Lantern climb from fifth to first.

In this phase

You will learn

Animate any attribute, style or text with a D3 transition, and say what happens inside it
Keep a bar the same element across updates, and handle updates that arrive mid-animation
Draw a line on from left to right and animate shapes whose point counts differ
Respect prefers-reduced-motion and pause animation loops when the page is hidden

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/charts/stations-bar.js
src/charts/rides-line.js
src/utils/motion.js

0/6 · 0%

6 topics ~3 h 15 code blocks & diagrams

Start with the first topic

9.1

Transitions

A D3 transition does not move anything by itself. It stores a plan on each element, and a clock then writes a new value between the old one and the new one on every frame. It can animate numbers, colours and any text that contains numbers.

23 min 2 code practice

9.2

Easing and Timing

Easing decides how fast a movement is at each moment: slow at the start, fast in the middle, or even past the target. Duration and delay decide how long it lasts and when each mark starts. Good motion is short, and it ends where the data says.

22 min 3 code practice

9.3

Animating Updates with Object Constancy

When the data changes, each bar should stay the same element and move to its new place, so the eye can follow it. A key function ties data to elements, join hands out enter, update and exit, and a newer transition always replaces an older one on the same element.

24 min 3 code practice

9.4

Animating Paths and Custom Tweens

A line can be drawn on with one dash trick. A path whose number of points changes needs a tween that you write, or it wiggles. And a shape such as an arc must be rebuilt from an interpolated angle at every frame, never interpolated as text.

24 min 3 code practice

9.5

The Animation Loop and Reduced Motion

Everything that moves on a web page is drawn in frames. requestAnimationFrame and d3.timer call your function once per frame, and your function should place things by elapsed time, not by counting frames. Respect prefers-reduced-motion, and stop loops when the page is hidden.

23 min 2 code practice

9.6

Build: Smooth Month-to-Month Updates

Make the station bars slide when the month changes, draw the rides line on once, and give every chart one shared rule for reduced motion. It answers Tomás: he can now watch Lantern climb to first place.

50 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Grow the bars

The week's bars appear at their full width at once. Make them grow from 0 to their width in 400 ms with a D3 transition.

Beginner

Stagger the bars

The bars should start one after another, 40 ms apart. None of them moves, because the delay is computed from a field the data does not have.

Intermediate

Respect reduced motion

showBar(width, reduced) should set the bar's width at once when reduced is true, and slide to it over 300 ms when it is false. Both paths must give the same final width.