Interview proof: why a join needs a key
Say it in one sentence: without a key, D3 pairs by position; with a key, by identity.
The questions that come up again and again for data-visualization roles: SVG, Canvas or WebGL; joins and keys; scales; accessibility; performance; testing; React; honest charts. Each answer here is short enough to say aloud and backed by something you can run.
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.
Write a 20-second answer to "Why do you need a key in a data join?" in the four-part shape (choice, reason, cost, exception).
You are given 25 stations and 10,000 trips and asked to show both with hover on the stations. Which rendering do you use for each, and why? Name one thing you would measure first.
A candidate says "I would use a dual-axis chart to show rides and temperature on one graph." Write three follow-up questions you would ask, and what a good answer contains.
Explain it without notes
SVG, Canvas or WebGL: how do you choose for a chart?
What does a D3 data join do, and why does it need a key?
How do you make a chart accessible to a screen reader user?
How do you keep a chart with 100,000 points responsive?
How do you test a chart?
Preview
Console
Nothing logged yet.Expected console output
no key: the first element now shows Lantern
key by id: the first element now shows Quay