D3
bg, lib, api & charts

Jake Trent

libre @jaketrent

Custom jewelry / awards
Appreciating great work
B2B software
Milestones
Performance

Great Team

2 Designers
2 Frontend
4 Backend
2 iOS
1 Product
1 Sales

Flavors

Rails
AngularJS
iOS

Tao

Continuous Deployment
</overhead>
Testing
Devops

D3 = Data-Driven Documents

Alternatives

SVG - Raphael, Google Charts, Highcharts

Canvas - Chart.js, CanvasJS

D3++ - Rickshaw

IE9+

Polyfill

mhemesath/r2d3 - IE7+

API

d3.select, d3.selectAll

select dom nodes

.append

put something in the dom

.attr

set attribute

.style

set style

.data

bind data to selection

.enter

appending to enter() creates missing elements

d3.json, d3.csv, etc

async load data source

d3.scale

map data space to visual space

.domain

possible values on axis

.range

limits of axis

.transition

animation mechanism

Lots more (~600 fns)

github.com/mbostock/d3/wiki/API-Reference

And now, a circus

codepen.io/jaketrent/pen/HsgkG

3 Interesting Charts

Gauge
Curve
Cronut

Gauge

See the Pen D3 Gauge by Jake Trent (@jaketrent) on CodePen

Curve

See the Pen D3 Curve by Jake Trent (@jaketrent) on CodePen

Cronut

See the Pen KIlpA by Jake Trent (@jaketrent) on CodePen

Thoughts

Use d3 a lot on what it's good for.

eg, chart

Use it little on what it's not good for.

eg, labels

Fetch data externally

eg, pass in req promise

Consider abstractions judiciously

eg, super common, tedious

Have fun!

eg, have fun

D3 bg, lib, api & charts