Efficient Data Visualisation with React and SVG

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

See how far simple charts in React and SVG can take you, and where their limits start to surface. We'll explore the sweet spot of using React's declarative model with plain SVG elements and a touch of D3 for utility functions like scaling and path generation, before reaching the performance and complexity ceilings that call for something more robust.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

The speaker is Ido, a full stack developer with over a decade of experience, currently working at agigrid.

The main topic of Ido's talk is about the benefits of building data visualization components with React and SVG without relying heavily on libraries.

Building components themselves allows developers full control over structure, style, and behavior, ensures compatibility with specific data models, avoids unnecessary features, reduces bundle weight, and eliminates integration headaches.

SVG is declarative, integrates well with React as it is DOM-based, easier to work with CSS and DOM events, and leverages browser capabilities for accessibility.

Libraries can add unnecessary bundle weight, cognitive overhead from learning new APIs, integration headaches, and may not support specific use cases efficiently.

D3 can be used as a utility library for data mapping and transformation, letting React handle rendering, which avoids anti-patterns and ensures React's DOM control.

D3's utility features help in mapping values to geometry and creating paths, while React manages rendering, maintaining efficient DOM operations.

Developers should opt for libraries when dealing with performance issues, complex interactions, multiple configuration needs, or when developing a product requiring extensive features.

Yes, D3 is very tree-shakeable, and its modular structure allows developers to use only the parts they need to keep the bundle size small.

Ido uses React, SVG, and a few D3 libraries such as D3 array, D3 scale, and D3 shape for building data visualization components.

 Ido Moshe
Ido Moshe
27 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Ido, a full stack developer, discusses the benefits of building data visualization components from scratch using React, SVG, and minimal D3. Understanding basic SVG shapes, group elements, and SVG's declarative nature. Exploring SVG's compatibility with CSS, DOM events, and browser features. Highlighting pitfalls in integrating D3 with React and separating data transformation utilities. Utilizing D3 libraries for data manipulation and creating Sparkline components. Enhancing components with markers, CSS styling, interactivity, transitions, and pie charts. Utilizing CSS for animations in data visualization and gauge visualization with needle animation. Defining SVG components, interactions, and considerations for DIY vs. library integration. Exploring D3 axis, AG charts, and time-based animation.

1. Benefits of Building Data Visualization Components

Short description:

Ido, a full stack developer, discusses the benefits of building data visualization components from scratch using React, SVG, and minimal D3. By avoiding heavy libraries, developers gain control over structure, style, and integration, reducing bundle weight and cognitive overhead. Custom solutions tailored to specific use cases are emphasized, highlighting the efficiency of self-built components.

Thank you. Hi, everyone. Hope you're having a great time. My name is Ido. And as the intro already said, I'm a full stack developer with over a decade of experience working mostly in start-ups. These days I'm working at agigrid where I'm working on our charting tools, agicharts, complete visualization and community packages. But today I'm not here to talk about agicharts, I'm here to talk about simplicity. And why actually there are some cases when you don't need to reach out for a library immediately, there's a benefit in building all of these data visualization components for yourself.

So in this talk today, I want to show you what exactly we can achieve by using just React and SVG. We are going to use a touch of D3 which we'll get to in a moment. But no heavy lifting libraries, no data visualization libraries, like we're going to use D3 as a utility library actually, and I'm going to let him do the hard work, but let React do the hard work for us. So first of all, why not use a library? You get a lot of benefits from building things by yourself. First of all, you get full control over the structure, the style and behavior of your library, and it gets to work perfectly with your data model, like you can make sure that it works precisely with what is important to you and not support any other mapping or unnecessary features to your specific use case, and other than that, no integration headaches that usually come with adopting a new library.

And that's not even mentioning the traditional downsides of a library that you get every time you adopt no library. You get a lot of benefits from the database, such as the unnecessary bundle weight, which is especially important when we're talking about data visualization tools, which tends to be very heavy, and not a lot of them support tree shaking, and even those that do don't support it very well. And the cognitive overhead that comes from learning a new API or adapting new abstractions to your own abstractions in your code, all of the pre-baked assumptions that come with choosing a library, that at some point, you're going to have to start going through hoops just to try to make things work your way. And generally speaking, it's an overkill for most basic use cases.

2. Building Data Components with React and SVG

Short description:

Discussing the minimalistic nature of SVG for 2D graphics and the benefits of using React and SVG with a touch of D3 for data visualization. Understanding basic SVG shapes like lines, rectangles, circles, ellipses, polylines, polygons, and paths. Exploring group elements for styling, view box for coordinate system positioning, and SVG's declarative nature that integrates well with React.

Unless you actually need a complete data visualization library, because you need multiple chart types or multiple ways to configure it, theming support and things like that, there's probably an overkill to your use case. So today what we're going to do is we're going to be building a library that will repel data components in React and SVG, as I said, with a little bit of D3, which I'll talk about in a minute.

So first of all, let's demystify SVG a little bit, especially if it's new for you so you'll be able to understand the code examples that we'll go through. SVG is scalable vector graphics, in case you don't know, which is basically a mark-up-based language to describe 2D graphics. The nice thing about SVG is that it's a very, very minimalistic language. Basically, it supports only a handful of shapes. All of them are on the screen right now. So basically, right now, you already know, like, more than 50% of SVG. It's already in your hands.

We have a line, a rectangle, a circle, and an ellipse. We also have a polyline, which is a line composed of multiple points, a polygon, which is basically the same thing. Only the first and last points will connect to create an enclosed shape. And we have our SVG path, which is the most versatile of all of them. We're not going to get into the syntax itself, but basically, it allows you to describe any shape you want using lines and curves. We also have in this example, you can see a group element, which allows us to style multiple shapes at the same time. You can also see the styling itself, which is mostly strokes and fields, the equivalent to borders and backgrounds that we get from HTML. And at the top, I will take one minute to talk about the view box that you can see on the SVG element that basically, the value itself is X, Y, width and height of what is the camera position of our coordinate system.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

SVGs to Make Your Blog Stand Out
React Summit Remote Edition 2021React Summit Remote Edition 2021
36 min
SVGs to Make Your Blog Stand Out
Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.
The Language of Shapes: Understanding the SVG Path
React Summit 2020React Summit 2020
32 min
The Language of Shapes: Understanding the SVG Path
This Talk introduces the SVG Path element, exploring its commands and potential. The speaker simplifies the language of shapes by grouping commands together and finding alternative ways to define arcs. They also present a path editing tool that allows for easy manipulation and visualization of path data. The Talk concludes with discussions on performance, limitations, recommended resources, SVG morphing, and the FlubberJS library for path interpolation.
Hacking an e-Reader to Show My Tea Menu With JSX
React Day Berlin 2023React Day Berlin 2023
7 min
Hacking an e-Reader to Show My Tea Menu With JSX
Watch video: Hacking an e-Reader to Show My Tea Menu With JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
Graphics, as a Function of State / Graphic = fn(state)
React Summit Remote Edition 2021React Summit Remote Edition 2021
15 min
Graphics, as a Function of State / Graphic = fn(state)
Anil Durman, engineer at the New York Times, discusses the role of graphics in the context of state. He highlights the work done by his team in helping people understand the news through new formats and pages. The team is hiring for various tech roles. By night, Anil is a creative coder exploring the intersection of creativity and code, and his latest project, Good Graphics, focuses on UI as a function of state, React components, and SVGs. He demonstrates how components can be updated based on state, allowing for declarative graphics. Anil also showcases how nested circles and grids can be used to create complex systems in React, enabling dynamic and reactive graphic designs.