The Lumen dashboard as a React app (the files joined into one)
The project's imports of local files can't run in the preview, so the code of D3Box, 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 trips layer (about 400 lines in four more files) are not joined in: its box shows a one-line stand-in. In your project each file stays on its own, and the map works. Drag across the line, press Summer, or change the month.
Move the whole Lumen dashboard into React without losing a feature: the rides line is D3 maths with JSX marks, the stations chart is Recharts, and every earlier D3 chart is mounted unchanged through one small wrapper. It answers Arjun: the dashboard can now live inside the company's React app.
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.
Mount the drawFleetTreemap chart in a new box that loads fleet.json with useLoad(loadFleet), with a loading state and an error state.
Add a third box that shows a Loading… state and then Busiest day from daily.csv, using useLoad.
Explain it without notes
Which files stayed the same in the move to React, and why was that possible?
Why does each box have its own loading and error state?
How does D3Box follow the one-owner rule, and what does its cleanup do?
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: 1 line, axes drawn | Line chart of rides per day, 365 days fr
stations bars in July: 25
plain D3 charts mounted: stacked 1 heatmap 1 treemap 1
after Summer: 1 Jun to 31 Aug: 334,321 rides
brush drawn: true | stations note: Station numbers are monthly, so they add up every month the selection touches (Jun, Jul, Aug).