Introduction to D3

Slides: http://golodhros.github.io/d3-intro

Marcos Iglesias

OnlinePersonal Blog

Eventbrite Engineering Blog

@golodhros

Next upIntroduction

Applications

Bar Chart Example

D3 Selection

Live coding

What is D3.js?Data-Driven Documents

General Purpose Visualization Library

Manipulates data based documents

Open web standards (SVG, HTML, CSS and nowCanvas)

Allows interactions with your graphs

How does it work?Loads data

Binds data to elements

Transforms those elements

Transitions between states

Example

D3 NicetiesBased on attaching data to the DOM

Styling of elements with CSS

Transitions and animations baked in

Total control over our graphs

Amazing community

Decent amount of publications

D3 v4 UpdateMore modular

Breaking changes

New standard

WHAT CAN YOU DOWITH D3?

Bar charts

Pie charts

Bubble charts

Choropleth

Map projections

Dashboards

Algorithm visualization

Algorithm visualization

Artistic visualizations

Interactive dataexplorations

Code example

by Mike BostockBar chart example

Creating containervar margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top +

Reference: Margin Convention

Setting up scales and axesvar x = d3.scale.ordinal() .rangeRoundBands([0, width], .1);

var y = d3.scale.linear() .range([height, 0]);

var xAxis = d3.svg.axis() .scale(x) .orient("bottom");

var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%");

Reference: Scales tutorial

Loading data// Loads Datad3.tsv("data.tsv", type, function(error, data) { if (error) throw error; // Chart Code here});

// Cleans Datafunction type(d) { d.frequency = +d.frequency; return d;}

Drawing axes// Rest of the scalesx.domain(data.map(function(d) { return d.letter; }));y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

// Draws X axissvg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis);

// Draws Y axissvg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em")

Drawing barssvg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); });

Reference: , Thinking with joins General UpdatePattern

Output

Final codevar margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1);

var y = d3.scale.linear() .range([height, 0]);

var xAxis = d3.svg.axis() .scale(x) .orient("bottom");

var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%");

D3 SELECTIONS

Transform the DOM byselecting elements and

joining to data

SelectionsSubclass of array

Provides methods to create and manipulateselected elements

Array of arrays of elements

Setup// We have some random infolet data = 'randomStringToCreateAnArray'.split('');

Simplest Selection// We create the root list elementlet list = d3.select('.js-container') .append('ul');

Data Joinlet dataJoin = list.selectAll('.item')// an empty selection, since the list container was empty// looking for instantiations of data .data(data); // data, which would be bound to a // selection

UPDATE, ENTERAND EXIT PATTERN

Functions that setproperties

.text()

.property()

.style()

.attr()

UpdatedataJoin.attr('class', 'update');

dataJoin .attr('foo', function(d) { return d.foo; });

Enter// for every time that we see data// but we do not see an elementdataJoin.enter() .append('li').classed('enter', true) // we create an element.merge(dataJoin) // we merge the update and enter groups and apply an operation .text(function(d) { return d; });

Exit// Remove all elements as neededdataJoin.exit().remove();

ResourcesHow Selections Work

Thinking with joins

General Update Pattern

Selection API Reference

LIVE CODING

List Examplehttps://codepen.io/Golodhros/pen/rLXAZw

Table Examplehttp://codepen.io/Golodhros/pen/jAgZAj

Learning resources

https://engineering.eventbrite.com/d3-js-resources-to-level-up/

Block Explorer

Books

MoreMike Bostock

D3 Reference

d3 slack team

ConclusionsD3 is a visualization library

You can do amazing things with it

Data Joins are complex

but not too much...

Thanks for listening!Twitter:

Check out

Slides:

@golodhros

my Blog

http://golodhros.github.io/d3-intro