Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 3.6 — Build: Rides This Year, Hand-Drawn
Data Visualization · Example 1 of 1

The Lumen Bikes dashboard after Phase 3

This is the whole lumen-dashboard/index.html after Phase 3 (the Phase 2 page plus the year's line), exactly as in the Files section. The data is embedded, so it runs without fetch.

Draw all 365 days of Lumen's 2025 rides as a line chart with hand-made axes inside the dashboard's index.html. It answers Arjun's request: the team now knows what a chart library does, because they did it by hand.

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.

01

Add the busiest day (18 July, 4,380 rides) as a second note, in the same style as the outage.

02

What makes an all-null array show the empty message?

Explain it without notes

01

Which pieces from Topics 3.2 to 3.5 does drawRidesLine use?

02

Why is the data embedded in this phase?

03

Name three things you wished a library did for you.

The Lumen Bikes dashboard after Phase 3

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Days: 365 | total rides: 933,651
Week bars: 7
Line segments: 364
Chart shape (height / width): 0.553 at any size
Titled boxes: 4
Low stations: 5
Emptiest first: true
Plan rows: 7