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