All 365 days of 2025 as one path
The code is inside an async function because this example has no import, so it is a classic script. One path draws all 365 days; the sharpest spike down is 14 August.
A line chart is one SVG path: a string of commands that moves a pen to the first point and draws to every next one. You build that string from your data, put time on the x axis, and decide what to do with gaps, a single point and 365 values.
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 linePath(points) for an array of [x, y] pairs. What does it return for [[0, 10], [50, 20], [100, 5]], and for an empty array?
Turn the line into an area: what do you add to the path text so that it closes down to the baseline at y = 160, and which attribute do you change?
The rows come with date strings like "2025-06-02". Write the one line that turns them into timestamps, and say what you must not use if you want every day to be 24 hours long.
Explain it without notes
How do M and L turn a list of points into a line? What does the path text look like for three points?
Why does a line chart's path need fill="none"?
What are two ways to draw a series with missing values, and which one is honest?
Why is a path with a single M invisible, and what do you draw instead?
Preview
Console
Nothing logged yet.Expected console output
Points: 365 | segments: 364
Path text: 4067 characters, starts M0.0,138.2L1.5,121.3L3.0,120...
Lowest day: 2025-08-14 439 -> y = 171.0 of 190