Round 1: a bar chart that survives odd data
This is the answer to give when the interviewer asks "what if the data is empty?" after the happy path works: four inputs, four sensible pictures, no NaN.
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
five stations: 5 bars, first width 367.1
empty array: 0 bars, first width -, says No data
one station: 1 bars, first width 358.4
all zero: 5 bars, first width 0.0