【D3.js】 値の正規化(d3.scale)
|
1 |
var dataset = [12, 159, 0, 5555, 24, 6243, 369, 2525, 9999, 1212] |
例えば、上記のような0～10000までの値が含まれたデータセットを0px～450pxのラインに収めたい場合にはデータセットをピクセルの範囲内に収めるため、値の正規化を行う必要があります。
わりとメンドクサイ作業なのですが、d3.jsにはこのデータの正規化を行うための便利な関数が用意されているので、簡単に正規化を行うことができます。
スケールオブジェクトの作成
|
1 2 3 |
var scale = d3.scaleLinear() .domain( ["データセットの最小値", "データセットの最大値"]) .range( ["スケールの最小値", "スケールの最大値"]); |
作成したscaleオブジェクトの引数に値を入れると、正規化された値が出力されます。
|
1 2 3 4 5 6 7 |
> var scale = d3.scaleLinear().domain([0, 10000]).range([0, 450]); > scale(10) 0.45 > scale(100) 4.5 > scale(1212) 54.54 |
