Web-Based Visualizations with D3.js

[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

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 <!DOCTYPE html> <html lang="en"> <head> <meta
charset="utf-8"> <title></title> </head> <body> </body> </html>

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

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.

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

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 <body> tag for our data values. (The function names will make sense in a bit.)

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

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.

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 diﬀerent 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; }); });

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

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

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.

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.

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

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

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

// numbers has the values we want to “visualize” // ... }); } setInterval(update, 5000); Put all the previous code in a function, ...

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

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

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

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.

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 identiﬁes 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

Web-Based Visualizations with D3.js

Web-Based Visualizations with D3.js

More Decks by Stephen Thomas

Other Decks in Programming

Featured

Transcript