Topic 18.1
Interview Questions: Concepts
In one line
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.
Think of it like this
A driving test. The examiner does not want a speech about engines. They ask "what do you do at this junction?" and watch whether you check the mirror first. An interview about charts is the same: a short answer that shows you know the reason, and, when pushed, one example you have actually seen.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- retained mode
- A drawing system that keeps an object for every shape (SVG). You change the object and the browser redraws.
- immediate mode
- A drawing system that keeps only the finished picture (Canvas). To change anything you clear and draw again.
- WebGL
- A browser API that draws through the graphics card. It handles very many points but needs shader code or a library.
- key function
- A function you give
data()that returns the identity of a datum, such as its id, so D3 pairs data with elements by identity and not by position. - clamp
- A scale setting that stops outputs at the ends of the range, so a value above the domain does not draw outside the plot.
- accessible name
- The text a screen reader announces for an element, from
aria-label,<title>or a visible label. - trade-off
- A choice where each option wins at something and loses at something else. Interviewers ask for it by name.
Step by step
01Learn the four-part shape
Every strong answer has four parts: the choice, the reason, the cost, the exception. Practise saying them in about twenty seconds. If the interviewer wants more, they will ask, and you have a second sentence ready.
02Prove the join and key answer with code
The first example renders three stations for May, keeps the element that shows Quay, then renders June where Quay moved from first to last. Without a key the first element now shows Lantern. With the key (d) => d.id it still shows Quay.
This is the "wrong bar moves" bug of Topic 5.4, and the reason Topic 9.3's animations track identity.
03Predict scale behaviour before you run it
The second example asks what a scale does with a value above the domain, with undefined, with a flat domain, with zero on a log scale, and with a name it has never seen. Cover the output and write your own answers. Each one is a real interview question.
04Match the question to the phase
"Which technology?" is Topic 12.1. "How do you make a chart accessible?" is Phase 15. "How do you keep it fast?" is Topics 12.4 and 16.5. "How do you use D3 with React?" is Phase 14. "How do you test a chart?" is Topic 16.7. Re-read the matching topic's pro notes the day before an interview.
Try it yourself
- 1
Break the keys on purpose
In the first example, change
juneso its last station is{ id: "S99", name: "Harbour", rides: 100 }. With the key, the Quay element is removed (it leaves with its datum), sod3.select(quayElement).datum()still returns its old data and the log shows Quay for the detached element. Without the key, the element is reused and now shows Lantern. Identity decides who lives and who leaves. - 2
Ask the scale a new question
In the second example add
console.log(y(-100).toFixed(1)). It prints204.6: below the domain, a scale extrapolates past the range. Add.clamp(true)and it stops at 200. Predicting this before running it is exactly what a whiteboard round asks.
Code & diagrams
Say it in one sentence: without a key, D3 pairs by position; with a key, by identity.
Preview
Console
Nothing logged yet.Expected console output
no key: the first element now shows Lantern
key by id: the first element now shows QuayEvery line is a question a real interviewer has asked. Cover the output, answer aloud, then run.
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, 4000Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Use the same key twice
Add this to the end of the first example, which renders data where two items share an id, twice, and counts the groups on the second render: const dup = [{ id: "S01" }, { id: "S06" }, { id: "S01" }]; list.selectAll("li").remove(); list.selectAll("li").data(dup, (d) => d.id).join("li"); const sel = list.selectAll("li").data(dup, (d) => d.id); console.log("second render: update", sel.size(), "enter", sel.enter().size(), "exit", sel.exit().size());
Myth vs fact
Myth
Canvas is faster than SVG, so always use Canvas.
Fact
Canvas is faster for thousands of marks, but gives up per-mark events, styling and accessibility. For 25 station bars, SVG is simpler and better. The honest answer starts with the number of marks and what the user must do with them.
Myth
D3 and React cannot be used together.
Fact
They share a job, not a conflict. Use D3 for maths (scales, shapes, layouts) and let React own the DOM. The few modules that need real DOM nodes (axes, brush, zoom) get a ref (Topic 14.2).
Myth
A key is only for animations.
Fact
A key keeps each element tied to its datum, which also protects focus, scroll position, event listeners and any per-element state when the data re-sorts or filters.
Interview problem
The problem
Choose the rendering for a trip explorer
Priya wants a page where she sees all 10,000 June trips as dots on a time-versus-length scatter, hovers a dot to see its trip, and a screen-reader user can still get the answers. How do you build it, and how do you justify the choice?
You're given
- 10,000 trips (start time, minutes), data loaded once
- Hover shows the trip details within one frame
- Works on a mid-range phone
- Usable with a keyboard and a screen reader
The interviewer follows up
What changes if there are 2 million trips?
How would you test the hover?
A user zooms the browser to 200%. What breaks?
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Interviewers listen for the sentence "it depends on the number of marks and the interaction" followed by a number. Have your own measured numbers from Topic 12.1; say "on my machine" and never quote another person's number as a rule.
- ▸
D3's key map is built from
String(key):1and"1"are the same key, andNaNorundefinedkeys all collide. In a join over ids from a CSV (always strings) and ids from JSON (numbers), the join still pairs them, which can hide a type mix-up until a strict comparison elsewhere fails. - ▸
When asked about "honest charts", give a measurable test, not a feeling: compare the ratio of the drawn lengths with the ratio of the values (Topic 0.2's third example). A checkable claim beats an adjective.
Remember this
- 1
The problem this solves: most candidates know how to make a chart and cannot explain why they chose it. Interviewers hear "I used D3 because it is popular" and learn nothing. A good answer names the choice, the reason, the cost and the case where you would choose the opposite. This topic gives you that shape for the questions that repeat.
- 2
Use a four-part answer. Say what you would choose. Say why, in one sentence about the mechanism. Say what it costs. Say when you would choose differently. For example: "SVG for the station bars, because each bar is a DOM node I can label, focus and style; it costs memory per node, so above a few thousand marks I would move to Canvas." Four sentences, and the interviewer knows you understand both sides.
- 3
SVG, Canvas and WebGL are three different kinds of drawing, not three speeds. SVG is retained mode: the browser keeps one node per shape, so it can style, hit-test, focus and read them to a screen reader, and pays memory and layout for every node. Canvas is immediate mode: you give pixel instructions and the browser keeps only the picture, so it is fast for many marks and has nothing to click. WebGL draws through the graphics card and handles hundreds of thousands of points, at the price of writing shaders or using a library. Phase 12 measures the crossover on your device; never quote one number as a law.
- 4
A join keeps the screen equal to the data; a key keeps each element tied to the same thing.
data()compares your array with the elements already there and sorts them into enter, update and exit. Without a key it pairs by position, so when the data is re-sorted, the element that showed Quay now shows Lantern and an animation moves the wrong bar. A key function such as(d) => d.idpairs by identity. The first example below proves it, and also shows that a duplicate key makes one element be created and removed on every render. - 5
A scale is a function from data to pixels, and its edge cases are the interview. Know the domain and the range, why the y range is flipped (SVG's y grows downwards), what
clampdoes, whatnice()does, and what happens at the edges: a flat domain returns the middle of the range,log(0)isNaN, an unknown band name isundefined. The second example prints all of these. When a candidate can predict the output before running it, the interviewer relaxes. - 6
Accessibility, testing, React and honesty each have one sentence that shows you have done it. Accessibility: "every chart has a role and a name, a table twin, keyboard access, and colour is never the only signal" (Phase 15). Testing: "I test the scales and the data shaping as plain functions, and I check marks in the DOM" (Topic 16.7). React: "D3 does the maths, React owns the DOM, and the exceptions (axes, brush, zoom) use a ref" (Phase 14). Honesty: "bars start at zero, dual axes need a reason, the title states the finding" (Topic 2.5).
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?
Practice
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.
Trade-offs
- ↔
A short, confident answer shows understanding but may skip nuance; a long answer shows nuance but may bury the point. Lead with the choice and the reason, and let the interviewer ask for the rest.
- ↔
Learning every library's API is wide and shallow; learning the mechanisms (joins, scales, the DOM cost, the pixel grid) is narrow and deep and transfers to every library.
Done when you can
I can answer the SVG, Canvas or WebGL question in the four-part shape with a number.
I can explain enter, update and exit and show why a key matters.
I can predict what a scale returns at its edges: flat domain, log of 0, unknown names.
I can say in one sentence each how I handle accessibility, testing, React and honesty.
I can work through a rendering choice for 10,000 and for 2 million points.