Data, Design, Code
summary
Shows concrete workflows: hand-parsed Hamilton lyrics and metadata, a 4,000-photo color study, and a 20,000-trip homelessness dataset, plus a movie demo with 98 items. Uses D3 for scales and SVG paths to compute arcs and medians, Vue to render and replace enter‑update‑exit, and GreenSock for smooth enter/leave animations. Demonstrates SVG cubic Bezier petals, a d3.brush that returns inverted date bounds, and interactive filtering that reduces the dataset correctly.
AI-written summary · about
chapters (11)
- 0:00Start
- 3:21Data Visualization
- 11:52Visual Metaphors
- 15:58Bar Chart
- 17:07Final Visualization
- 19:35Create the Cherry Blossom Flower
- 20:43Data Visualizations
- 21:31Demo Visualization
- 24:51Translating Raw Data into Screen Space
- 26:23Calculate the Y Scale
- 28:37D3 Area Generator
related talks
47mData, Design, Code
42mData, Design, Code with Shirley Wu
29m"Hand Coded Artisanal Data-Visualization"
02h 17mCreative Data Visualizations with SVG and D3.js
51mD3 js: Easy and flexible data visualisation using Web standards
12mBattle-Tested Techniques for Animation & Data Viz
47mSVGs beyond mere shapes
24mBeyond the bar graph: Creative visualization with D3.js