[[TableOfContents]]

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

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

=== Selectors ===
==== CSS Selectors ===
{{{#!c
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">
}}}


=== Scale ===
==== Quantitative Scales ====
Map a continuous (numeric) domain to a continuous range
 * linear
 * sqrt
 * pow
 * log
 * quantize
 * threshold
 * quantile
 * identity

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

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

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


==== Domains & Ranges ====
{{{#!c
var x = d3.scale.linear()
    .domain([0, d3.max(numbers)])
    .range([0, 720]);
}}}

{{{#!c
var x = d3.scale.log()
    .domain(d3.extent(number))
    .range([0, 720]);
}}}

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

==== Interpolators ====
Quantitative scales support multiple interpolators.

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

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

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

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

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

==== Ordinal Scales ====
An ordinal Scale is essentially an explicit mapping.
{{{#!c
var x = d3.scale.ordinal()
    .domain(["A", "B", "C", "D"])
    .range([0, 10, 20, 30]);
x("B"); // 10
}}}

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

==== Color Scale ====
 * d3.scale.category10
 * d3.scale.category20
 * d3.scale.category20b
 * d3.scale.category20c

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

=== Axix ===
==== Create ====
{{{#!c
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
}}}
==== Render ====
{{{#!c
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
}}}
==== Style ====
{{{#!c
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
}}}

=== Path ===
==== SVG Paths ===
{{{#!c
<path d="M152.64962091501462,320.5600780855698L133.889...">
}}}
==== Path Generators ====
 * d3.svg.line
 * d3.svg.area

Create
{{{#!c
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
{{{#!c
svg.append("path")
    .datum(objects)
    .attr("class", "line")
    .attr("d", line);
}}}

=== 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/