The React and D3 ecosystems
summary
Compares concrete integration patterns and gives practical tradeoffs: d3 within React, React for the DOM, lifecycle facade, and React photon. Shows D3 doing math and joins while React handles reconciler work, notes ~20–30% room familiarity with D3, and demonstrates a force‑bubble example where D3’s transitions “just work.” Reviews Victory, Recharts, Nivo, VX and d3‑fc, warns many repos are unmaintained, and concludes choose by scope/time/skills — roll your own D3 + React wrapper for long projects, pick a library for quick wins.
AI-written summary · about
chapters (48)
- 0:00Introduction
- 1:30Agenda
- 1:57Poll
- 2:15What is D3
- 3:15How does D3 work
- 3:51Example
- 7:17Data Joins
- 8:41Data Joins Diagram
- 11:18Residual API
- 11:57Tests
- 12:22D3 Libraries
- 15:53React
- 16:09What is React
- 17:21React Fiber
- 18:06Dynamic Child Components
- 19:29Recap
- 19:58React D3
- 20:34Challenges
- 20:54Approaches
- 21:10T3 within React
- 22:08T3 code
- 22:42Pros and cons
- 23:57React Photon
- 24:34React Photon Code
- 26:55Life Cycle Methods Mapping
- 27:42React Component
- 29:44React D3 Map
- 30:37Models
- 31:40Code
- 32:44Limitations
- 34:43Analyzing the ecosystem
- 36:11Victory Line Chart
- 36:24Victory Playground
- 36:53Richard
- 38:37BX
- 39:58Branches
- 40:44Lines
- 41:00Watchers React
- 41:37Victory React
- 42:41Spreadsheet
- 43:59Vision
- 44:20Variables
- 44:31Quality
- 44:42Time
- 45:30Scope
- 46:20Money
- 47:16Summary
- 47:54Questions
