Interview proof: what a scale does at the edges
Every line is a question a real interviewer has asked. Cover the output, answer aloud, then run.
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?
Console
(nothing was printed)Expected console output
3742 rides -> 29.1 (y grows down, so the range is flipped)
5000 rides, no clamp -> -28.3
5000 rides, clamp -> 0
undefined -> undefined
domain [0, 0] -> 100 (the middle, not NaN)
log of 0 -> NaN | log of 100 -> 200
band('S06') -> 112.5 | unknown 'S99' -> undefined
nice() turns 0-4380 into 0-4500 with ticks 0, 1000, 2000, 3000, 4000