Intro to D3

Created by Victor Powell / @vicapow

# About me

# I visualize data

[![](img/monsoonco-logo-black-bg.png)](http://www.monsoonco.com/‎)

![](img/hp-spog-1.png)

# I teach

![](img/hackreactor-logo-white-bg.png)

# I like to explain things

![](img/central-limit-theorem.png)

![](img/monty-hall.png)

![](img/simpsons-paradox.png)

# I'm writing a book

![](img/d3-on-angular.png)

Need help understanding your data?

lets talk: me@vctr.me

![](img/hello-kitty.png) ok.. no more ads

# What is D3?

# Data # Driven # Document

# [D3](d3js.org)

D3 is not a collection of charts

[Bart Employee Salaries](http://blog.vctr.me/bart/)

### D3(data) -> HTML

# How does it work?

## Similar to jQuery

````javascript $('.foo'); ````

````javascript $('.foo'); // jQuery ```` ````javascript d3.selectAll('.foo'); // D3 ````

````javascript $('div'); // jQuery ```` ````javascript d3.selectAll('div'); // D3 ````

## Attributes ````javascript $('a').attr('href', 'http://vctr.me') ```` ````javascript d3.selectAll('a').attr('href', 'http://vctr.me') ````

## Styles ````javascript $('div').css('color', 'red') ```` ````javascript d3.selectAll('div').style('color', 'red') ````

How are they different?

(assuming our document already has 3 divs)

````javascript $('div'); ```` ![](img/selections-jquery-style.png)

(assuming our document already has 3 divs)

````javascript d3.selectAll('div'); ```` ![](img/selections-elements-without-data.png)

(our document has 3 divs)

````javascript d3.selectAll('div').data([18, 4, 7]); ```` ![](img/selections-data.png)

data binding ````javascript d3.selectAll('div').data(['red', 'green', 'blue']) .style('color', function(d){ return d}) ````

data binding ````javascript d3.selectAll('div').data([18, 4, 7]) .attr('width', function(d){ return d + '%' }) ````

(our document has no divs)

````javascript d3.selectAll('div').data([18, 4, 7]); ```` ![](img/selections-data-without-elements.png)

(our document has no divs)

````javascript d3.selectAll('div').data([18, 4, 7]) .enter().append('div'); ```` ![](img/selections-data.png)

(our document now has 3 divs)

(our document has 3 divs)

````javascript d3.selectAll('div').data([18, 4, 7, 11]) .enter().append('div'); ```` ![](img/selections-enter.png)

(our document now has 4 divs)

(our document has 4 divs)

````javascript d3.selectAll('div').data([18, 4]) .exit().remove(); ```` ![](img/selections-exit.png)

(our document now has 2 divs)

````javascript d3.selectAll('div').data([8, 3, 7]) .enter().append('div').style('opacity', 0) ````

````javascript d3.selectAll('div').data([8, 3, 7]) .enter().append('div').style('opacity', 0) .text('hello world') .transition().style('opacity', 1) ```` [demo](demos/demo-opacity.html)

![](img/transition-objects.png)