[[TableOfContents]]

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