-
Notifications
You must be signed in to change notification settings - Fork 0
/
react-with-d3.html
206 lines (156 loc) · 4.46 KB
/
react-with-d3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<title>Data Visualization with React and D3</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Data Visualization with React and D3
---
# React
React is a popular JavaScript framework.
--
> React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.
https://reactjs.org/
---
# D3
D3 is a JavaScript library popular for interactive graphs and other data visualizations.
--
>D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
https://d3js.org/#introduction
>D3 employs a declarative approach, operating on arbitrary sets of nodes called selections.
https://d3js.org/#selections
---
# Drawing the line between React and D3
In Amelia Wattenberger's excellent blog post, [React + D3.js](https://wattenberger.com/blog/react-and-d3), she recommends handling the DOM with React as much as possible.
---
class: center, middle
# Creating an SVG DOM element
---
# Creating an SVG DOM element with D3
```js
const CircleD3 = () => {
const ref = useRef()
useEffect(() => {
const svgElement = d3.select(ref.current)
svgElement.append("circle")
.attr("cx", 150)
.attr("cy", 70)
.attr("r", 50)
}, [])
return (
<svg
ref={ref}
/>
)
}
```
---
# Creating an SVG DOM element with React
```js
const CircleReact = () => {
return (
<svg>
<circle
cx="150"
cy="77"
r="40"
/>
</svg>
)
}
```
---
# Why generate DOM elements using JSX instead of D3?
1. Declarative instead of imperative
> Avoid using refs for anything that can be done declaratively. https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs
--
2. Less code (17 vs 11 lines)
--
3. Makes use of React optimization
> Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI.
https://reactjs.org/docs/optimizing-performance.html
---
class: center, middle
# Binding data to DOM elements
---
# Binding data to DOM elements with D3
```js
const CirclesD3 = () => {
const [dataset, setDataset] = useState(
generateDataset()
)
const ref = useRef()
useEffect(() => {
const svgElement = d3.select(ref.current)
svgElement.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", 3)
}, [dataset])
useInterval(() => {
const newDataset = generateDataset()
setDataset(newDataset)
}, 2000)
return (
<svg
viewBox="0 0 100 50"
ref={ref}
/>
)
}
```
---
# Binding data to DOM elements with React
```js
const CirclesReact = () => {
const [dataset, setDataset] = useState(
generateDataset()
)
useInterval(() => {
const newDataset = generateDataset()
setDataset(newDataset)
}, 2000)
return (
<svg viewBox="0 0 100 50">
{dataset.map(([x, y], i) => (
<circle
cx={x}
cy={y}
r="3"
/>
))}
</svg>
)
}
```
---
# React D3 libraries
[Google Sheet](https://docs.google.com/spreadsheets/d/17XZtmJ-33dsUTqpUYS2OVYcLgVTnDYs70M8vw3E-olM/edit?usp=sharing)
(Inspired by https://docs.google.com/spreadsheets/d/1tq2uyeBLJDOCYT3TftOg3LE2N-QspoFbMyBqBGxwnG4/edit#gid=890532388 by Marco Iglesias, which contains more libraries but is out of date)
---
# Questions?
---
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>