D3 & React

on YouTube ↗27m

" summary

Claims that D3 only needs DOM access for transitions axes brushes and otherwise transforms data into screen space, letting React handle DOM rendering and state. Shows concrete apps: a draggable expense chart that re-categorizes and edits dates, a four‑year photo‑color map with 20,000 colors, a debate viewer‑engagement timeline that reproduces unexpected spikes, and an interactive Hamilton line explorer — all built and functioning, with performance tips and clear lifecycle rules for mixing D3 and React.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 0:59Who Needs Control of the Dom
3. 1:34Transitions
4. 2:23Brushes
5. 2:51Layouts
6. 8:30Expense App
7. 12:13Interactive Visualization
8. 22:56Performance

" related talks

• 30mD3 and React, TogetherShirley Wu · ReactiveConf 2017
• 32mD3 and React, TogetherShirley Wu · React Amsterdam 2018
• 23mBattle for the DOM: D3 vs. ReactDanielle Carrick · React Rally 2019
• 53mThe React and D3 ecosystemsMarcos Iglesias Valle · iJS London 2019
• 29mThe DOM Wars: React vs d3Juan Cruz Fortunatti · Nerdearla 2020
• 26mHooked on D3: Creating Animated Ch(art)s with D3 and ReactMonica Wojciechowska · Nordic.js 2019
• 21mData Visualizations with React + D3Swizec Teller · Reactathon 2018
• 32mStrategies for organically connecting React Components and D3 ObjectsBak Seunghyeon · FEConf 2018 Korea