D3.js スケール処理

  • このエントリーをはてなブックマークに追加

スケール

「スケールとは入力ドメインを出力レンジにマップする関数のことである」
D3 の作者、マイク・ボストック氏によるD3においてのスケールの定義。

  1. ドメイン:領域
  2. レンジ:範囲
  3. マップ:変換/対応

グラフ描画するデータがすべて固定値だった場合には、表示範囲や各グラフの横幅、高さ、などを決め打ちですみますが、
基本的に扱うデータの範囲なんて分かるわけがないのが実案件。

ここではスケールを用いてデータのドメイン(領域)を、指定のレンジ(範囲)内に収まるようにマップする(変換する)ことをする。

ようは値のわからないデータセットを、指定の枠内に収めて描画したい際に正規化するよ!って事。
(ここで言う正規化は数学用語においての、ベクトルにおける正規化 を示す)

スケールの生成

[ .scall ]
スケール定義開始
[ .linear() ]
スケールを行なうには線形・指数・対数などの種類があるが、この内の線形でのスケールを行なう際に呼び出す関数 (線形:X軸 Y軸のような等間隔の縮尺の事)
[ .domain ]
データの最小値・最大値を指定
[ .range ]
収めたい範囲の最小値と最大値を指定

ただこのままではまだ最小値と最大値が固定値でデータに合わせて柔軟に変えられないので次の項へ


最小値・最大値の取得

様々な配列があるが、わかりやすく配列を作る

var dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ];
この配列(dataset[][0])の最大値を取得する
d3.max(dataset,function(d){
    return d[0];
});
//返り値 480
[ .max ]
配列をループしてその配列中の最大値を返す
この配列(dataset[][0])の最小値を取得する
d3.min(dataset,function(d){
    return d[0];
});
//返り値 5
[ .min ]
配列をループしてその配列中の最小値を返す

統括

先述の2つを組み合わせることでデータのドメインをレンジ内に収めることができる

var maxDomain = d3.max(dataset,function(d){return d[0];});
var minDomain = d3.min(dataset,function(d){return d[0];});

var scale = d3.scale.linear()
                .domain([minDomain, maxDomain])
                .range([10,350]);
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。