learning d3

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

Upload: ishi-von-meier

Post on 10-May-2015

998 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Learning d3

5

10

20

45

6

25

Learning D3What is d3.js all about? And how do I get started?

Page 2: Learning d3

5

10

20

45

6

25

Scott MurrayAssistant Professor, DesignUniversity of San Francisco

Page 3: Learning d3

What is d3.js?

Page 4: Learning d3
Page 5: Learning d3
Page 6: Learning d3

<!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>

Page 7: Learning d3

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

Page 8: Learning d3

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”

Page 9: Learning d3

What does data look like on the web?

Page 10: Learning d3

// JavaScript arrays!

var dataset = [ 5, 10, 20, 15, 18 ];

Page 11: Learning d3

// Data joins!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

Page 12: Learning d3

// Data joins!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

Page 13: Learning d3

// Data joins!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

?(empty selection)

Page 14: Learning d3

// Data joins!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

=5 10

152018 -

5 values 0 circles

Room for5 new

circles!

Page 15: Learning d3

// Data joins!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

181520105

Page 16: Learning d3

// Data joins!

var dataset = [ 5, 10, 20, 15, 18 ];

d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);

181520105 181520105

Page 17: Learning d3

181520105

Page 18: Learning d3

181520105

// Setting attributes from data!

Page 19: Learning d3

181520105

d3.selectAll(“circle”) .attr(“r”, function(d) { return d; });

Page 20: Learning d3

181520105

// Binding data to elements

// 1. Lets you reference values later// 2. Prevents need to “redraw” elements

Page 21: Learning d3

What else can D3 do for me?

Page 22: Learning d3

// Scale values

var scale = d3.scale.linear() .domain([200, 1000]) .range([0, 500]);

scale(600); // Returns 250

200 1000

0 500

600

250

Page 23: Learning d3

// Generate axes

var axis = d3.svg.axis() .scale(scale);

svg.append("g") .call(axis);

200 300 400 500 600 700 800 900 1000

Page 24: Learning d3

// Transitions and motion

Page 25: Learning d3

// Interactivity

Tooltipzroxxx!

Page 26: Learning d3

// Layouts

Page 27: Learning d3

// Geomapping and projections

Page 28: Learning d3

One step at a time

Page 29: Learning d3

Thanks!

Questions?

@alignedleft

alignedleft.com

An Introduction to Designing With D3

Scott Murray

Interactive Data Visualization

for the Web