Round 3: a sparkline with its edge cases
A sparkline has no axes, so its honesty lives in the scale: here it spans the data's own minimum and maximum, which is fine for a trend and wrong for comparing two tiles (Topic 16.1).
A live-coding round asks you to build a small chart from a blank page while someone watches and listens. You learn the clock, the order of work, what interviewers score, and three complete builds: a bar chart, a line with a tooltip and a sparkline.
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.
Build, in under ten minutes, a horizontal bar chart of the three busiest stations from this inline data, sorted, with the values written at the ends of the bars: Quay 58584, Lantern 58090, Library 55536. Use d3.scaleLinear from 0 and d3.scaleBand.
Write nearestDay(days, date) that returns the day closest to a date, given an array of { date, rides } sorted by date, and returns undefined for an empty array. Test it with three dates, one before the first day.
Sketch, in words, what you would say in the first three minutes of the line-with-tooltip round: five questions you would ask the interviewer.
Explain it without notes
How do you split the first ten minutes of a live-coding chart round, and why in that order?
In the line chart with a tooltip, why do you need the data sorted, and what happens when it is not?
What edge cases do you handle in a bar chart without being asked?
What do you say out loud while coding?
Preview
Console
Nothing logged yet.Expected console output
last 30 days, drawn: 30 points
one point, drawn: 1 point, 0 line
no data, drawn: 0 points, label: No data
with a null: 2 points
flat data y: 3 points, clean: true