1. Scales

“Scales are functions that map from an input domain to an output range.”

An input domain and an output range, visualized as parallel axes.

• Normalization

1
2
3
4
5
6

var scale = d3.scale.linear()
    .domain([100, 500])
    .range([10, 350]);
scale(100);  //Returns 10
scale(300);  //Returns 180
scale(500);  //Returns 350

1
2
3
4
5
6
7

var dataset = [
    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
    ];
d3.max(dataset, function(d) {
    return d[0];
});

1
2
3
4
5
6
7
8
9
10
11
12
13

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([0, w]);
var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([0, h]); // .range([h, 0]); //reversed
//Returns scaled value
.attr("x", function(d) {
    return xScale(d[0]);
})
.attr("y", function(d) {
    return yScale(d[1]);
})

1
2
3
4

var padding = 20;
.range([padding, w - padding]);
.range([padding, w - padding * 2]);
.range([h - padding, padding]);

2. Other Methods for d3.scale.linear()

• nice()
• rangeRound()
• clamp()

1
2
3
4

var scale = d3.scale.linear()
                    .domain([0.123, 4.567])
                    .range([0, 500])
                    .nice();

3. Other Scales

• sqrt
• pow
• log
• quantize
• quantile
• ordinal
• d3.time.scale()
• d3.scale.category10()
• d3.scale.category20()
• d3.scale.category20b()
• d3.scale.category20c()

Scales Wiki