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?
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
www.samselikoff.com

Big Data Introduction to D3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Big Data Introduction to D3

Similar to Big Data Introduction to D3 (20)

More from Vishal Kumar

More from Vishal Kumar (15)

Recently uploaded

Recently uploaded (20)

Big Data Introduction to D3