Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 5.4 — Keys and Object Constancy
Data Visualization · Example 1 of 2

The same two months, by position and by key

Read the stamps: with no key the element el1 shows Quay in June and Lantern in July. With the key, el1 still shows Quay.

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.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 5 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

June's top stations are S01, S06, S04 and July's are S06, S01, S03. Write the keyed join code and say which elements are kept, entered and exited.

02

Write checkKeys(rows, key) that returns the keys that appear more than once. Test it with ids S01, S02, S01.

Explain it without notes

01

Why can a join without a key put the wrong value on a bar?

02

What makes a good key?

03

What does D3 do when two new items return the same key?

The same two months, by position and by key

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

NO KEY (matched by position)
june: el1=S01  el2=S06  el3=S04
july: el1=S06  el2=S01  el3=S03
KEY (d) => d.id
june: el1=S01  el2=S06  el3=S04
july: el2=S06  el1=S01  el4=S03