D3.js v4/v5 カラースケールの作り方

2018-03-032018-03-10

円グラフやコンター図を書くときに便利なD3のカラースケールの作り方を紹介します。

1 d3-scale
2 まとめ

d3-scale

d3.scaleLinear

スケールの線形変換を使った方法です。通常はグラフの座標変換に用いますが、色にも用いることができます。

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

var color = d3.scaleLinear()

.domain([0, 10])

.range(["red", "blue"]);

d3.scaleLinearはdomainで指定した範囲を、rangeで指定した範囲に変換して出力する関数を設定します。colorには関数が設定され、

color(2)

color(2)

のようにdomainで指定した範囲の数値を代入して使います。入力した数値に応じてRGB値を線形変換して返します。次のチャートは”red”、”blue”をrangeに指定したサンプルです。チャートの下の数値はscaleに入力した値です。

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

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

var color = d3.scaleLinear()

.domain([0, 5, 10])

.range(["red", "yellow", "blue"]);

d3.scaleOrdinal

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

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

1 2	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");

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

d3.scaleSequential

domainで設定した範囲を0.0～1.0の範囲に線形変換して関数に入力します。出力値は関数に応じて決まります。例えばd3.interpolateを使って複数の色を組み合わせたなスケールを作ることができます。

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

var i0 = d3.interpolate("brown", "wihte");

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

var color = d3.scaleSequential(

function(t) {

return (t<0.5) ? i0(2*t) : i1(2*(t-0.5));

})

.domain([0,10]);

d3.scaleThreshold

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

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

var color = d3.scaleThreshold()

.domain([0, 1])

.range(["red", "white", "green"]);

まとめ

D3で用意されているカラーテーマもあります。こちらを参照ください。