Slide 1

Slide 1 text

[email protected] icon-comment icon-comment-alt icon-comments icon-comments-alt icon-credit-card icon-dashboard icon-download icon-download-alt icon-edit icon-envelope icon-envelope-alt icon-key icon-leaf icon-legal icon-lemon icon-lock icon-unlock icon-magic icon-magnet icon-map-marker icon-minus icon-minus-sign icon-resize-horiz icon-resize-verti icon-retweet icon-road icon-rss icon-screenshot icon-search icon-share icon-share-alt icon-shopping-c http://speakerdeck.com/sathomas Web-Based Visualizations with D3.js Stephen Thomas

Slide 2

Slide 2 text

Why Are You Viewing This Presentation? Seriously, unless you’re stuck in a room forced to hear my voice, there are better alternatives available. You could start here1, with a workshop presented by Mike Bostock himself. 1http://bost.ocks.org/mike/d3/workshop/

Slide 3

Slide 3 text

Visualization: From Data I could tell you that in the War of 1812 Napoleon began his march on Moscow with an army of 422,000 men and ended his retreat with about 10,000 men. …

Slide 4

Slide 4 text

…to Understanding or Charles Joseph Minard could show you:

Slide 5

Slide 5 text

What the Web Brings: Source: http://bost.ocks.org/mike/uberdata/

Slide 6

Slide 6 text

What the Web Brings: 1. Interactivity Source: http://bost.ocks.org/mike/uberdata/

Slide 7

Slide 7 text

What the Web Brings: 2. Real Time Source: https://github.com/meloncholy/mt-stats-viewer

Slide 8

Slide 8 text

What D3.js Brings •Javascript library to help you create spectacular visualizations •With full interactivity using standard HTML/CSS/Javascript events •That can be automatically updated in real time as underlying data changes

Slide 9

Slide 9 text

D3.js is not Beta Many top notch organizations are actively using D3.js for their online content, e.g.: • New York Times: Four Ways to Slice Obama’s 2013 Budget Proposal • Le Monde: De Maastricht au traité budgétaire • New Scientist: The Changing Face of America

Slide 10

Slide 10 text

But Doesn’t It Have a Reputation? “Once you pass the learning curve…” “D3 has a steep learning curve…” “…it has a steep learning curve…” “There is a huge learning curve…” “…the learning curve was quite steep.” http://www.datameer.com/blog/uncategorized/whats-behind-our-business-infographics-designer-d3-js-of-course-2.html http://www.recursion.org/d3-for-mere-mortals/ http://www.visweek.org/visweek/2012/tutorial/visweek/introduction-data-visualization-web-d3js http://dyninc.github.com/lunch-and-learn/1202-d3js.html http://www.tips-for-excel.com/tag/learn-d3-js-book/

Slide 11

Slide 11 text

Let’s Clean Up that Reputation •Climbing the D3.js Learning Curve in 15 minutes.

Slide 12

Slide 12 text

D3.js: Data Driven Documents •Javascript utilities that manage the association of data with DOM elements •Convenience functions for common, tedious tasks •Leaves it to you to design the best way to make the data understandable

Slide 13

Slide 13 text

D3.js as Assembly Line Data (JSON, CSV, XML, …) plus elements (HTML, SVG, …) Photograph source: http://www.flickr.com/photos/lac-bac/4679195538/ Office national du film du Canada. Photothèque. Bibliothèque et Archives Canada

Slide 14

Slide 14 text

Assembly Plant: HTML Document

Slide 15

Slide 15 text

Assembly Line Part A: Data d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each });

Slide 16

Slide 16 text

Assembly Line Part A: Data d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each }); d3.json( ) is part of the D3 library. It retrieves JSON-formatted data from a URL, in this case the URL is numbers.json.

Slide 17

Slide 17 text

Assembly Line Part A: Data d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each }); When the data is available, D3 calls the indicated (callback) function; the parameter is the data returned from the URL.

Slide 18

Slide 18 text

Assembly Line Part B: Elements d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers); });

Slide 19

Slide 19 text

Assembly Line Part B: Elements d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers); }); We tell D3 we want to use

elements within the

tag for our data values. (The function names will make sense in a bit.)

Slide 20

Slide 20 text

Assembly Line Part B: Elements d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers); }); Create a one-to-one correspondence between data values and

elements.

Slide 21

Slide 21 text

Optional: “Serial Numbers” for the Data d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); });

Slide 22

Slide 22 text

Optional: “Serial Numbers” for the Data d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); }); The call to D3’s data( ) takes an optional second parameter. That parameter provides a key, or unique identifier, for the given data value.

Slide 23

Slide 23 text

