D3.js v4/v5 treemap 使い方 – サンプル

2018-02-11

D3.js (v4/v5)の階層構造を可視化するtreemap(d3.treemap)のプログラムデモです。あまり見慣れないグラフですが、カテゴリーの重要度を面積で表示するものです。

サンプルデモ

上のグラフは下の図と同じ階層構造を表示しています(参考)。
表示されるのは末尾のノードのみで、それぞれの領域の面積が設定した値の大きさと一致します。また、同じ親をもつもので色分けがしてあり、青がCを親とするもので青の面積の合計がCの値、緑がHを親とするもので緑の面積の合計がHの値になります。

サンプルプログラム

解説

 1. 描画用のデータ準備

描画用のデータを用意します。データ構造の詳細はこちらを参照ください。また、すべての末端ノードに、treemapの大きさを表示するためのvalue値を設定します。

2. 描画用のデータ変換

準備したデータを、描画用のデータ構造に変更します。準備したデータ→hierarchy用のデータ→描画種類ごと(今回はtreemap)のデータと2段階の変換が必要です。

上記の関数でdataをhierarchy用のデータ構造rootに変更した後(データ構造詳細はこちらを参照)、value値を設定していないノードに、子孫ノードの合計value値を計算します。さらにtreemapの左上に一番合計値が大きいカテゴリーが来るようにソートしています。ソートしなければ指定したデータ構造に基づいてtreemapが作成されます。

次に、treemap用のデータに変更するための関数を呼び出します。

d3.treemap()で呼び出した関数にrootを引数として設定すると、次のデータがrootに付与されます。

x0 四角形の左端座標
y0 四角形の上端座標
x1 四角形の右端座標
y1 四角形の下端座標

また、d3.treemap()には以下の設定が可能です。

treemap.size() treemapレイアウト全体のサイズを[幅, 高さ]の2要素配列で設定します。引数が設定されていない場合は現在のサイズを返します。デフォルトは[1, 1]。
treemap.round() 計算の丸め(四捨五入)を許容するかを指定します。trueもしくはfalseで設定します。デフォルトはfalseです。
treemap.padding() 四角形の隙間の幅を設定します。値が設定されていない場合は現在の値を返します。
treemap.paddingInner() 同じカテゴリー内の隙間を設定します。値が設定されていない場合は現在の値を返します。デフォルトは0です。
treemap.paddingOuter() 異なるカテゴリー間の隙間を設定します。値が設定されていない場合は現在の値を返します。
treemap.paddingTop() 異なるカテゴリー間の隙間(j上部)を設定します。値が設定されていない場合は現在の値を返します。デフォルトは0です。
treemap.paddingRight() 上記と同じ、右側の隙間を設定します。
treemap.paddingBottom() 上記と同じ、下側の隙間を設定します。
treemap.paddingLeft() 上記と同じ、左側の隙間を設定します。

3 svg要素の配置

svg要素に”g”タグを設定した後、その中に”rect”と”text”を設定していきます。

データの割り当て部分で

の関数を使っていますが、これは入れ子になったrootから、末尾のノードだけを取り出して配列として並べてくれる関数です。

また、四角形の背景色として、

のように色を割り当てています。まず、2行目の部分で自分が属するカテゴリーを探索します。d.depth>1として二番目の深さのカテゴリーを設定しています。d3.schemeCategory10はD3.js v5から追加された配列で0~9の値を与えると、適当な色を返してくれます。今回は2番目の深さの親のvalue値に応じて色を変更する設定にしています。v4以前であれば、下のような関数を作って呼び出してもよいです。

まとめ

このグラフはカテゴリーの重要度が面積で一目でわかり、ビックデータの可視化手法としてかなり使えます。