D3.js v4/v5 密度推定 contourDensity – 使い方

2018-03-20

D3での密度推定の使い方を紹介します。データの個数密度を計算してコンター図を作成することができます。サンプルは黒いプロットが元データで、コンター図は個数密度を推定した結果です。

サンプルデモ

サンプルプログラム

解説

d3.contourDensityはv5で追加されたメソッドです。v4ではHTMLのヘッダーに下記を記載して呼び出すことで使うことができます。

1. データの準備

密度推定用のデータを準備します。

d3.randomNormal(a,b)()は、a:平均値、b:標準偏差としてガウス分布に従う乱数を算出するメソッドです。

4. 密度推定の計算

準備したデータから密度推定します。

d3.contourDensity()は密度推定用の関数を設定するもので、次の設定が可能です。

contourDensity .x データのx座標を指定します。デフォルトは
function x(d) { return d[0]; }
です。
contourDensity .y データのy座標を指定します。デフォルトは
function y(d) { return d[1]; }
です。
contourDensity .size データの領域サイズを設定します。[width, height]の配列で設定します。デフォルトは[960, 500]です。
contourDensity .cellSize 密度を計算するセルのサイズを設定します。デフォルトは4です。設定値が2の累乗となるように調整されます。
contourDensity .thresholds コンター図のしきい値を設定します。[x0, x1, …]のような一次元配列で設定します。デフォルトでは等間隔に20分割されたしきい値が設定されます。
contourDensity .bandwidth 密度推定に用いるGaussianカーネルのバンド幅を設定します。デフォルトは20.4939です。値が大きいほど滑らかな分布になります。

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

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

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

6. コンターの設定

コンター図用のSVG要素を設定します。

dataメソッドの引数に算出した密度推定の値を入れます。また、"d"属性にはd3.geoPathメソッドを使ってコンター用のパスを作成します。

7. プロットの設定

データの確認用に散布図のプロットを作成します。

まとめ

大量データの散布図を作成するときに重宝します。プロット点が多すぎて分布が不明なときにお試しください。