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:21 min

Performance considerations when rendering long lists natively

Adam Klein · WWC 2021

7:31 min

Resolving overplotting and color saturation issues in dense visualizations

Radovan Kavický · LIVE

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare
Open session

World Congress 2026 North America

The Geometry of Incidents: What User-Impact Shapes Reveal About Platform Architecture

Bala Subrahmanyam Kambala

Staff Platform Engineer at Oracle Cloud Infrastructure

Bala Subrahmanyam Kambala

Related videos

Web-based Information Visualization thumbnail
43:52
LIVE • over 5 years ago

Web-based Information Visualization

Johanna Schmidt

A journey of a long list in React thumbnail
43:08
WWC 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
WWC 2025 • 12 months 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 • 6 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 - Speeding up with WebGPU thumbnail
57:38
LIVE • 3 months ago

WeAreDevelopers LIVE - Speeding up with WebGPU

Chris Heilmann, Daniel Cranney, Sylwia Laskowska

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.