D3.js カラースケール(Color Scale)を作成する方法 - d3.scaleLinear, d3.scaleOrdinal, d3.interpolate, d3.scaleSequential, d3.scaleThreshold

d3-scale

d3.scaleLinear

スケールの線形変換を使用する方法である。一般的にはグラフの座標変換に使用するが、色にも使用できる。

var color = d3.scaleLinear()
    .domain([0, 10])
    .range(["red", "blue"]);

d3.scaleLinearは、domainで指定した範囲をrangeで指定した範囲へ変換して出力する関数を設定する。colorには関数が設定され、次のようにdomainで指定した範囲の数値を代入して使用する。

color(2)

入力した数値に応じてRGB値を線形変換して返す。次のチャートは、rangeに"red"、"blue"を指定した例である。チャート下の数値はscaleに入力した値である。

次のように3色以上を設定することもできる。

var color = d3.scaleLinear()
    .domain([0, 5, 10])
    .range(["red", "yellow", "blue"]);

d3.scaleOrdinal

rangeに入力された配列を繰り返し設定する。

var color = d3.scaleOrdinal()
    .range(["red", "white", "green"]);

d3.interpolate

単純に2色の線形補間を行いたい場合は、d3.interpolateを使用する。 d3.scaleLinearとの違いは、入力値が0.0から1.0の範囲で設定されることである。

var color = d3.interpolate("brown", "steelblue");

d3.scaleSequential

domainで設定した範囲を0.0から1.0の範囲へ線形変換し、関数へ入力する。 出力値は関数によって決まる。たとえば、d3.interpolateを使用して複数の色を組み合わせたスケールを作成できる。

var i0 = d3.interpolate("brown", "white");
var i1 = d3.interpolate("white", "steelblue");

var color = d3.scaleSequential(
    function (t) {
        return (t < 0.5) ? i0(2 * t) : i1((t - 0.5) * 2);
    })
    .domain([0, 10]);

d3.scaleThreshold

しきい値で色を決定する。domainに入力された配列がしきい値になるため、rangeにはdomainより1つ多い配列要素が必要である。

var color = d3.scaleThreshold()
    .domain([0, 1])
    .range(["red", "white", "green"]);