Creative Data Visualizations with SVG and D3.js
summary
Workshop teaches how to draw SVG paths and C (cubic bezier), then uses d3 selection data‑binding enter append and enter‑update‑exit to turn movie records into flowers. Code runs in BlockBuilder, scales map ratings (domain 5.6–10) to size and votes (16,000–1.6M) to a quantized petal count, group elements nest petals so one transform scales a whole flower, and the final output is hundreds of interactive film flowers with color and rotation applied — the demo works live.
AI-written summary · about
chapters (19)
- 0:00Start
- 3:46Film Flowers
- 6:34Svg Elements
- 8:10Svg Paths
- 29:32Scales
- 30:22D3 Scale
- 39:36D3 Extent
- 42:31Scales for Ordinal Scales
- 54:14Xy with Height Attributes
- 1:04:37D3 Is Black Magic
- 1:12:09Object Constancy
- 1:13:06Key Function
- 1:14:32Update Selection
- 1:16:10Console Logging
- 1:39:12Svg Transforms
- 1:39:34Svg Transform
- 1:39:56Translate Scale and Rotate
- 1:47:43Scale
- 1:51:20Nesting Elements
related talks
41mData, Design, Code
47mData, Design, Code
51mD3 js: Easy and flexible data visualisation using Web standards
12mBattle-Tested Techniques for Animation & Data Viz
29m"Hand Coded Artisanal Data-Visualization"
24mBeyond the bar graph: Creative visualization with D3.js
48mVisual Storytelling w/D3-A Conceptual Intro to Visualizing Data w/JavaScript
29mSVGs beyond mere shapes