Intro to d3



@samselikoff
www.samselikoff.com


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);
  bar.style.setProperty("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>
    <script>
      // Our code
    </script> 
  </body>
</html>

Some data

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

First, need a parent <svg>


 d3.select('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`

d3.select('body').style('background-color', 'blue');


.append actually returns a new selection

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

Work with local var svg

just as if we had done  d3.select('svg')


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

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

svg.append('rect');
svg.append('rect');
svg.append('rect');
svg.append('rect');
svg.append('rect');
svg.append('rect');

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


Imperative

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


Declarative

 paragraphs.style('background-color', 'green');


We can also select no elements


<svg></svg>
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')
  .data(nums)


Our representation is now explicit


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

var bars = svg.selectAll('rect')
  .data(data);

But our DOM is empty

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

 bars.enter()
    .append('rect');


Where does the data actually live?

The DOM


This enables selections to be transient 

 d3.selectAll('rect').data()


Data-driven transformations 

bars.attr('x', function(d, i) { ... }
Let's finish up the bar chart.

What next?


Scales, axes, events, transitions...

  • https://github.com/mbostock/d3/wiki/Gallery
  • https://github.com/mbostock/d3/wiki/Tutorials
  • 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...



Thanks!


samselikoff.com/writings/intro-to-d3/

@samselikoff
www.samselikoff.com
Made with Slides.com