D3.js – From Zero to Data Viz Hero
summary
Builds a pie into a donut using d3.arc and angle layout via d3.pie, loads a CSV of Toronto parking‑ticket weekdays with d3.csv, and adds center tooltips that show counts and recalculated percentages. Legend rectangles toggle an enabled flag, animations use an underscore current stored per-path with D3.interpolate for smooth transitions (750ms), and the code prevents removing the last slice so the chart always shows at least one segment.
AI-written summary · about
chapters (13)
- 0:00Intro
- 1:37But don't panic
- 2:10A Basic Pie Chart
- 10:12A Basic Donut Chart
- 11:26Adding a Legend
- 19:22Loading External Data
- 19:58Toronto Parking Ticket Data
- 24:47And that's it.
- 25:04Adding Tooltips
- 25:30We'll harness mouse events
- 26:21Some tooltip styles
- 26:57Create the tooltip
- 31:19Animation is hard
related talks
51mD3 js: Easy and flexible data visualisation using Web standards
24mBeyond the bar graph: Creative visualization with D3.js
48mVisual Storytelling w/D3-A Conceptual Intro to Visualizing Data w/JavaScript
28mGetting Started with D3.js
42mIntroduction to d3 and Data-Driven Charts
47mData, Design, Code
01h 55mUse your data to tell stories
12mBattle-Tested Techniques for Animation & Data Viz