Big Data Introduction to D3

INTRO TO D3
with applications to big data
Feb 2014
@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.

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

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
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?
: filter 250,000 data points
: hundreds of metrics updating in real-time
analytics
analytics
financial tools
Open-source tools binding D3 to R, Python
Much, much more...
Crossfilter
Cubism
Netflix
Square
Addepar

THANKS!
@samselikoff
www.samselikoff.com

Big Data Introduction to D3

More Related Content

Similar to Big Data Introduction to D3

More from AnalyticsWeek

Recently uploaded

Big Data Introduction to D3