stephen@sathomas.me 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

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/

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. …

…to Understanding or Charles Joseph Minard could show you:

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

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

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

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

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

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/

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

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

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

Assembly Plant: HTML Document

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

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.

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.

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

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.)

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.

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

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.

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.)

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

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, ...

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, ...

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.

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.

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.

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

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, ...

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.

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

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, ...

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.

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

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.

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.

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.

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.

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

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)

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery

Lots of Inspiration in the D3.js Gallery