Canvas
Fast where it matters, honest about the envelope.
Zoom-level-driven drawing renders seats only when they matter, D3 data binding keeps updates surgical, and block-based strategies carry venues into the thousands of seats.
Sound familiar?
The slideshow pan
A map that stutters when panned reads as broken, whatever the benchmark says. Level-driven drawing keeps interaction fluid.
10,000 nodes on page one
Rendering every seat before anyone zooms is how browsers melt. Seats draw in block context, when they're readable.
Pinch-zoom pain on phones
Most tickets sell on mobile. D3-zoom gestures and surgical updates keep phones responsive.
Engineering, not marketing, about speed
01Drawn when readableSeats render within block context as you zoom. The DOM holds what the eye can use.
02Surgical data bindingD3 joins update what changed. A hold flips one circle, not the tree.
03A stated envelopeOptimal under five thousand seats, recommended maximum under ten, and patterns for going bigger.
04Block-based strategiesSplitting huge venues into blocks and lazy-loading sections is a documented pattern, not an adventure.
05Reflow on demandContainer resized? reflow() recomputes layout without a reload.
06Platform scale when you need itStadium onsales pair the renderer with the platform's block-scoped read models and realtime bus.
Why it stays smooth
- 01Level-gated renderingOverview draws structure; seats appear at block level.
- 02Minimal updatesState changes touch only the affected seats.
- 03Split for scaleBlock-based rendering and lazy sections carry the biggest rooms.
Stress-test the demo
Pan, zoom, and select at scale, live.