Phase 12Advanced13 of 19 in Data Visualization

Big Data: Canvas, Hit-Testing and Performance

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.

Every chart so far had a few hundred marks. A year of trips has hundreds of thousands, and the page freezes. This phase starts by measuring: how many elements the browser can keep, and where SVG stops being the right tool.

Then you move the same D3 scales and shapes onto a canvas, and fix what canvas takes away: there is nothing to click, so you find the mark under the pointer yourself, with isPointInPath, a hidden colour canvas, a quadtree and a Delaunay diagram. You learn to show less to show more (sampling, binning, level of detail), to keep slow work off the main thread with workers and OffscreenCanvas, and when a scene graph such as Konva is worth its cost.

At the end the dashboard gets a station map that stays fast with a year of rides under it, lets Priya click a station by mouse, finger or keyboard, and shows how long each layer took to draw.

Phase 12 · the story

Priya, operations lead

“With the whole year on the map the page freezes, and I can't click a station to see what it did.”

Arjun's trips canvas from last time was a hit: ten thousand June trips as one picture. Priya wants the same for the whole year, and she wants to click a station and read its numbers, because that is how she plans where the vans go.

The first try is a disaster. Drawing every ride as a page element makes the browser stall for seconds, and a canvas, which draws fast, has no stations to click at all: it is one flat picture. Priya waits, clicks, and nothing happens.

Arjun measures instead of guessing. He finds where the page slows down, draws a count of rides instead of every ride, and builds the one thing canvas lacks: a way to ask which station is under the pointer. By the end of this phase the map is fast, honest about what it aggregated, and clickable.

In this phase

You will learn

Measure SVG against canvas on your own device and choose with numbers, not habit
Draw with D3 scales and shapes on a canvas, and find the mark under a click with a quadtree, colour picking or isPointInPath
Show a year of data by sampling or counting, and say what you left out
Keep heavy work off the main thread with a worker, and decide when Konva is worth it

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/utils/hit-test.js
src/charts/station-map.js
src/charts/trips-canvas.js
src/main.js

0/7 · 0%

7 topics ~3 h 15 code blocks & diagrams

Start with the first topic

12.1

Measuring SVG vs Canvas

SVG keeps one page element per mark, and the browser pays for every one. Canvas keeps one element and a grid of pixels. You measure the difference on your own device and learn where each one breaks before you choose.

21 min 3 code practice

12.2

D3 Drawing to Canvas

D3's scales, shapes and geo paths work without SVG. Give a shape generator a canvas context and it draws instead of returning a string. What you lose is the data join: on canvas you keep your own state and redraw it all.

22 min 2 code practice

12.3

Hit-Testing: Clicking Things on a Canvas

A canvas draws pixels and keeps no shapes, so it cannot tell you what was clicked. You find the mark under the pointer yourself, with the browser's shape test, a hidden colour canvas, a quadtree or a Delaunay diagram.

28 min 3 code practice

12.4

Showing Less to Show More

Past a point, drawing every record makes a worse chart: dots pile on dots and the page slows down. Sampling, counting in bins and zooming into detail show more truth with less drawing. The rule is never to drop data silently.

25 min 2 code practice

12.5

Workers and OffscreenCanvas

Your script, layout and painting share one thread, and a long loop freezes all three. A Web Worker runs code on another thread, and OffscreenCanvas lets that thread draw. You learn when this helps, how it fails and when it is not worth it.

23 min 2 code practice

12.6

When You Need a Scene Graph: Konva

A scene graph keeps shapes as objects with events, dragging and layers, and draws them onto canvas for you. Konva is one. It saves the hit-testing and redraw code you wrote by hand and costs memory per shape. Choose it when users edit the picture.

22 min 2 code practice

12.7

Build: A Year of Trips That Stays Fast

Add a station map with a whole year of rides under it. The rides are counted and drawn as one dot per hundred, the map is on layers, a quadtree finds the station under a mouse, a finger or the keyboard, and the page shows how long each layer took to draw.

34 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Which circle is under the pointer?

Two circles overlap on a canvas. Write pick(x, y) so it returns the name of the circle at that point, or null if there is none.

Beginner

The nearest station, with a reach

Build a quadtree of three stations and set window.nearest(x, y, reach).

Intermediate

Do the sum in a worker

The page adds the numbers 1 to 3,000,000 on the main thread, which freezes it for a moment.

Advanced

Put the hover ring on its own layer

Two canvases are stacked: #base holds a station dot and #over is on top. The ring is drawn on the base canvas, which repaints the dot on every move.