The Phase 15 dashboard (the files joined into one)
The project's imports of local files can't run in the preview, so the code of D3Box, describe.js, table-twin.js, RidesLine, StationsBar, App and the plain stacked, heatmap and treemap charts is joined into one example, and the loaders are short stand-ins that read the same data. The station map and its rides layer (station-map.js, trips-canvas.js and their helpers) are not joined in: its box shows a one-line stand-in, as in Phase 14. In your project each file stays on its own, and the map has its description and tables too. The Console prints what the page offers a screen reader, and presses a key on the day reader.
Give every chart on the dashboard a name, a description written from its data and a table twin, add a day reader and a one-stop bar list for the keyboard, and say changes aloud. It answers Meera: she can now get each chart's answer without seeing it.
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 description to a new chart in one line, using the helpers. Which two calls are needed for a plain D3 chart, and which for a React one?
Why does StationsBar compare the new words with the last ones before it announces?
Explain it without notes
Why are the descriptions pure functions of the rows and not text in the components?
How does a React component use a vanilla helper such as tableTwin without the two fighting over the DOM?
Why does the stations chart need both a hidden Recharts SVG and a row list?
What does the dashboard still not do for Meera?
Preview
Console
Nothing logged yet.Expected console output
key numbers: 365 | 933,651 | 18 Jul 2025 (4,380) | 14 Aug 2025 (439) | 0
rides line: img "Line chart of rides per day"
description: 365 days, from 1 Jan 2025 to 31 Dec 2025. It starts at 1,193 rides, peaks at 4,380 on 18 Jul 2025 and ends at 910. The quietest day is 14 Aug 2025, with 439 rides (app down).
table twin rows: 12 | Tab stops on the svg: 0
stations bars: group "Rides per station in Jul, bar chart"
rows: 25 | Tab stops among them: 1 | table twin rows: 25 | svgs with a tabindex: 0
stations-stacked: Stacked bar chart of rides per month by district | twin rows: 12
june-heatmap: Heatmap of rides per hour in June, days down and hours across | twin rows: 30
fleet-treemap: Treemap of the fleet by district and station | twin rows: 25
day reader after one ArrowLeft: Tue 30 Dec 2025: 1,446 rides
after Summer: 1 Jun to 31 Aug: 334,321 rides
spoken: Rides per station in the selected dates, bar chart. 25 stations, 334,321 rides in all. Quay is busiest with 21,010 and Windmill is quietest with 5,305. Next after Quay: Lantern 20,406, Library 19,653.