The same tree as a picture
A rect with rx equal to half its width looks like a circle: one shape, two looks.
Your dashboard will grow into a small project with a clear folder layout: the page, the data, the code for loading data, one file per chart, shared parts and styles. Here is the final layout, what each part is for, and how it grows from a single index.html.
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.
Add a third column to the printed tree: the phase in which each item first appears (use 0 for index.html, 4 for package.json and the data, 16 for tests).
In the second example, colour JavaScript files differently from other files (hint: name.endsWith(".js")).
Explain it without notes
Why does each chart get its own file?
What goes in public/data/lumen/, and why is its address kept in one setting?
You fell behind in Phase 6. How do you catch up?
Preview
Console
Nothing logged yet.Expected console output
Items drawn: 14 | deepest level: 3