スケーリング：domainとrange

あるデータのスケーリングは、.domain().range()の組み合わせで行う。範囲[a,b]の入力を、範囲[p,q]の出力に変換するスケーリング関数の基本形は次の通り。

var scale = d3.scale.種類
　         .domain([a,b])
            .range([p, q]);

.domain([a,b])は入力値の範囲、.range([p,q])は出力（描画）の範囲を指定する。

連続数に対するスケールの「種類」は次がある

種類	変換方法
linear	線形
log	常用対数（底は10）
pow	指数　肩は.exponent(x)で指定
sqrt	平方根 .pow().exponent(0.5)と同じ
quantize	連続な入力(domain)を離散的な出力(range）に変換
quantile	カテゴリーに分類された入力を離散的に出力
threshold

あらかじめ入力データの範囲がわかっていない場合は、d3.max(), d3.min()関数を使う。

 .domain([ d3.min(dataset,function(d) {return d;})
                 d3.max(dataset, function(d) {return d;}) ]);

スケーリング関数を使って描画する例：

//Width and height
var w = 500;
var h = 100;
var dataset = [
　　　[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
　　　[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
 	 ];
//Create scale functions
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([h, 0]);
//Create SVG element
var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
svg.selectAll("circle")
	.data(dataset)
	.enter()
	 .append("circle")
	 .attr("cx", function(d) {
		return xScale(d[0]);
	 })
	.attr("cy", function(d) {
		return yScale(d[1]);
	})
	.attr("r", function(d) {
		return Math.sqrt(h - d[1]);
	});

画面上は上端がY＝０で、下端ほどY座標が大きくなるため、Yスケールは.range([h,0])　として対応している。