Command Palette

Search for a command to run...

Hectal

Data Visualization and 2D Graphics · SVG, Canvas, D3, charts and dashboards

Turn numbers into pictures people understand,
from one hand-drawn bar to a live, fast, accessible dashboard.

Start with shapes: a chart is numbers turned into lengths, positions and colours. You need some HTML, CSS and JavaScript, and nothing else: every word is explained in plain English, and the first phases need no install at all. You build one product all the way, the operations dashboard of Lumen Bikes, a made-up bike share in the island city of Ardenvale, and every phase starts with a person from its team who needs something. You draw by hand in SVG and Canvas, learn which chart answers which question, load and clean real data, then let D3 do the arithmetic: scales, axes, shapes, joins, interaction and motion. Then the hard parts: colour and honesty, Canvas for huge data, maps and networks, charts in React with Recharts and visx, accessibility for screen-reader users, and a live production dashboard. Every example runs on the page with real D3 and real data, shows what happens when it goes wrong, and every exercise checks your chart for you.

Start from zero The full roadmap
Phases
19
Topics
127
Hours
62
Diagrams
62
Exercises
700

By the end you can

What this course makes you able to do

  • Draw any common chart from scratch in SVG or Canvas, and choose the right chart for the question
  • Load, clean and summarise real data in the browser, with every loading, empty and error state handled
  • Use D3 7 properly: selections and the data join, scales and axes, shapes, layouts, maps, interaction and motion
  • Keep charts honest, readable, themed and responsive, and accessible to screen-reader and keyboard users
  • Draw 100,000+ points smoothly with Canvas, hit-testing and workers, and build charts in React with Recharts and visx
  • Build and ship a live operations dashboard, and answer chart and dashboard questions in frontend interviews

Beginner → Advanced

The curriculum, by level

Beginner
  1. 0Start Here: A Chart Is Just Shapes7 topics · ~2 h
  2. 1SVG from Zero7 topics · ~3 h
  3. 2Seeing Data: Choosing the Right Chart6 topics · ~3 h
  4. 3Charts by Hand, No Library6 topics · ~3 h
  5. 4Data in the Browser7 topics · ~3 h
Intermediate
  1. 5D3 Core: Selections and the Data Join7 topics · ~2 h
  2. 6Scales and Axes7 topics · ~3 h
  3. 7Shapes and the Chart Catalogue7 topics · ~3 h
  4. 8Interaction7 topics · ~3 h
  5. 9Motion6 topics · ~3 h
  6. 10Colour, Typography and Responsive Charts6 topics · ~4 h
  7. 11Canvas 2D in Depth7 topics · ~3 h
Advanced
  1. 12Big Data: Canvas, Hit-Testing and Performance7 topics · ~3 h
  2. 13Maps, Hierarchies and Networks7 topics · ~3 h
  3. 14Charts in React7 topics · ~4 h
  4. 15Accessible Charts7 topics · ~5 h
  5. 16Dashboards in Production8 topics · ~7 h
  6. 17Storytelling and Scrollytelling6 topics · ~3 h
  7. 18Interviews and Capstone5 topics · ~3 h

Where should I start?

Pick a path for your goal

Complete beginner

You know some HTML, CSS and JavaScript and have never drawn a chart. Start here: no install for the first phases.

  1. 10 · Start Here: A Chart Is Just Shapes
  2. 21 · SVG from Zero
  3. 32 · Seeing Data: Choosing the Right Chart
  4. 43 · Charts by Hand, No Library
  5. 54 · Data in the Browser

Job-ready chart developer

You can build web pages and need to ship real charts and dashboards with D3 and React.

  1. 15 · D3 Core: Selections and the Data Join
  2. 26 · Scales and Axes
  3. 37 · Shapes and the Chart Catalogue
  4. 48 · Interaction
  5. 510 · Colour, Typography and Responsive Charts
  6. 614 · Charts in React
  7. 716 · Dashboards in Production

Senior and interviews

You build charts already and want big data, accessibility, production depth and system design.

  1. 112 · Big Data: Canvas, Hit-Testing and Performance
  2. 213 · Maps, Hierarchies and Networks
  3. 315 · Accessible Charts
  4. 416 · Dashboards in Production
  5. 518 · Interviews and Capstone