D3.js v4/v5 コンター図の作成 (d3.contours 使い方)

2018-03-03

D3でコンター図(contours plot)の作り方を紹介します。

サンプルデモ

サンプルプログラム

解説

d3.contourはv5から追加された機能ですが、v4でもHTMLファイルのヘッダー部分で下記を記載してモジュールを呼び出せば使うことができます。

1. データの準備

コンター用のデータを準備します。

この部分は、コンター用のサンプルデータvalues[]の作成です。こちらのHimmelblau's functionを参考にさせて頂きました。コンター用のデータ(values)はn(x方向の配列要素数) × m(y方向の配列要素数)の要素数をもつ一次元配列として設定する必要があります。

2. SVG領域の設定

SVGタグを設定します。

3. しきい値の設定

しきい値を設定する一次元の配列(thresholds)を定義します。

ここでは、D3のメソッドを使って配列を作成しました。d3.range(a,b)はaからbまでの連続値の配列を作成します([0,1,2,..])。.mapメソッドは各配列の値を設定した関数に応じて変更するものです。今回は[0,7,14,...]の配列を作成し、これをコンター図のしきい値とします。

4. データ変換

コンター図用に用意したデータを変換するための関数をメソッドのd3.contoursを使って設定します。

.sizeでは、データの要素数n(x方向の配列要素数) × m(y方向の配列要素数)のサイズを、.thresholdsではしきい値設定用の配列を指定します。

5. カラースケールの設定

コンター図の色分け用のカラースケールをD3のメソッドを使って設定します。

d3.scaleSequential(function(t){}).domain([,])は、domainで設定した範囲を0.0~1.0に線形変換して内部の関数に渡し、内部の関数の返り値を出力する関数をcolorに設定します。d3.hslは、HSL色空間のRGB値を算出してくれるものです。d3.hslの一つ目の変数が角度に相当するものですが、0~230度に設定するとサンプルのような色使いになります。カラースケールの作り方についてはこちらを参照ください。

6. コンター用SVG要素の設定

SVG要素を設定します。

dataに設定したデータ変換関数によって変換したデータを設定し、"path"要素でコンター図を描きます。"d"属性にはコンター図用に変換するd3.geoPath()を用います。引数として設定したd3.geoIdentity().scale(width/n)は、スケールを変換するもので、デフォルトではm×n pxで描かれますので所望の大きさに変換します。

まとめ

D3のv5にはカラーテーマが複数用意されていますので、あわせて使えば様々なシチュエーションに対応できます。