The document discusses the integration of React with D3.js for effective DOM manipulation and data visualization, highlighting the challenges posed by their differing control over the DOM. It presents strategies for interoperating React and D3, including inward and outward data traffic methods and the creation of a reusable library called dechart.js. The conclusion emphasizes that while React and D3 can work together, maintaining separation and understanding their interaction is crucial for application scalability.

1. 1
React with D3:
DOM Manipulation Orchestration
Elden S. Park
Nov 2018

2. Index
• What is SVG and why does it matter
• Why D3
• Challenges in dealing with two DOM controlling libraries
• Ways to make React and D3 interoperate
• Data passing inbound/outbound
• Synthetic Events
• Spy method to capture child data
• Birth of Dechart.js
• Retrospective
2

3. SVG
3

4. SVG, Scalable Vector Graphics
SVG
XML-based vector image format for two-dimensional graphics
Supported by most web browsers
4

5. SVG, Scalable Vector Graphics
SVG (2)
https://picsvg.com/example/bike-1.svg
5
One of the most popular tools to create visual objects in web
with its declarative nature

6. Comparisons with Other Drawing APIs
SVG (3)
• Drawn as element in DOM just like plain HTML
• Easy to manipulate, event handlers can be attached
• Slower than WebGL-based Canvas
• Vector graphics. Scalable regardless of resolution, unlike Canvas
(raster-based)
6

7. Chart Libraries (with or without SVG)
SVG (4)
7
Chart.js Canvas, Easy-to-use, Hard to extend
C3.js SVG, D3 Wrapper, Abstracted
Recharts.js SVG, D3-React binding, Exclusive with React
D3.js SVG, DOM low level manipulation, Big community
...and more

8. D3
8

9. A Brief Introduction to D3.js
D3.js
• Data-DOM Binder (not a chart library)
• Features include, though not limited to,
• Selection
• Functional Property Bindings
• Transition (animation)
• Various use cases: Chart, Map, Diagrams
9

10. Examples of D3 Objects
D3.js (2)
10
Of Multiple Sources Provided in, https://github.com/d3/d3/wiki/gallery

11. When Should You Consider Using D3?
D3.js (3)
• Visualizing data with specific features (e.g. business-related)
• Creating charts not depending on specific 3rd party framework
(React, Angular, etc)
• Need an abundance of samples and QA’s
• You are already familiar with DOM
11

12. Defining D3 Objects in React App
12

13. Challenges in Using Both D3 and React
D3-React
13
• React handles DOM with its internal Virtual DOM representation.
D3, which also manipulates DOM, conflicts with React
• Performance degrades if a great number of SVG elements are
rendered in React’s DOM tree

14. Two Suggestions
14

15. `React in Full Control` Way
D3-React Ways to Interoperate
15

16. `React in Full Control` Way
D3-React Ways to Interoperate (2)
16

17. `React in Full Control` Way
D3-React Ways to Interoperate (3)
17
React (DOM)
svg
path
...
D3 (Math)
Path Calculation
Data
Event Handlers

18. `React, D3 Governing Each Region` Way
D3-React Ways to Interoperate (4)
18

19. `React, D3 Governing Each Region` Way
D3-React Ways to Interoperate (5)
19
React (DOM)
div
path
...
D3 (Math + DOM)
Event Handlers
svgAction Triggers

20. Two Ways to Interoperate D3 and React
D3-React Ways to Interoperate (6)
20
React Full Control React, D3 governing
each region
- One-way (natural*) Data Flow - Complicated
(two control towers)
- Maybe worse Performance - Usual
- D3, React linked tight
(hard to reuse w/o React)
Independence - D3 remains agnostic
of externals

21. Which Way to Choose, Why?
D3-React Ways to Interoperate (7)
21
`React, D3 Governing Each Region` can be more appealing
especially because,
• It allows to keep the pure D3 code.
=> It is hard to debug the combined logic of D3 and React.
=> D3 code can be used easy without React.

22. Now the Way Is Chosen,
Let’s Add an Abstraction to It
22

23. D3 Object Encapsulation
D3 Abstraction
23

24. D3 Object Encapsulation
D3 Abstraction (2)
24

25. D3 Object Encapsulation
D3 Abstraction (3)
25
D3 abstraction, hereafter is to be called `D3chart`

26. How Does Our D3chart Look Like
at This Point?
26

