D3 Big Picture – Module 2

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
d3-concepts

Selections

  • D3 uses CSS style selections which are familiar to front-end developers

Example:

// 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");

Dynamic Functions

  • D3 uses dynamic functions to affect HTML elements with data
// 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"; });

Real-Time Updating

  • D3 can add new elements, update existing elements, and remove elements from the page in real-time

Example:

// 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();
 

Animation

  • D3 can apply changes to the page and smoothly transition between them

Example:

// 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); });

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:

 

Free 5 Day Video Course | Tableau Quick Start

Everything you need to become dangerous :)

x