The Data Visualization Roadmap

What you will learn, what you get, where you write code, and your first pictures in SVG and Canvas: a chart is numbers turned into shapes.

Learn SVG, the browser's vector drawing language: coordinates, shapes, paths, viewBox, text, groups and reuse, then give the Lumen dashboard a frame that scales.

Kinds of data, marks and channels, picking a chart from the question, how eyes group things, and how to tell an honest chart from a misleading one.

Build bar, line and scatter charts with plain JavaScript and SVG: margins, scales, axes and nice ticks by hand, so you know what every chart library does for you.

Move to your own computer with Node, Vite and npm, then load, parse, date-check, clean and summarise Lumen's real CSV and JSON, with loading, empty and error states.

Learn D3's one big idea: bind an array to elements with the data join, so a chart redraws correctly when the data changes: enter, update, exit and keys.

How D3 turns numbers, dates and categories into positions and colours, how it picks round tick numbers, and how to draw axes that stay honest.

Lines, areas, stacks, pies, histograms, heatmaps and legends with D3's shape generators: what each one builds, where it breaks, and when it misleads.

Pointer events, tooltips that stay on screen, finding the nearest point, filters, brushing and zooming, and charts that talk to each other, on a phone as well.

How D3 transitions really run, how to ease and time them, keep bars recognisable when the data changes, draw lines on, and respect people who want less motion.

Pick colour scales that tell the truth, test them for colour-blind readers and contrast, set type that survives scaling, support dark mode, and redraw charts when their box resizes.

Draw thousands of marks as pixels: the canvas and its context, paths, text, transforms, sharp high-DPI drawing, images, pixels, animation and accessibility.

Measure where SVG breaks, draw big data on canvas with D3, click marks you cannot select, show less to show more, and use workers and Konva.

Draw the stations on a map of Ardenvale, the fleet as a treemap and the busiest routes as a network, with D3's geo, hierarchy, force and chord tools.

Move the dashboard into a React app: D3 for the maths, React for the marks, refs for axes and zoom, and Recharts, visx, Chart.js and ECharts compared.

Make every chart work for people who cannot see it, cannot use a mouse, or cannot tell colours apart: names, descriptions, table twins, keyboard paths and an honest audit.

KPI tiles, filters, live updates, loading, empty and error states, performance budgets, export, print and tests: a dashboard that can stay on the wall all day.

From a dashboard that answers many questions to a page that makes one point: the finding first, annotations as the narrator, and a scroll-driven story built with position: sticky and IntersectionObserver.

Answer data-visualization interview questions with working code, build a chart live in 30 minutes, design a metrics dashboard, debug broken charts, and ship your own Lumen dashboard.