Learning D3

10 20 45 6 Learning D3 What is d3.js all
about? And how do I get started?

10 20 45 6 Scott Murray Assistant Professor, Design University
of San Francisco

What is d3.js?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title>
<script type="text/javascript" src="d3.v3.js"></script> </head> <body> <script type="text/javascript"> // Your beautiful D3 code // can go here </script> </body> </html>

HTML CSS JS SVG DOM Hypertext Markup Language Cascading Style
Sheets JavaScript Scalable Vector Graphics The Document Object Model all of the above == web standards

HTML CSS JS SVG DOM Hypertext Markup Language Cascading Style
Sheets JavaScript Scalable Vector Graphics The Document Object Model Learning D3 is a process of “learning the web”

What does data look like on the web?

// JavaScript arrays! var dataset = [ 5, 10, 20,
15, 18 ];

// Data joins! var dataset = [ 5, 10, 20,
15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); ? (empty selection)

15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); = 5 10 15 20 18 - 5 values 0 circles Room for 5 new circles!

15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 18 15 20 10 5

15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 18 15 20 10 5 18 15 20 10 5

18 15 20 10 5

18 15 20 10 5 // Setting attributes from data!

18 15 20 10 5 d3.selectAll(“circle”) .attr(“r”, function(d) { return
d; });

18 15 20 10 5 // Binding data to elements
// 1. Lets you reference values later // 2. Prevents need to “redraw” elements

What else can D3 do for me?

// Scale values var scale = d3.scale.linear() .domain([200, 1000]) .range([0,
500]); scale(600); // Returns 250 200 1000 0 500 600 250

// Generate axes var axis = d3.svg.axis() .scale(scale); svg.append("g") .call(axis);
200 300 400 500 600 700 800 900 1000

// Transitions and motion

// Interactivity Tooltipz roxxx!

// Layouts

// Geomapping and projections

One step at a time

Thanks! Questions? @alignedleft alignedleft.com An Introduction to Designing With D3
Scott Murray Interactive Data Visualization for the Web

Learning D3

Learning D3

Scott Murray

More Decks by Scott Murray

Other Decks in Programming

Featured

Transcript

10 20 45 6 Learning D3 What is d3.js all

10 20 45 6 Scott Murray Assistant Professor, Design University

What is d3.js?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title>

HTML CSS JS SVG DOM Hypertext Markup Language Cascading Style

HTML CSS JS SVG DOM Hypertext Markup Language Cascading Style

What does data look like on the web?

// JavaScript arrays! var dataset = [ 5, 10, 20,

// Data joins! var dataset = [ 5, 10, 20,

// Data joins! var dataset = [ 5, 10, 20,

// Data joins! var dataset = [ 5, 10, 20,

// Data joins! var dataset = [ 5, 10, 20,

// Data joins! var dataset = [ 5, 10, 20,

// Data joins! var dataset = [ 5, 10, 20,

18 15 20 10 5

18 15 20 10 5 // Setting attributes from data!

18 15 20 10 5 d3.selectAll(“circle”) .attr(“r”, function(d) { return

18 15 20 10 5 // Binding data to elements

What else can D3 do for me?

// Scale values var scale = d3.scale.linear() .domain([200, 1000]) .range([0,

// Generate axes var axis = d3.svg.axis() .scale(scale); svg.append("g") .call(axis);

// Transitions and motion

// Interactivity Tooltipz roxxx!

// Layouts

// Geomapping and projections

One step at a time

Thanks! Questions? @alignedleft alignedleft.com An Introduction to Designing With D3