This page is a reference for viewers of my D3 Big Picture course on Pluralsight.com
If you don't have an account on Pluralsight you can get a free trial here: Free Trial on Pluralsight.com
Concepts Overview
Selections
- D3 uses CSS style selections which are familiar to front-end developers
Example:
[code]
// select all paragraph elements
d3.selectAll(“p”).style(“color”, “white”);
// select an individual element
d3.selectAll(“#p1”).style(“color”, “white”);
// select a class of elements
d3.selectAll(“.text-label”).style(“color”, “white”);
[/code]
Dynamic Functions
- D3 uses dynamic functions to affect HTML elements with data
[code]
// Randomly Color Paragraphs
d3.selectAll(“p”).style(“color”, function() {
return “hsl(” + Math.random() * 360 + “,100%,50%)”; });
// Using data
d3.selectAll(“p”)
.data([4, 8, 15, 16, 23, 42])
.style(“font-size”, function(d) { return d + “px”; });
[/code]
Real-Time Updating
- D3 can add new elements, update existing elements, and remove elements from the page in real-time
Example:
[code]
// Adding data with .enter()
d3.select(“body”).selectAll(“p”)
.data([4, 8, 15, 16, 23, 42])
.enter().append(“p”)
.text(function(d) { return “I’m number “+ d + “!”; });
// Updating existing elements
var p = d3.select(“body”).selectAll(“p”)
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Adding Nodes
p.enter().append(“p”)
.text(function(d) { return d; });
// Removing Nodes
p.exit().remove();
[/code]
Animation
- D3 can apply changes to the page and smoothly transition between them
Example:
[code]
// Fade background to black
d3.select(“body”).transition()
.style(”background-color”, ”black”);
// resize circles in map w/ staggered delay
d3.selectAll(“circle”).transition()
.duration(750)
.delay(function(d, i) { return i * 10; });
.attr(“r”, function(d) { return Math.sqrt(d * scale); });
[/code]
Interactivity
- D3 has 2 built-in interactive behaviors; drag and zoom
- Because D3 uses standard HTML elements, you can use javascript to add any type of interactivity you can imagine
Examples: