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.

1. React with D3:
Who’s in control?
By Ridhwana Khan
@Ridhwana_K

2. @Ridhwana_K
Ridhwana Khan
Senior Software Engineer at DEV
Co-Founder and Director of Kasi Maths
South African

3. @Ridhwana_K
What people think South
Africa looks like ...

4. @Ridhwana_K
Well, only sometimes ...

5. @Ridhwana_K
What Johannesburg
looks like ...

6. @Ridhwana_K
What Cape Town looks
like ...

7. @Ridhwana_K
What Cape Town looks
like ...

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

9. @Ridhwana_K
Why am I talking about this?

10. @Ridhwana_K

11. @Ridhwana_K
What is D3?

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

14. @Ridhwana_K
How does D3 work?

15. @Ridhwana_K
Domains
Ranges
SVG stuff?!?
Margins
Axes
D3 Methods

16. @Ridhwana_K
D3 Bar Chart
Coding Example
https://codepen.io/Ridhwana/pen/eYZdGPb

17. @Ridhwana_K
Scales
Linear ScaleInput Output
max: 10
min: 0
max: 800
min: 0
5 400

18. @Ridhwana_K
D3 Pie Chart
Coding Example
https://codepen.io/Ridhwana/pen/LYNbGJr

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

21. @Ridhwana_K
D3 for rendering:
React Refs

22. @Ridhwana_K
React & D3 Pie Chart
Coding Example

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

24. @Ridhwana_K
React for rendering:
React
Components
render calculations
D3

25. @Ridhwana_K
React & D3 Pie Chart
Coding Example

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

28. @Ridhwana_K
React & D3 Pie Chart
Coding Example

29. @Ridhwana_K
Evaluation
❖ Each library does what it's best at
❖ Interactivity
❖ Transitions easy to implement
❖ Confusing and difficult
❖ Possible scaling issues

30. @Ridhwana_K
Recap

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

32. @Ridhwana_K
Conclusion

33. @Ridhwana_K
Resources
● http://slides.com/shirleywu/deck#/4/0/2
● https://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
● https://www.createwithdata.com/integrating-react-and-d3
● https://medium.com/localmed-engineering/svg-pie-chart-using-react-and-
d3-43a381ce7246
● https://dev.to/julienassouline/let-s-get-started-with-react-and-d3-2nd7
● https://medium.com/shidanqing/build-a-dashboard-application-with-react-
d3-6ba4f46b876b

34. @Ridhwana_K
@Ridhwana_K