What you will use in this project
- Parsing CSV in the browser
- Aggregating data with group by, reduce, map
- Working with Chart.js datasets and updates
- Dashboard layout patterns
Web Project: Analytics Dashboard
Complete each step in the editor and watch the result as your page takes shape.
Build Analytics Dashboard, step-by-step
Build an interactive data visualization dashboard.
Charts update live as you filter.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 11 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +290 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Page regions Four top-level containers present (h1, #filters, #kpis, #charts) | 5 pts |
| 2 | Filter controls Category and date filters present | 15 pts |
| 3 | KPI cards Four KPI cards with .kpi-value | 10 pts |
| 4 | Chart canvases Bar, line, pie canvases present | 10 pts |
| 5 | Style the dashboard CSS uses real layout and media query | 5 pts |
| 6 |
Fetch and parse CSV
|
20 pts |
| 7 | Filter the rows Filter function applied to rows | 5 pts |
| 8 | Render KPIs KPI values rendered | 5 pts |
| 9 | Bar chart Bar Chart instance created | 5 pts |
| 10 | Line and pie charts Bar, line, pie Chart instances | 15 pts |
| 11 |
Wire the filters
|
5 pts |
