4 ms·

What's the best way to integrate D3 and react? Or there's a better approach to charts/visualization in react than using D3?

by iyn 10y ago

mbostock 10y ago
I don’t know about the “best” way, but there are quite a few ways people have explored so far; Google [d3 react] for starters… D3 4.0 introduces a new option which is to use the D3 minilibraries d3-scale, d3-shape, d3-hierarchy etc. without d3-selection, so that you manipulate the DOM exclusively through React. (Of course I’m biased and still recommend D3’s data-join and transitions for animating between views, but now there’s more flexibility.)
- krebby 10y ago
  I agree, though I've found that the animation story with React for anything even mildly complex is still pretty terrible. My day job is building big data visualization applications with lots of D3 and React, so I have a lot of opinions about this. If you can get away with using CSS transitions or react-motion in your app, and you don't need D3's enter-update-exit selections, I feel React's declarative syntax is a much simpler mental model and is consistent with how the rest of my app works. But anything complex you'll need to drop out of React and build your DOM in D3, which has a very different notion of element lifecycles than React and doesn't allow you to reuse any of your other React components.
segphault 10y ago
D3 is a relatively low-level library for composing custom visualizations. There are some good high-level abstractions on top that integrate well with React and provide specific kinds of preconfigured charts. You might want to check out Uber's React Vis components: https://github.com/uber/react-vis https://github.com/uber/react-vis
saidajigumi 10y ago
You'll probably want to use D3 to build a React component. The component provides the API to the rest of your application, while D3 takes over dataviz heavy lifting inside the component. The most interesting aspect, which applies to apps beyond React, is likely to be respecting the D3 selections API[1], if needed. If you're already familiar with the ins and outs of selections, then I wouldn't expect any particular problems. [1] https://github.com/d3/d3/blob/master/API.md#selections-d3-selection https://github.com/d3/d3/blob/master/API.md#selections-d3-se...
donjh 10y ago
I've used this with pretty good success. https://github.com/skellyb/react-d3-wrap https://github.com/skellyb/react-d3-wrap
natmaster 10y ago
You might try http://web.horde.org/reactd3.org/ http://web.horde.org/reactd3.org/ It mostly uses React to interface with DOM and d3 v4.0 for the math, etc.
Androider 10y ago
I've recently been experimenting with pure SVG and React, which seems like a really good fit. Just draw SVG in your render function as naively as possible, and let React figure out the DOM transitions. Super easy to debug and reason about. Not being too familiar with D3, what would I get by adopting it? I would hope for higher level primitives, but the API seems imperative and stateful, which doesn't seem like a good fit with React. Would I end up duplicating and syncing my existing app model state into D3 state?
- danjc 10y ago
  We built a workflow design ui with svg under react and for the most part it is an absolute pleasure. Also pretty neat that you can treat the svg as an image/thumbnail. If you need the svg to be interactive, overlaying html works well too. Example at http://flowgear.me/s/1Ae7Pso http://flowgear.me/s/1Ae7Pso if you're interested. One thing to watch out for is that there are some svg object attributes (and some objects) that aren't declared in react.
  - monfera 10y ago
    You can generally use them with 'is', for example: <marker id={'bar'} is markerHeight={viewModel.height} refX={viewModel.xCenter} markerWidth={viewModel.width}>
- mbostock 10y ago
  Take a look at these introductions to d3-scale and d3-shape for why you might want visualization-related abstractions to help you with React: https://medium.com/@mbostock/introducing-d3-scale-61980c51545f https://medium.com/@mbostock/introducing-d3-scale-61980c5154... https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12 https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d...
- myrryr 10y ago
  You get speed. For animation, doing a dom diff each frame is really slow. D3 is way way faster. For data visualization, d3 has a lot of well built extensions. I tend to go in the other direction, I use d3 rather then react for the rest of the page, so I don't have any issues with integration.
