Research - Integrate d3js and React

[brauliodiez]

We need to check what are the existing approaches (let render d3, let react render, or hybrid approach), I would go for let react render maybe?

Article to get started

https://cmichel.io/how-to-use-d3js-in-react/

http://ahmadchatha.com/writings/article1.html

Another option would be to skip d3 and use only svg and geomaps:

https://medium.com/@zimrick/how-to-create-pure-react-svg-maps-with-topojson-and-d3-geo-e4a6b6848a98

Good stuff to sneak in and check. @carlostxm and @fjcalzado to give his take on this

[fjcalzado]

I would go for an hybrid approach in this one. I have done it before with success and it works flawlessly. However, we can check the state of the art to see if new progress has been made since then.

[fjcalzado]

Well, I call it myself hybrid approach (React will render most of the components except the one which encapsulates D3 functionality) but based on the article you mentioned it would be 'let render d3'.

[adrigardi90]

Checking recent information about that, I've found a couple of engaging article:

https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/#comments-react-d3-ecosystem https://engineering.billymob.com/integrating-d3-with-react-memo-20e5999e2053

Here, different approaches are proposed:

1. Try to give d3 all the DOM power (using D3 to render)

2. An 'hybrid' option using React for the DOM and D3 for the maths (calculations for SVG paths, scales, layouts and any transformations that take user data and transforms) https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71 https://swizec.com/blog/using-d3js-transitions-in-react/swizec/6797

3. Use the library React Faux DOM using a fake DOM implementation to trick D3.js into thinking it is dealing with a real DOM (compatible with SSR but less performance as a shortcoming) https://blog.sicara.com/a-starting-point-on-using-d3-with-react-869fdf3dfaf

4. Lifecycle methods wrapping. Using the lifecycle methods in React to wrap the creation, update and removal of d3 charts (the downside, not SSR)

5. Use canvas instead of DOM renders