D3.js

A Whirlwind Tour

Max Goldstein

SmartLogic InternalConf

May 14, 2015

Livecoding

Link: D3js.org

.enter()

Update

.exit()

.data()

Data

DOM

to the

D3 binds

Enter Now, Update Later

function placeCircles(sel){
    sel.attr("r", function(d){return 4*Math.sqrt(d)})
       .attr("cx", function(d, i){ return i * 100 + 50})
       .attr("cy", 50)

}

svg.selectAll("circle").data([20,30,40])
    .enter().append("circle")
    .call(placeCircles)
// equivalent to:
// placeCircles(svg.selectAll... )

svg.selectAll("circle").data([25, 35, 60])
    .transition().delay(2000)
    .call(placeCircles)

Reusable Charts:

A Module Pattern

function square(){
    var side = 200;

    function render(g){
        g.append("square")
         .attr("width", side)
         .attr("height", side)
    }

    render.side = function(s){
        if (!s) return side;
        side = s;
        return render;
    }

    return render;
}

var make_square =
    square().side(400);

svg.selectAll("g.aClass")
    .call(make_square);

Nested Selections:

Where the real power is

d3.selectAll("tbody tr").selectAll("td");

0,0

1,0

2,0

3,0

0,1

1,1

2,1

3,1

0,2

1,2

2,2

3,2

0,3

1,3

2,3

3,3

But Wait: You Also Get

• Array helpers, maps, sets, and nests
• Scales and SVG axes
• Voronoi, force directed, treemaps, geography
• JSON and CSV asynchronous helpers
• Queue & SMASH

Link: The Force Directed States of America

Watch Out For

• Runtime errors
• Invalid SVG
• Differences in SVG/HTML styles
• Insufficiently specific selectors
• #d3brokeandmadeart

Thank You – Questions?