← Back to Module 09
D3 Selections Demo
Click the buttons below to see D3 selections in action. Each demo shows the D3 code alongside its visual effect.
1. d3.select('#id') — Select One Element
d3.select() picks the first matching element, like document.querySelector().
// Click a button to see the code
2. d3.selectAll('.class') — Select Multiple Elements
d3.selectAll() picks all matching elements, like document.querySelectorAll().
Apple
Carrot
Banana
Spinach
Cherry
Broccoli
// Click a button to see the code
3. .data(array).join('div') — Create Elements from Data
The heart of D3: bind an array of data and D3 creates, updates, or removes elements to match.
// Click a button to see the code
4. .style('property', d => ...) — Data-Driven Styles
When elements have bound data, you can use accessor functions to set styles dynamically.
// Click a button to see the code