Millions of Points!
Rendering Methods for Performant Datavis
Press to see interactive demonstrations
You know that friend who solves everything in Excel? That's SVG — elegant, approachable, and completely helpless the moment you hand it a million rows. 💀 Browsers have three fundamental ways to draw pixels: SVG (a retained-mode DOM of shapes), Canvas 2D (an immediate-mode CPU drawing API), and WebGL (raw GPU access via shaders). Everything else is an abstraction layer on top of those: D3 wraps SVG, while deck.gl — and similar libraries like Three.js or regl — wrap WebGL into a friendlier API. Each layer trades some raw performance for ease of use. Pick the wrong one and your laptop fan will let you know. This page is your cheat sheet.
| Characteristic | SVG with D3.js | Canvas 2D | WebGL | deck.gl |
|---|---|---|---|---|
| Sweet spot (points) | ≤ 10 000 | ≤ 100 000 | ≤ 10 000 000 | ≤ 5 000 000 |
| Learning threshold | Low | Medium | High | Medium |
| Memory usage | High (1 DOM node / point) | Low | Low | Low |
| CPU per frame | High (layout + draw) | High (draw calls) | Low | Low |
| GPU usage | None | Blit only | Full rasterisation | Full rasterisation |
| Hover / hit-testing | Free (CSS) | Manual | Manual (GPU pick) | Built-in |
| Animations | CSS transitions D3 transitions | Manual rAF loop | Manual shaders | GPU transitions |
| Zoom & pan | Via D3 zoom | Manual | Manual | Built-in |
| Code size (this demo) | 75 lines | 269 lines | 407 lines | 249 lines |
| Best for | Dashboards, small data | Custom drawing, games | Big data, science viz | Geospatial, big data |