WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe • Jul 10, 2026 • Session details

Can SVG be fast? Rendering a scatter chart with over 10k points

Bernardo Belchior

You don't need canvas to fix sluggish charts. Batching 10k data points into a single SVG path drastically reduces DOM bloat and triples rendering speeds.

Pause
Mute Enter Fullscreen
#1 about 1 min

Exploring the Material UI and Base UI ecosystem

Recent updates to underlying UI libraries set the context for exploring new charting component capabilities.

#2 about 2 min

Identifying performance bottlenecks in large data scatter charts

Rendering tens of thousands of data points reveals significant lag due to individual SVG circles.

#3 about 2 min

Profiling React render cycles and DOM creation bottlenecks

Analyzing massive marker payloads reveals that DOM element generation severely outpaces framework scripting operations.

#4 about 1 min

Evaluating canvas rendering tradeoffs against SVG styling features

Resorting to canvas drawings accelerates rendering speeds but fundamentally sacrifices critical CSS styling pipelines.

#5 about 2 min

Decreasing visual render time by batching SVG paths

Consolidating individual markers into single batched SVG paths drastically decreases DOM nodes while maintaining standard styling.

#6 about 2 min

Managing interactivity tradeoffs primarily through robust spatial indexing

Retaining interactivity on batched elements requires custom spatial indices and layered element replicas for cursor states.

Matching moments

4:34 min

Migrating core design tools from SVG to HTML canvas

Elena Torró · Coffee With Developers

6:16 min

Integrating visual elements using SVG and HTML canvas

Johanna Schmidt · LIVE

4:52 min

Evaluating performance impacts of advanced CSS animations

Aaron T. Grogg · Coffee With Developers

5:56 min

Rendering high-performance data visualizations in web browsers

Chris Heilmann +3 · LIVE

3:07 min

Rendering visual data with web components and Chart.js

André Dietrich André Dietrich +1 · Europe 2026 Virtual

3:21 min

Performance considerations when rendering long lists natively

Adam Klein · World Congress 2021

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
2 months ago

Building the Nervous System of AI - Michael Kagan (NVIDIA)

Michael Kagan, Sead Ahmetović

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote thumbnail
19:41
2 months ago

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote

Christian Heilmann

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend thumbnail
32:06
2 months ago

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend

David vonThenen

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes thumbnail
35:13
2 months ago

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes

Irina Branovic

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬 thumbnail
24:23
2 months ago

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬

Jeremy Murray

Angstfreude - AI and Corporate Culture - The Thrill and the Threat thumbnail
30:26
2 months ago

Angstfreude - AI and Corporate Culture - The Thrill and the Threat

Axel Ebert, Karin Krobath

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager at GitHub

James Clancey
Open session

World Congress 2026 North America

September 25, 2026 · 16:10–16:40

Stage 4

Speed up your CI/CD pipelines by caching build & runtime artifacts

Thijs Feryn

Technical Evangelist at Varnish Software

Thijs Feryn
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–15:40

Outdoor Stage

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare

Related videos

Web-based Information Visualization thumbnail
43:52
LIVE • almost 6 years ago

Web-based Information Visualization

Johanna Schmidt

A journey of a long list in React thumbnail
43:08
World Congress 2021 • about 5 years ago

A journey of a long list in React

Adam Klein

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More thumbnail
1:09:56
LIVE • 7 months ago

WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More

Chris Heilmann, Daniel Cranney, Andrew Burnett-Thompson, David Burleigh

Rendering Design Software in the Browser at Penpot thumbnail
52:04
Coffee With Developers • about 1 year ago

Rendering Design Software in the Browser at Penpot

Elena Torró

WeAreDevelopers LIVE - The Shape of SVG to Come! thumbnail
59:56
LIVE • 2 months ago

WeAreDevelopers LIVE - The Shape of SVG to Come!

Chris Heilmann, Daniel Cranney, Lionel Péramo

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.