Learning D3 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What is d3.js?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

D3 Page Template // Your beautiful D3 code // can go here

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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”

Slide 9

Slide 9 text

What does data look like on the web?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

// Data joins! var dataset = [ 5, 10, 20, 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!

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

18 15 20 10 5

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

What else can D3 do for me?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

// Transitions and motion

Slide 25

Slide 25 text

// Interactivity Tooltipz roxxx!

Slide 26

Slide 26 text

// Layouts

Slide 27

Slide 27 text

// Geomapping and projections

Slide 28

Slide 28 text

One step at a time

Slide 29

Slide 29 text

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