27. D3 Multi-Line Graph
27

28. Inward Data Passing
From React to D3
28

29. React May Pass Data Such as Functions
React to D3, Inward Data Traffic
29
Callbacks, for example, to listen to events in D3
(e: Event) => { /*...behavior...*/ }
+ We can also make use of D3’s own event
handling utilities

30. React May Pass Data Such as Functions
React to D3, Inward Data Traffic (2)
30

31. React May Pass Data Such as Functions
React to D3, Inward Data Traffic (3)
31

32. Too Many Handlers Polluting D3 Region
32

33. `handle-()` Methods and Corresponding Calls
React to D3, Inward Data Traffic (4)
33
Various event handlers (of N types) are passed in to D3chart.
This leads D3 to call dedicated handlers for different actions.
f1 (e1: Event) => void
f2 (e2: Event) => void
fn ...
When
condition1: f1()
condition2: f2()
...

34. Synthetic Events to Rescue
34

35. Generating Custom Events
React to D3, Inward Data Traffic
35
D3chart generates events, which React Components subscribe to listen
to. Event handlers (call + definition) reside outside of D3chart.
*Synthetic Event in this context refers to custom object D3chart defines,
nothing to do with React’s own Synthetic Event.

36. Generating Custom Events
React to D3, Inward Data Traffic (2)
36

37. Generating Custom Events
React to D3, Inward Data Traffic (3)
37

38. React Components React to
Events on Its Own Land
38

39. React’s Response to Synthetic Events
React to D3, Inward Data Traffic (4)
39

40. Adding Tooltip to Our D3chart
40

41. React’s Response to Synthetic Events
React to D3, Inward Data Traffic (5)
41

42. React’s Response to Synthetic Events
React to D3, Inward Data Traffic (6)
42

43. React’s Response to Synthetic Events
React to D3, Inward Data Traffic (7)
43
The beauty of generating Synthetic Events is its keeping
D3 logic free of any literals passed from external libraries

44. Inbound Traffic of Data
React to D3, Inward Data Traffic (8)
44
{ Data, (Event Handlers) } flow into D3 object from React Components.
React (DOM)
div
path
...
D3 (Math + DOM)
Event Handlers
svgData Synthetic Event

45. How about the Vice-Versa?
45

46. blackbox
D3 Listening to Events in React
D3, Outward Data Traffic
46
How can D3 listen to events on React’s Components
when React does not even know it has a child?
div
div
svg
path
click

47. Exposing Action Trigger
D3, Outward Data Traffic (2)
47

48. Spy Method to Capture Child Data
D3, Outward Data Traffic (3)
48

49. Spy Method to Capture Child Data
D3, Outward Data Traffic (4)
49

50. Wait, Isn’t It a Contradiction to
React’s Unidirectional Data Flow?
50

51. Pseudo Two-Way Data Binding
D3-React Binding
51
div
div
svg
path
dispatch()
dispatch()
Event
Handlers
Data
Synthetic
Event
click

52. Birth of Dechart.js
52

53. Creating a Library of Our Own
Dechart.js
53
Reusable abstraction (D3chart) became a library.
- Configurable
- Built-in chart type (Line, Bar, etc)
- External-lib free D3 wrapper
Dechart.js https://github.com/dechartjs/dechart
Dechart-react.js https://github.com/dechartjs/dechart-react
*Migration (mirroring) to Github in progress (Nov 18’)

54. Other Considerations When
Embedding D3 into Web Application
54

55. Modularized Render Functions
Dechart.js (2)
55
Chart is composed of several elements so can be render functions.
It is easier when D3 cares nothing about other view logic (e.g. React)

56. Pure JavaScript Style Injection
Dechart.js (3)
56
We are minimizing the impact of third-party factors, style is no exception.

57. Sample Diagrams
Dechart.js (4)
57

58. Wrapping Up
Retrospective
58
• Both React and D3 controls DOM, but they can operate together
• If possible, define D3 and React separated
• Unidirectional Data Flow is not powerful enough for all situations
• Static typing needs to be considered building an app (lib) of scale

59. Code Lab
59
Let’s discover what we discussed in hands-on coding
For those who see these slides afterwards,
Checkout https://github.com/dechartjs/dechart-react

60. Thank you
End of Slide
60
Gamsahabnida
Elden S. Park
eldeni.github.io