SVGs beyond mere shapes
summary
Shows concrete techniques and results: uses d3.js with JS and CSS to generate per-item radial gradients for planets, data-driven linear gradients for legends and chord fills, and an animated “stretched chord” (bat) plot that works. Demonstrates SVG gooey filter and motion-blur effects applied successfully, and animates gradients for subtle flow. Recreates Minard and highlights the grim stat 422,000 down to 10,000 to prove the visual impact, with notes on browser and performance tradeoffs.
AI-written summary · about
chapters (25)
- 0:00Start
- 1:53How svg's Scalable Vector Graphics Fit into the World of D3
- 2:39Color Legend
- 3:59Linear Gradient Element
- 7:16Heat Map
- 8:19Temperature Visualization
- 10:06A Radial Gradient
- 11:29Harem Russell Diagram
- 14:42Gradients
- 15:30Linear Gradient
- 17:49Focusing Context
- 19:37Abrupt Gradients
- 24:26Menards Map of Napoleon
- 25:41Svg Filters
- 26:34Set the Filter Style
- 26:52Radio Chart
- 28:00Motion Blur
- 29:48The Gooey Filter
- 31:56Color Blending
- 36:46Are There any Dues or Don'ts To Improve Performance When Dealing with Svg Filters
- 38:08Line Function
- 38:56Any Opinions on Css Filters
- 39:35How Do You Deal with Accessibility in Your Visualizations
- 45:19How Do You Deal with Colorblindness in Data Visualization
- 45:39Color Scale
related talks
29mSVGs beyond mere shapes
29m"Hand Coded Artisanal Data-Visualization"
12mBattle-Tested Techniques for Animation & Data Viz
24mBeyond the bar graph: Creative visualization with D3.js
47mData, Design, Code
39mSVG Charts and Graphics with Ruby
41mData, Design, Code
51mD3 js: Easy and flexible data visualisation using Web standards