As popular as React and D3 both are, the thought of having to get into the boxing ring with these two control freaks is daunting. There are some tough decisions to be made, like who controls the DOM? Who is in charge of the data manipulation? Who deals with the interactivity and animations? During this talk, I’ll be exploring the techniques that we can utilize to have React and D3 working in cohesion, and when and why you’d choose certain methods over others.
8. @Ridhwana_K
Agenda
❖ What makes the topic special & why am I talking about it?
❖ What is D3?
❖ Refresher on how does D3 work?
❖ Why is it daunting to use D3 & React together?
❖ Use cases and options for integration
❖ Recap
❖ Conclusion
12. @Ridhwana_K
“D3.js is a JavaScript library for manipulating documents based on
data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s
emphasis on web standards gives you the full capabilities of modern
browsers without tying yourself to a proprietary framework,
combining powerful visualization components and a data-driven
approach to DOM manipulation.”
13. @Ridhwana_K
Why do developers use D3?
❖ Robust
❖ Works efficiently with large data sets
❖ Gives complete control to build custom visualizations
❖ Re-use of code and functions across charts
Examples can be found here: https://observablehq.com/@d3/gallery
19. @Ridhwana_K
Why is it daunting to use D3 &
React together?
❖ Difficult to find combined relevant resources
❖ They both try to control the DOM
❖ React uses the virtual DOM whilst D3 uses actual DOM
20. @Ridhwana_K
What are my options ?
❖ D3 for rendering
❖ React for rendering
❖ D3 for updates; React for rendering elements
23. @Ridhwana_K
Evaluation
❖ Common approach
❖ Simple to convert d3 vanilla js example code to work within React
❖ Add transitions with D3 methods
❖ Use all the built in D3 functions
❖ Scales really well
❖ Going against the normal flow of a React application that controls the DOM
26. @Ridhwana_K
Evaluation
❖ Modular component approach
❖ Promotes reuse
❖ Readable and easy to follow code
❖ Continue within the React paradigm
❖ Not able to use D3 functions that access the DOM
❖ React plugin for transitions
27. @Ridhwana_K
React for rendering elements;
D3 for updates
Render elements
React
Components
Updates like
styles & attributes
D3
29. @Ridhwana_K
Evaluation
❖ Each library does what it's best at
❖ Interactivity
❖ Transitions easy to implement
❖ Confusing and difficult
❖ Possible scaling issues
31. @Ridhwana_K
Option D3 for render React for render React for element
creation; D3 for updates
Advantages - Common approach
- Simple to convert d3
vanilla js example code to
work within React
- Add transitions with D3
methods
- Use built in D3 functions
- Scales really well
- Modular component
approach
- Promotes reuse
- Readable and easy to
follow code
- Continue within the
React paradigm
- Each library does what
it's best at
- Interactivity
- Transitions easy to
implement
Disadvantages - Going against the normal
flow of a React application
that controls the DOM
- Not able to use D3
functions that access
the DOM
- React plugin for
transitions
- Confusing and difficult
- Possible scaling issues
