Command Palette

Search for a command to run...

Hectal
Phase 5Intermediate6 of 19 in Data Visualization

D3 Core: Selections and the Data Join

Learn D3's one big idea: bind an array to elements with the data join, so a chart redraws correctly when the data changes: enter, update, exit and keys.

Until now you drew every bar in a loop, and when the data changed you had to wipe the chart and start again. This phase gives you D3's answer: selections (a list of page elements you can change together) and the data join (a rule that pairs each item of an array with one element).

You meet the join on plain divs first, where you can see every step, then on SVG bars. You learn why a key keeps the right bar attached to the right station, what goes wrong without one, and how to react to clicks and pointer moves without piling up listeners.

At the end the dashboard gets its first chart that updates: the busiest stations, with a month selector. Switching month adds, moves and removes bars, and nothing is redrawn from scratch.

Phase 5 · the story

Arjun, engineer

“Every time the data changes, my hand-made chart draws a second copy on top of the first or loses its bars, and I do not trust it.”

Arjun wrote the rides chart by hand in Phase 3. It works, once. Then Priya asks to look at May instead of July, and his code appends 25 new bars under the 25 it already drew. He fixes that by clearing the whole chart before every draw. Now the page flickers, a bar being hovered loses its tooltip, and a station that moved up one rank jumps instead of sliding.

He has read that D3 solves exactly this with something called the data join, and that most chart bugs in D3 are join bugs. He wants to understand it properly before the dashboard grows ten more charts that all depend on it.

In this phase you learn the join from the bottom up. By the end the team's station chart updates in place: bars that stay are kept, new stations appear, stations without rides disappear, and you can explain why.

In this phase

You will learn

  • Select page elements with D3 and change them, and say what an empty selection does
  • Explain the data join: which items enter, which update and which exit, and why you add a key
  • Draw SVG bars from an array that redraw correctly when the array changes
  • Attach click and pointer handlers to chart marks without double-binding them

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/data/load.js
  • src/main.js
  • index.html
0/7 · 0%
7 topics ~2 h 16 code blocks & diagrams
Start with the first topic
1
5.1

What D3 Is (and Isn't)

D3 is a toolbox of small modules for turning data into pictures, not a chart library with a drawBarChart() button. Some modules only do maths and never touch the page; others change the page. Knowing which is which tells you what D3 can do for you and what you still write yourself.

19 min 2 code practice

2
5.2

Selections

A selection is a list of page elements that D3 holds for you. You find elements with select and selectAll, change them with attr, style and text, add with append, delete with remove, and chain the calls. An empty selection is not an error: setters do nothing, and getters throw.

19 min 2 code practice

3
5.3

The Data Join, Shown on Plain Divs

The data join pairs each item of an array with one element. Items with no element are the enter group, pairs are the update group, and elements with no item are the exit group. Learn it on plain divs, where nothing else gets in the way.

19 min 3 code practice

4
5.4

Keys and Object Constancy

Without a key, the join pairs by position, so when the data reorders or an item leaves, the wrong element gets the wrong item. A key function, such as (d) => d.id, pairs by identity, so each station keeps its own element.

20 min 2 code practice

5
5.5

Joins in SVG

Bars are a join of an array with <rect> elements: selectAll("rect").data(rows).join("rect"), then attributes from d. Run the same function again with new data and the chart updates, grows, shrinks or empties. Nested joins build groups, and a wrong field name leaves NaN in the attributes.

20 min 2 code practice

6
5.6

Events in D3

selection.on("click", (event, d) => ...) attaches a listener to every selected mark, and gives it the browser's event and the mark's datum. Learn the version 7 form, how to remove listeners, why re-running draw must not stack them, and when one listener on the parent beats one per mark.

21 min 3 code practice

7
5.7

Build: A Station Bar Chart That Updates

The dashboard gets its first D3 chart: stations ranked by rides, with a month selector. A keyed join makes the bars move, appear and disappear as you change month, and every awkward case (no data, one row, a broken row) is handled.

31 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.

1

Bars from an array

values holds five numbers. Draw one <rect> per value in the SVG: x = i * 50, width 40, height = d * 15, standing on the line y = 150.

Beginner
2

A chart that can shrink

Two buttons redraw the chart: 7 days and 3 days. The page starts with 5. The starter only handles growing: after 3 days it still shows the old bars.

Intermediate
3

Keep each station's bar

Press July and the stations come in a new order. Each bar should still be the same element for the same station (so animations and highlights could follow it).

Intermediate
4

Click a bar to see its station

Clicking a bar should write the station's name and rides into #info, like Lantern: 7,260 rides. Use .on("click", (event, d) => ...).

Intermediate
5

Top five stations of a month

Build a piece of the dashboard. Read station-month.csv and draw the five busiest stations of the month chosen in #month as horizontal bars (width = rides ÷ 40), keyed by station id. Changing the select must update the same chart.

Advanced