snappy173 10y ago
I wrote a react component to map react props to D3 accessor functions, and then use the react lifecycle functions to trigger D3 redraw. http://bl.ocks.org/cpapazian/6228888157c39be85e9c http://bl.ocks.org/cpapazian/6228888157c39be85e9c (please excuse the coffeescript) However, it looks like the work to modularize D3 will make it much, much easier to have the render function produce SVG markup directly.
sthomas1618 10y ago
http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/ http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/ https://github.com/Olical/react-faux-dom https://github.com/Olical/react-faux-dom
Touche 10y ago
If you aren't able to easily use browser libraries in React it's time to rethink React, not rethink those browser libraries.
Swizec 10y ago
This is a shameless plug, but I like the approach in my book React+d3js -> http://swizec.com/reactd3js http://swizec.com/reactd3js Code samples in the book still use D3 v3, but my most recent experiments have been in v4. There's a lot of content in there on animation and transitions, which seems like the hard part. Currently figuring out how to do mass 10k+ element animations. Adding it to the book when I figure it out.
monfera 10y ago
The nice thing is that you can mix and match D3 components as needed, e.g. require certain layouts or other pure functions but use React in lieu of DOM binding (if that's preferred for one reason or another) and not use the D3 selections.
tlrobinson 10y ago
There are a number of libraries that bridge React and D3, but if you want to do it from scratch you have two primary options: 1. use D3's low-level components to calculate layouts then render directly as React components, typically SVG elements, e.x. https://jsfiddle.net/g3o6t9xh/1/ https://jsfiddle.net/g3o6t9xh/1/ 2. use React's component lifecycle methods to grab the component's DOM element and render full D3 visualizations, e.x. https://jsfiddle.net/6xw2wvbc/2/ https://jsfiddle.net/6xw2wvbc/2/
- tomgp 10y ago
  I've been using option 1. (without React) to leverage d3's functionality on the server side, outputting templated SVGs after using a layout function to create transformations scalings etc. on the data. I've taken this approach on a few project over the last year and am confident it's a pretty good way forward, mirroring as it does the approach d3 takes for pie charts, treemaps and so on. A simple example; the svg elements on this page https://ig.ft.com/sites/brexit-polling/ https://ig.ft.com/sites/brexit-polling/
tjholowaychuk 10y ago
You don't really need anything special to integrate it with React, just a little wrapper component which calls your update method. This example isn't DRY but whatever, gives you the idea: https://gist.github.com/tj/38b04d87949c4dbc3bda4579a108b634 https://gist.github.com/tj/38b04d87949c4dbc3bda4579a108b634

What's the best way to integrate D3 and react? Or there's a better approach to charts/visualization in react than using D3?

by iyn 10y ago

What's the best way to integrate D3 and react? Or there's a better approach to charts/visualization in react than using D3?

mbostock 10y ago

I don’t know about the “best” way, but there are quite a few ways people have explored so far; Google [d3 react] for starters… D3 4.0 introduces a new option which is to use the D3 minilibraries d3-scale, d3-shape, d3-hierarchy etc. without d3-selection, so that you manipulate the DOM exclusively through React. (Of course I’m biased and still recommend D3’s data-join and transitions for animating between views, but now there’s more flexibility.)

krebby 10y ago
I agree, though I've found that the animation story with React for anything even mildly complex is still pretty terrible. My day job is building big data visualization applications with lots of D3 and React, so I have a lot of opinions about this. If you can get away with using CSS transitions or react-motion in your app, and you don't need D3's enter-update-exit selections, I feel React's declarative syntax is a much simpler mental model and is consistent with how the rest of my app works. But anything complex you'll need to drop out of React and build your DOM in D3, which has a very different notion of element lifecycles than React and doesn't allow you to reuse any of your other React components.

segphault 10y ago

D3 is a relatively low-level library for composing custom visualizations. There are some good high-level abstractions on top that integrate well with React and provide specific kinds of preconfigured charts. You might want to check out Uber's React Vis components: https://github.com/uber/react-vis https://github.com/uber/react-vis

saidajigumi 10y ago

You'll probably want to use D3 to build a React component. The component provides the API to the rest of your application, while D3 takes over dataviz heavy lifting inside the component. The most interesting aspect, which applies to apps beyond React, is likely to be respecting the D3 selections API[1], if needed. If you're already familiar with the ins and outs of selections, then I wouldn't expect any particular problems. [1] https://github.com/d3/d3/blob/master/API.md#selections-d3-selection https://github.com/d3/d3/blob/master/API.md#selections-d3-se...

donjh 10y ago

I've used this with pretty good success. https://github.com/skellyb/react-d3-wrap https://github.com/skellyb/react-d3-wrap

natmaster 10y ago

You might try http://web.horde.org/reactd3.org/ http://web.horde.org/reactd3.org/ It mostly uses React to interface with DOM and d3 v4.0 for the math, etc.

Androider 10y ago

I've recently been experimenting with pure SVG and React, which seems like a really good fit. Just draw SVG in your render function as naively as possible, and let React figure out the DOM transitions. Super easy to debug and reason about. Not being too familiar with D3, what would I get by adopting it? I would hope for higher level primitives, but the API seems imperative and stateful, which doesn't seem like a good fit with React. Would I end up duplicating and syncing my existing app model state into D3 state?

danjc 10y ago
We built a workflow design ui with svg under react and for the most part it is an absolute pleasure. Also pretty neat that you can treat the svg as an image/thumbnail. If you need the svg to be interactive, overlaying html works well too. Example at http://flowgear.me/s/1Ae7Pso http://flowgear.me/s/1Ae7Pso if you're interested. One thing to watch out for is that there are some svg object attributes (and some objects) that aren't declared in react.
- monfera 10y ago
  You can generally use them with 'is', for example: <marker id={'bar'} is markerHeight={viewModel.height} refX={viewModel.xCenter} markerWidth={viewModel.width}>
mbostock 10y ago
Take a look at these introductions to d3-scale and d3-shape for why you might want visualization-related abstractions to help you with React: https://medium.com/@mbostock/introducing-d3-scale-61980c51545f https://medium.com/@mbostock/introducing-d3-scale-61980c5154... https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12 https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d...
myrryr 10y ago
You get speed. For animation, doing a dom diff each frame is really slow. D3 is way way faster. For data visualization, d3 has a lot of well built extensions. I tend to go in the other direction, I use d3 rather then react for the rest of the page, so I don't have any issues with integration.

snappy173 10y ago

I wrote a react component to map react props to D3 accessor functions, and then use the react lifecycle functions to trigger D3 redraw. http://bl.ocks.org/cpapazian/6228888157c39be85e9c http://bl.ocks.org/cpapazian/6228888157c39be85e9c (please excuse the coffeescript) However, it looks like the work to modularize D3 will make it much, much easier to have the render function produce SVG markup directly.

sthomas1618 10y ago

http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/ http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/ https://github.com/Olical/react-faux-dom https://github.com/Olical/react-faux-dom

Touche 10y ago

If you aren't able to easily use browser libraries in React it's time to rethink React, not rethink those browser libraries.

Swizec 10y ago

This is a shameless plug, but I like the approach in my book React+d3js -> http://swizec.com/reactd3js http://swizec.com/reactd3js Code samples in the book still use D3 v3, but my most recent experiments have been in v4. There's a lot of content in there on animation and transitions, which seems like the hard part. Currently figuring out how to do mass 10k+ element animations. Adding it to the book when I figure it out.

monfera 10y ago

The nice thing is that you can mix and match D3 components as needed, e.g. require certain layouts or other pure functions but use React in lieu of DOM binding (if that's preferred for one reason or another) and not use the D3 selections.

tlrobinson 10y ago

There are a number of libraries that bridge React and D3, but if you want to do it from scratch you have two primary options: 1. use D3's low-level components to calculate layouts then render directly as React components, typically SVG elements, e.x. https://jsfiddle.net/g3o6t9xh/1/ https://jsfiddle.net/g3o6t9xh/1/ 2. use React's component lifecycle methods to grab the component's DOM element and render full D3 visualizations, e.x. https://jsfiddle.net/6xw2wvbc/2/ https://jsfiddle.net/6xw2wvbc/2/

tomgp 10y ago
I've been using option 1. (without React) to leverage d3's functionality on the server side, outputting templated SVGs after using a layout function to create transformations scalings etc. on the data. I've taken this approach on a few project over the last year and am confident it's a pretty good way forward, mirroring as it does the approach d3 takes for pie charts, treemaps and so on. A simple example; the svg elements on this page https://ig.ft.com/sites/brexit-polling/ https://ig.ft.com/sites/brexit-polling/

tjholowaychuk 10y ago

You don't really need anything special to integrate it with React, just a little wrapper component which calls your update method. This example isn't DRY but whatever, gives you the idea: https://gist.github.com/tj/38b04d87949c4dbc3bda4579a108b634 https://gist.github.com/tj/38b04d87949c4dbc3bda4579a108b634