What d3.line writes: strings, edge cases and a gap
A missing value is not a gap. Only defined makes one: NaN draws a broken path, and null quietly becomes 0. The picture shows the lonely first point (a piece of one point draws nothing, so circles mark every point) and the joined rest.
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?
Preview
Console
Nothing logged yet.Expected console output
three points M0,10L20,40L40,25
empty array null
one point M5,5Z
NaN in the data M0,10L20,NaNL40,25
null becomes 0 M0,10L20,0L40,25
default digits M0.123,10L20.988,40
digits(1) M0.1,10L21,40
defined() gap M0,10ZM40,25L60,5L80,9
pieces in one path: 2