High Performance Data Visualisation with the M4 Algorithm
summary
Rendering a million points on Canvas becomes feasible by down‑sampling per pixel: M4: per‑pixel buckets keep min/max and left/right points so many redundant line segments are removed. Applied to a 1M‑point series this drops draw calls ~80% locally and ~45% in another example, cutting render from ~10s to ~100ms and, with precompute level‑of‑detail (≈7 levels), down to ~5ms per frame for >60fps. It uses Canvas (works with SVG/D3), but full real‑time million‑point updates remain impractical (~0.5s reprocess).
AI-written summary · about
chapters (14)
- 0:00High performance data visualisation intro
- 1:05Rendering million points challenge
- 2:11M4 algorithm for line simplification
- 3:54M4 reduces lines with fidelity
- 5:20Applying M4 to real dataset
- 6:42First results on AG Charts
- 7:23Bottlenecks after optimisation
- 8:04Precomputing M4 for zooming
- 9:09Final performance gains with LOD
- 9:53Summary and closing remarks
- 10:13Q&A: Accuracy vs performance tradeoffs
- 11:17Q&A: Optimal downsampling rate
- 12:00Q&A: Complementary techniques
- 12:43Q&A: Real-time data updates
related talks
37mPainting with Data
30mMaps Platform: A Deep Dive on Building for Performance and Scale
28mHTML Canvas 어디까지 써봤니
36mCanvas Pixel Transformation: Beauty comes slowly
58mRendering performance from the ground up
28mtorque.js internals: how to render 3M animated points on a map
33mPainting with Data
40mVisualizing Large Datasets with JavaScript Using Deck.gl