Data-Driven Documents/Tutorials

1. SVG #

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500">
    <text y="12">
        Hello, world!
    </text>
</svg>

SVG != HTML

2. D3 Resources #

D3 API Reference
https://github.com/mbostock/d3/wiki/API-Reference
D3 Wiki
https://github.com/mbostock/d3/wiki
D3 Group
https://groups.google.com/group/d3-js
D3 Stack Overflow
http://stackoverflow.com/questions/tagged/d3.js

3. Selectors #

3.1. CSS Selectors #

pre, code {
  font-family: "Menlo", monospace;
  font-size: 48px;
}

#foo          // <any id="foo">
foo           // <foo>
.foo          // <any class="foo">
[foo=bar]     // <any foo="bar">
foo bar       // <foo><bar></foo>

foo.bar       // <foo class="bar">
foo#bar       // <foo id="bar">

3.2. Selectors #

Javascript

document.querySelectorAll("pre, code")

jQuery

$('pre, code')

d3.selectAll("pre, code")

3.3. Selection.Append #

Single

// select the <body> element
var body = d3.select("body");

// add an <h1> element
var h1 = body.append("h1");
h1.text("Hello!");

Collection

// select all <section> elements
var section = d3.selectAll("section");

// add an <h1> element
var h1 = section.append("h1");
h1.text("Hello!");

4. Enter, Update & Exit #

4.1. Enter #

New data, for which there were no existing elements.

var circle = svg.selectAll("circle")
    .data(data)
    .enter().append("circle");
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", 2.5);

4.2. Update #

New data that was joined successfully to an existing element.
When updating, you might ignore enter and exit.

var circle = svg.selectAll("circle")
    .data(data)
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", 2.5);

4.3. Exit #

Existing elements, for which there were no new data.

4.4. Key Function #

by default, the join is by index.

var data = [
  {name: "Alice", x: 10.0, y: 9.14},
  {name:   "Bob", x:  8.0, y: 8.14},
  {name: "Carol", x: 13.0, y: 8.74},
  {name:  "Dave", x:  9.0, y: 8.77},
  {name: "Edith", x: 11.0, y: 9.26},

If needed, data should have a unique key for joining.

function key(d) { return d.name; }

var circle = svg.selectAll("circle");
    .data(data, key)
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", 2.5);

5. Scale #

5.1. Quantitative Scales #

Map a continuous (numeric) domain to a continuous range

linear
sqrt
pow
log
quantize
threshold
quantile
identity

var x = d3.scale.linear()
    .domain([12, 24])
    .range([0, 720]);
x(16); // 240

var x = d3.scale.sqrt()
    .domain([12, 24])
    .range([0, 720]);
x(16); // 268.9056992603583

var x = d3.scale.log()
    .domain([12, 24])
    .range([0, 720]);
x(16); // 240

5.2. Domains & Ranges #

var x = d3.scale.linear()
    .domain([0, d3.max(numbers)])
    .range([0, 720]);

var x = d3.scale.log()
    .domain(d3.extent(number))
    .range([0, 720]);

function value(d) { return d.value; }
var x = d3.scale.log()
    .domain(d3.extent(object, value))
    .range([0, 720]);

5.3. Interpolators #

Quantitative scales support multiple interpolators.

var x = d3.scale.linear()
    .domain([12, 24])
    .range(["steelblue", "brown"]);
x(16); // #666586

var x = d3.scale.linear()
    .domain([12, 24])
    .range(["0px", "720px"]);
x(16); // 240px

var x = d3.scale.linear()
    .domain([12, 24])
    .range(["steelblue", "brown"]);
    .interpolate(d3.interpolateHsl);
x(16); // #3cb05f

5.4. Diverging Scales #

Sometimes, you want a compound ("polylinear") scale.

var x = d3.scale.linear()
    .domain([-10, 0, 100])
    .range(["red", "white", "green"]);
x(-5); // #ff8080
x(50); // #80c080

5.5. Ordinal Scales #

An ordinal Scale is essentially an explicit mapping.

var x = d3.scale.ordinal()
    .domain(["A", "B", "C", "D"])
    .range([0, 10, 20, 30]);
x("B"); // 10

var x = d3.scale.category20()
    .domain(["A", "B", "C", "D"])
x("B"); // #aec7e8
x("E"); // #2ca02c
x.domain(); // A, B, C, D, E

5.6. Color Scale #

d3.scale.category10
d3.scale.category20
d3.scale.category20b
d3.scale.category20c

5.7. Ticks #

var x = d3.scale.linear()
    .domain([12, 24])
    .range([0, 720]);
x.ticks(5); // [12, 14, 16, 18, 20, 22, 24]

6. Axis #

6.1. Create #

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

6.2. Render #

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

6.3. Style #

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

7. Path #

7.1. SVG Paths #

<path d="M152.64962091501462,320.5600780855698L133.889...">

7.2. Path Generators #

d3.svg.line
d3.svg.area

Create

var x = d3.scale.linear();
     y = d3.scale.linear();
var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

Redner

svg.append("path")
    .datum(objects)
    .attr("class", "line")
    .attr("d", line);

8. Layouts #

d3.layout.treemap
d3.layout.tree
d3.layout.pack
d3.layout.partition
d3.layout.force
d3.layout.bundle
d3.layout.voronoi
d3.layout.chord
References
http://bost.ocks.org/mike/d3/workshop/

Document

Contents