Battle-Tested Techniques for Animation & Data Viz
summary
Shows concrete techniques and working tradeoffs: using D3 as math lib (scales, extent, scaleSqrt) while explicitly avoiding d3 selections, rendering with SVG and React, and animating numeric changes with react-spring animated.circle. Builds a prototype that replaces noisy particle buckets with three size-comparable circles plus incremental "running dots" when totals jump (example: 15 → 17 triggers two dots); explains why that design is clearer and more performant, and how to handle many animated elements without losing meaning.
AI-written summary · about
chapters (6)
- 0:00Start
- 1:28Motion is a message
- 4:43Dealing with data restrictions
- 8:24D3 scales
- 9:47Using the radius scale
- 10:36Animating with react-spring
related talks
33mBattle-Tested Techniques for Animation and Data Viz with React
21mData Visualizations with React + D3
26mHooked on D3: Creating Animated Ch(art)s with D3 and React
51mD3 js: Easy and flexible data visualisation using Web standards
30mD3 and React, Together
29m"Hand Coded Artisanal Data-Visualization"
47mSVGs beyond mere shapes
33mPainting with Data