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
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
Intro to D3
By Sam Selikoff
Intro to D3
- 5,613