D3 and React, Together

on YouTube ↗32m

" summary

Argues that D3 does calculations, React renders and that D3 only needs DOM control for transitions axes brushes, with concrete demos: live‑coded line, bar and radial charts built by computing scales and path commands in D3 then rendering SVG in React; a drag/drop expense UI and a Hamilton scroll/exploration tool that link components via React state; a viewer‑brain timeline tied to demographics. Code is shown live and the examples update and work interactively.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 2:31Brushes
3. 8:39Expense App
4. 13:01Visualization
5. 16:12Update the Scales for the X Scale
6. 17:05Create a Line Generator with D3
7. 20:11Group Elements
8. 22:29The Bar Chart
9. 24:27Color Scale
10. 26:01Radius Scale
11. 26:52Arc Generator

" related talks

• 30mD3 and React, TogetherShirley Wu · ReactiveConf 2017
• 27mD3 & ReactShirley Wu · React Rally 2017
• 23mBattle for the DOM: D3 vs. ReactDanielle Carrick · React Rally 2019
• 29mThe DOM Wars: React vs d3Juan Cruz Fortunatti · Nerdearla 2020
• 53mThe React and D3 ecosystemsMarcos Iglesias Valle · iJS London 2019
• 21mData Visualizations with React + D3Swizec Teller · Reactathon 2018
• 26mHooked on D3: Creating Animated Ch(art)s with D3 and ReactMonica Wojciechowska · Nordic.js 2019
• 51mD3 js: Easy and flexible data visualisation using Web standardsJos Dirksen · Devoxx Belgium 2017