Building apps with D3.js
summary
Argues D3.js works for full web apps, not just charts, by using the core enter/update/exit diff pattern to bind arrays to the DOM and compose reusable widgets (charts-as-widgets) that are applied with .call. Uses d3.select(function) for advanced element creation, d3.dispatch for loose event wiring, and the input event instead of keyup. Demonstrates a research app with synced highlights and cross-tab sync that runs successfully. Notes limits: syncing DOM back to models is manual and accessing parent/array context in callbacks is awkward.
AI-written summary · about
chapters (13)
- 0:00Introduction to D3.js
- 1:05What is D3.js
- 3:36D3 for web apps
- 6:31Data synchronization with D3
- 9:00D3 as app-building tool
- 13:12Templating in D3 apps
- 16:05D3 operators and call pattern
- 18:07Reusable D3 components
- 20:39Handling user input
- 21:22Advanced D3 selection
- 22:46D3 dispatch for decoupling
- 24:11State management in D3
- 24:54Pros and cons of D3
related talks
32mD3 and React, Together
27mD3 & React
51mD3 js: Easy and flexible data visualisation using Web standards
26mHooked on D3: Creating Animated Ch(art)s with D3 and React
23mBattle for the DOM: D3 vs. React
48mVisual Storytelling w/D3-A Conceptual Intro to Visualizing Data w/JavaScript
28mGetting Started with D3.js
29mThe DOM Wars: React vs d3