A line chart is one path, with a gap and with NaN
The last two lines show the failure: the string contains NaN, the browser prints its error, and the chart is drawn only as far as Tuesday.
A path is a shape drawn by pen commands written in one d string: move, line, curve, arc, close. Every line chart is one path, and a bad number in the string stops the drawing at that point with a console error.
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.
Write a d string for a house outline: start at (20, 80), go to (20, 40), then (50, 10), then (80, 40), then (80, 80), then close. Use only M, L and Z.
Write a function pathFor(points) where points is a list of [x, y] pairs and returns the d string with M then L commands. What should it return for an empty list, and what would d="" draw?
Explain it without notes
What is the difference between L 60 20 and l 60 20?
Why does the browser print nothing when a path starts with L?
What do the two flags of an arc decide?
What happens to a chart line when one value is NaN?
Preview
Console
Nothing logged yet.Expected console output
Full week: M5,33L65,10L125,15L185,16L245,18L305,32L365,22
Thursday missing: 2 piece(s)
With n/a: M5,33L65,10L125,NaNL185,16L245,18L305,32L365,22
Error: <path> attribute d: Expected number, "M5,33L65,10L125,NaNL185,16L245,1…".