Optional: “Serial Numbers” for the Data d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // numbers[i].value is the value itself // numbers[i].key is a unique key for each // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); }); This function is important if we need D3 to distinguish different data values from each other. (By default, D3 uses their index in the data set.)

Slide 24

Slide 24 text

Assembly Instructions d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // what to do when data becomes available ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); });

Slide 25

Slide 25 text

Assembly Instructions d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // what to do when data becomes available ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); }); If there isn’t a

tag for a particular data value, ...

Slide 26

Slide 26 text

Assembly Instructions d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // what to do when data becomes available ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); }); … create a new

tag for the data value, ...

Slide 27

Slide 27 text

Assembly Instructions d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // what to do when data becomes available ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); }); … and set the text contents of the newly created

tag to show the value of the data.

Slide 28

Slide 28 text

Assembly Instructions d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // what to do when data becomes available ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); }); Note that D3’s append( ) returns the newly created element, not the container to which it was appended.

Slide 29

Slide 29 text

Assembly Instructions d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // what to do when data becomes available ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); }); This return value is different from the jQuery append( ) function, so be careful when chaining methods.

Slide 30

Slide 30 text

Waste Removal d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // ... // what to do if data disappears ptags.exit().remove(); });

Slide 31

Slide 31 text

Waste Removal d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // ... // what to do if data disappears ptags.exit().remove(); }); If there isn’t a data value (any more) for a particular

tag, ...

Slide 32

Slide 32 text

Waste Removal d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // ... // what to do if data disappears ptags.exit().remove(); }); then just remove the

tag from the document.

Slide 33

Slide 33 text

Start the Day Shift function update() { d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // ... }); } setInterval(update, 5000);

Slide 34

Slide 34 text

Start the Day Shift function update() { d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // ... }); } setInterval(update, 5000); Put all the previous code in a function, ...

Slide 35

Slide 35 text

Start the Day Shift function update() { d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // ... }); } setInterval(update, 5000); and call that function periodically.

Slide 36

Slide 36 text

And the Night Shift function update() { d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // ... }); }

Slide 37

Slide 37 text

And the Night Shift function update() { d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // ... }); } On subsequent passes, D3 will automatically identify the

tags that are already present in the HTML document.

Slide 38

Slide 38 text

And the Night Shift function update() { d3.json("numbers.json", function(numbers) { // numbers has the values we want to “visualize” // and we want to associate each point with a

var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); // ... }); } And D3 will automatically match the (possibly) updated data set to the pre- existing

elements.

Slide 39

Slide 39 text

And the Night Shift function update() { d3.json("numbers.json", function(numbers) { var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); }); } If there isn’t a

tag for a particular data value, create a new

tag for the data value.

Slide 40

Slide 40 text

And the Night Shift function update() { d3.json("numbers.json", function(numbers) { var ptags = d3.select("body").selectAll("p") .data(numbers, function(d) { return d.key; }); ptags.enter().append("p") .text(function(d) { return "Value: " + d.value; }); ptags.exit().remove(); }); } If there isn’t a data value (any more) for a particular

tag, then just remove the

tag from the document.

Slide 41

Slide 41 text

The Key Concept: D3.js as Assembly Line •D3 automatically keeps track of data values and associated HTML (or SVG) elements. •As the data set changes, D3 identifies elements that need to be created and elements that are no longer needed. •All you have to do is tell it what to do with those elements.

Slide 42

Slide 42 text

The Power of D3.js •You can do anything you want with the HTML or SVG elements; after all, they’re standard HTML or SVG. (Style with CSS, make interactive with javascript, …) •You can control what happens when elements are added or removed. (Animations, anyone?) •But that seems like a lot of work...

Slide 43

Slide 43 text

Need Help with that Work? D3.js as Toolkit •Transitions, Arrays, Colors, Scales, Time •Scalable Vector Graphics (shapes, axes, controls) •Layouts (chords, clusters, force, hierarchy, histogram, pack, partition, pie, stack, tree, treemap) •Geography (paths, projections)

Slide 44

Slide 44 text

Lots of Inspiration in the D3.js Gallery

Slide 45

Slide 45 text

Lots of Inspiration in the D3.js Gallery

Slide 46

Slide 46 text

Lots of Inspiration in the D3.js Gallery

Slide 47

Slide 47 text

Lots of Inspiration in the D3.js Gallery

Slide 48

Slide 48 text

Lots of Inspiration in the D3.js Gallery

Slide 49

Slide 49 text

Lots of Inspiration in the D3.js Gallery

Slide 50

Slide 50 text

Lots of Inspiration in the D3.js Gallery

Slide 51

Slide 51 text

Lots of Inspiration in the D3.js Gallery

Slide 52

Slide 52 text

Lots of Inspiration in the D3.js Gallery