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 #

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
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 #

이 글에는 0 개의 댓글이 있습니다.