Six curves through the same nine days
Red dots are the data. basis is a smoothing curve: it is pulled towards the points and never touches them, which hides the outage almost completely.
d3.line and d3.area are functions that turn data into the d text of an SVG path. You choose how a point becomes x and y, which points exist at all, and how the points are joined: straight, stepped or smoothed.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write gapLine(rows, x, y) that draws rides as a line but leaves a gap for every row where rides is null or not a finite number. Test it on [{date: 1, rides: 5}, {date: 2, rides: null}, {date: 3, rides: 7}].
Make an area under the daily line: use d3.area() with y0 set to the bottom of the plot (y(0)) and y1 from the data.
Explain it without notes
What does d3.line()(data) return, and what do you do with it?
Why is a missing value that you set to null dangerous in a line chart, and what is the safe way to leave a gap?
How does d3.area differ from d3.line?
Console
(nothing was printed)Expected console output
rides: 3302 4132 3640 4226 439 4138 3180 3288 4090
linear lowest 439 highest 4226
monotoneX lowest 439 highest 4226
natural lowest 439 highest 4536
basis lowest 1687 highest 4090
cardinal lowest 439 highest 4372
step lowest 439 highest 4226
the data: lowest 439 highest 4226