D3.js v4/v5 入門⑤ – グラフの書き方

2018-02-21

チュートリアル目次

  1. 環境準備
  2. 要素の追加方法
  3. データのバインド方法
  4. SVGの基礎
  5. グラフの書き方

散布図の作成方法

簡単なグラフのサンプルとして散布図を作成します。今回は次のデータを使います。

[ ]は配列で、[ [x座標1, y座標1], [x座標2, y座標2], …]のような形式の二次元配列のデータです。

まず、座標を丸を表示する”circle”を使って表示していきます。

 

 

“circle”に割り当てたデータは二次元配列のため”circle”には[x座標, y座標]のデータが、例えば、一つ目の”circle”には[5, 20]が割り当てられます。これをcx,cy属性にそれぞれ設定しています。次に座標位置をx座標,y座標の形式でテキストで表示してみます。

 

x座標は右に向かって増加するので良いのですが、y座標は下に向かって増加していますし、グラフにするには縦横比をもう少し変えたいところです。スケールの変換には次のD3の関数を使います。

この関数はdomainで指定した範囲をrangeで指定した範囲に変換する関数を作成して、scaleに設定してくれます。

例えば、

とすると 20 が返ってきます。これは、[0, 500]のレンジを[0,100]のレンジに変更、つまり、座標を1/5にした結果です。

これをグラフに適用します。グラフの幅と高さを設定します。

比率を4:3に設定しました。

ここで、データの最大値を求めるためにd3.max()を使います。d3.maxは第一引数に配列を、第二引数に返り値を関数で指定できます。y座標は逆転させたいので、rangeの第一引数に大きい値を入れています。

この関数を使って、描画しなおしてみます。

 

y座標は下側が小さくなっていますし、縦横比も4:3になりました。 最後に軸を書いていきます。こちらはD3の関数が用意されています。

 先ほどの、scaleと組み合わせて使います。下側の軸を表す、d3.axisBottomのほかに、d3.axisTop、d3.axisRight、d3.axisLeftがあります。これをcall関数で呼び出すと下のように軸を記載してくれます。

 

 

が位置と軸のメモリを表示する幅を考慮してくれません。そこで、次のように

位置を移動させます。これらを考慮するとグラフを描画するコードは下記のようになります。

 

これで散布図が完成です。プロットの色も青くしてみました。

このサイトには、他にもD3のサンプルを多数用意しています。 よろしければご覧ください。

 

チュートリアル目次

  1. 環境準備
  2. 要素の追加方法
  3. データのバインド方法
  4. SVGの基礎
  5. グラフの書き方