Avoiding D3 Spaghetti With React

Discover how to create reusable, animated visualization components using React and D3 in this 20-minute conference talk from React Amsterdam. Learn to overcome the challenges of combining D3's animation performance with React's declarative nature to efficiently build any imaginable visualization. Explore the process of decoupling visualization elements, understand the criteria for a good approach, and see how to effectively integrate React with D3 using the "Layout then Interpolate" method. Examine a practical example using a Pie chart and learn about React Native support through component injection. Gain insights into the speaker's experience of coding 450 charts and the need for a robust charting graphics library. Follow along as the talk covers current DataViz libraries, compares D3 and React, and outlines a roadmap for future developments in this field.

Intro
Challenge: coding 450 charts Needed a charting graphics library
Current DataViz Libs
D3 vs React
Detour: decoupling visualization elements
Criteria for good approach
React + D3: Layout then Interpolate
Why it works well
Example: Pie
React Native Support Component injection-inject the Expo Swg components
Roadmap