D3.js v4/v5 散布図(ScatterPlot)の書き方

2018-02-25

D3で基本的なグラフ、散布図を書く方法を紹介します。

サンプルデモ

サンプルプログラム

解説

こちらのチュートリアルで散布図を書く方法を詳しく紹介しています。このサンプルはチュートリアルに加え、上下左右のマージンの個別設定とラベルを追加しています。ここでは簡単に説明します。

1. データの準備

マージンを設定するために、オブジェクトを用意します。

下側と左側は、軸を表示するため、マージンを大きめに設定しています。

2. SVG領域の設定

SVGの表示領域を設定します。

3. 軸スケールの設定

軸スケールを設定します。

はdomainで設定したレンジをrangeで設定したレンジに変換する関数を設定します。散布図上の座標を画面上のピクセル値に変換する関数を作成します。

4. 軸の表示

D3の関数d3.axisBottom()とd3.axisLeft()を使って軸要素を設定します。引数を軸スケールの設定で設定した関数とし、callで呼び出すことでSVG要素が自動的に追加されます。

.ticks()はメモリの数を制御するメソッドです。整数で設定します。

軸を呼び出した後、text要素で軸のラベルを追加します。

“text-anchor”はテキストの位置揃えをするための属性で、”middle”で中央揃えを設定しています。それぞれ、軸にかぶらないように35pxずつ移動しています。

5. プロットの表示

プロットを”circle”要素で表示します。

まとめ

散布図は最もよく用いるグラフの一つです。詳しい作り方はチュートリアルにまとめていますのでそちらも参照いただければと思います。