The year as a line with a gap, and a weekly band
Treating the outage day as undefined is a decision, not a default: say so on the chart (a note under it) so nobody thinks the app had no data that day.
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
days: 365 weeks: 53
pieces in the line path: 2
characters in the path: 4460
undefined days: [ '2025-08-14 439' ]
one path: 1 element; per month: 12 elements