Intro to d3


Why data vis?

  • Communication
  • Exploration

Apple today announced financial results for its fiscal 2014 first quarter ended December 28, 2013. The Company posted record quarterly revenue of $57.6 billion and quarterly net profit of $13.1 billion, or $14.50 per diluted share. These results compare to revenue of $54.5 billion and net profit of $13.1 billion, or $13.81 per diluted share, in the year-ago quarter. Gross margin was 37.9 percent compared to 38.6 percent in the year-ago quarter. International sales accounted for 63 percent of the quarter’s revenue.

I get it, times are good!

What's d3?

Data-Driven Documents

Hypothetical bars in a document. Lets set their heights:

With JS

var data = [80, 53, 125, 200, 28, 97];

var bars = document.getElementsByTagName("rect");
for (var i = 0; i < bars.length; i++) {
  var bar = bars.item(i);"height", data[i], null);

With D3

 d3.selectAll('rect')    .attr('height', function(d, i) {return data[i];});

d3 is not:

  • DOM query lib
  • Compatibility layer
  • Charting library
  • Easy!
  • Proprietary 3rd-party tech

how can d3 help us?

Less convenient, but more powerful

the path to learn

  • Examples
  • Practice
  • Reading
  • Repeat

Today, higher-level concepts

What we're building

Initial document

<html>    <body>
    <script src="d3.v3.min.js" charset="utf-8"></script>
      // Our code

Some data

 var data = [80, 53, 125, 200, 28, 97];

First, need a parent <svg>'body').append('svg');

  • d3 is global object - think $ from jquery
  • Lets us select elements - similar to jquery
  • Can perform operations on these selections
    • like `append`, or `style`'body').style('background-color', 'blue'); 

.append actually returns a new selection

 var svg ='body').append('svg'); 

Work with local var svg

just as if we had done'svg')

Let's make the bars. We could just...

// Recall, var data = [80, 53, 125, 200, 28, 97];


But this falls short

d3.selectAll wraps arrays of elements

 var paragraphs = d3.selectAll('p');

So what are selections?

Understanding selections is key to writing d3 code.

Selections enable declarative programming


 paragraphs.forEach(function(p) {'background-color', 'green');

Declarative'background-color', 'green');

We can also select no elements

var bars = d3.selectAll('rect');

Again, selections are higher level

  • In this case, `bars` doesn't refer to anything  in the DOM
  • But it does represent an array of <rect> elements

Selections have two pieces

The key to D3's power!

The data join

var nums = [80, 53, 125, 200, 28, 97];

var bars = svg.selectAll('rect')

Our representation is now explicit

var data = [80, 53, 125, 200, 28, 97];

var bars = svg.selectAll('rect')

But our DOM is empty

This means there are six  <rect> in our enter selection


Where does the data actually live?


This enables selections to be transient


Data-driven transformations

bars.attr('x', function(d, i) { ... }

Let's finish up the bar chart.

What next?

Scales, axes, events, transitions...

  • StackOverflow
  • d3 mailing list (google group) + IRC

Practice, inspect, examples

Can something so low-level be useful for big data?

  • Crossfilter: filter 250,000 data points
  • Cubism: hundreds of metrics updating in real-time
  • Netflix analytics
  • Square analytics
  • Addepar financial tools
  • Open-source tools binding D3 to R, Python
  • Much, much more...



Intro to D3

By Sam Selikoff