4 ms·

Looks really nice. Since I started using React, though, I've wanted to find a similarly nice charting library that is reactive instead -- that renders to a Rea

Looks really nice. Since I started using React, though, I've wanted to find a similarly nice charting library that is reactive instead -- that renders to a React component with SVG instead of mutating the DOM directly. This would help minimize the number of DOM updates when just a few data points change, and seems like it would fit better within a React app. (This approach unfortunately rules out D3, which mutates the DOM directly and doesn't have smart diffing AFAIK). Anyone know of a reactive charting library?

BinaryBullet 12y ago
There's https://github.com/facebook/react-art https://github.com/facebook/react-art which I haven't used yet. One of the problems with react v0.10 is that it doesn't yet support all SVG attributes: http://facebook.github.io/react/docs/tags-and-attributes.html http://facebook.github.io/react/docs/tags-and-attributes.htm... For instance, the other day I was trying to make a responsive chart, but couldn't due to react not supporting the 'viewbox' attribute. I then tried npm installing from the repo directly, which didn't work b/c they have a custom npm build script that needs to be ran (and after some hacking, I was still running into weird errors w/ v0.11-alpha). Anyways, react seems like it will be very interesting for svg charting once they fully support all svg attributes.
fletchowns 12y ago
Isn't SVG part of the DOM though?
- nilkn 12y ago
  I've never used React, but I believe it maintains a virtual DOM and uses it to compute the minimal number of changes that need to be enacted on the browser's DOM. So basically, it's precisely because SVG is part of the DOM that it could potentially be a good application of React.
  - haberman 12y ago
    Exactly. The React paradigm is to never mutate the DOM directly, but instead let React mutate it. I wrote a friendly intro here: http://blog.reverberate.org/2014/02/react-demystified.html http://blog.reverberate.org/2014/02/react-demystified.html
aristus 12y ago
We use react with D3 in MemSQL Ops. http://memsql.com/ops http://memsql.com/ops
- reverius42 12y ago
  How do you reconcile the direct DOM manipulation that d3 does (with data binding, element creation/append, etc.) with React's virtual DOM? Or do you only use d3's non-rendering functionality (scales, etc.) combined with React for rendering?

BinaryBullet 12y ago

There's https://github.com/facebook/react-art https://github.com/facebook/react-art which I haven't used yet. One of the problems with react v0.10 is that it doesn't yet support all SVG attributes: http://facebook.github.io/react/docs/tags-and-attributes.html http://facebook.github.io/react/docs/tags-and-attributes.htm... For instance, the other day I was trying to make a responsive chart, but couldn't due to react not supporting the 'viewbox' attribute. I then tried npm installing from the repo directly, which didn't work b/c they have a custom npm build script that needs to be ran (and after some hacking, I was still running into weird errors w/ v0.11-alpha). Anyways, react seems like it will be very interesting for svg charting once they fully support all svg attributes.

fletchowns 12y ago

Isn't SVG part of the DOM though?

nilkn 12y ago
I've never used React, but I believe it maintains a virtual DOM and uses it to compute the minimal number of changes that need to be enacted on the browser's DOM. So basically, it's precisely because SVG is part of the DOM that it could potentially be a good application of React.
- haberman 12y ago
  Exactly. The React paradigm is to never mutate the DOM directly, but instead let React mutate it. I wrote a friendly intro here: http://blog.reverberate.org/2014/02/react-demystified.html http://blog.reverberate.org/2014/02/react-demystified.html

aristus 12y ago

We use react with D3 in MemSQL Ops. http://memsql.com/ops http://memsql.com/ops

reverius42 12y ago
How do you reconcile the direct DOM manipulation that d3 does (with data binding, element creation/append, etc.) with React's virtual DOM? Or do you only use d3's non-rendering functionality (scales, etc.) combined with React for rendering?