D3 + React = Awesome!

pexels-photo-577210.jpeg

Swizec Teller, a geek with a hat (@Swizec), recently gave an outstanding presentation about bringing React into D3. It was truly awesome! D3 and React fit together really well, and React improves a lot of things for D3: a component-like syntax, more understandable structuring, ease of modification and maintenance, and others.

For instance, you don’t need to use the complicated D3 data-setup functions, such as enter() anymore. This is because React takes over the DOM manipulation, and all you need to add are basic D3 shapes to render your data visually in a familiar React component structure. This makes things easier since React is declarative and resembles HTML. You can also take advantage of DevTools’ React panel on Chrome to easily see where all of your visual data components are being rendered.

But is it really worth adding another technology to D3? We still need to use D3 for anything number-related and any data calculations, and essentially any mouse/touch listeners, so what else does React bring?

A big React benefit is that structuring your D3 code into declarative components means that it is easier to manage your visualizations. For example, if you want to animate your D3 creations, React comes with special transition methods (see ReactTransitionGroup) like componentWillEnter() and componentWillLeave() that make managing D3 animation code a breeze. Declarative code means that you can understand more of the structure in one glance—in my professional career, that type of code has taken me a lot further than cramming all logical details into one place. If you think about it, React and other declarative frameworks have cut down on the use of jQuery, because a lot of jQuery was being used before to have code “jump” to the right place, uniting operations between JavaScript and the HTML. With React, your logic is much more closely wired into your DOM, requiring less code, and creating a nice level of organization and reusability.

With declarative, isolated chunks of code, it becomes simple to factor out reusable D3 pieces like histograms and labels, and reuse them in other places. It is usually easier to work with smaller pieces of code, and React components help you focus on what is going into components (props) and what is coming out of them (rendered HTML), which at times can be tricky with D3. React helps ensure that your D3 components act like you expect them to because it makes it easier to control what is going into them. Similarly, the output of a React component render() can be thought of as the state of your D3 data, which can be mutated when the incoming data changes.

The complexity of dynamically changing D3 visualizations also becomes easier to manage with React since D3 works well with React’s component lifecycle methods like componentWillMount(). In general, since React rendering is based on diffs, it makes it easier to implement dynamic visualization changes. D3 mouse events are also easier to work with in React.

If you are going to do some crazy D3 + React visualizations, don’t forget to remove data that doesn’t actually get rendered on the screen as it can slow the browser environment down, and of course, do use the paint flashing mode in Dev Tools to see the different GPU layers involved in your renderings!

Happy rendering!

Jeff Poyzner