kikki's tech note

技術ブログです。UnityやSpine、MS製品など技術色々について解説しています。

D3.jsでグラフを作ろう

本章では、D3.jsでHTMLのSVG上にグラフを描く方法について共有します。

D3.jsとは

D3.jsは、本家(日本向け)で以下のように説明しています。

D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。D3 はHTML や SVGCSSを使ってデータに命を吹き込みます。D3は WEB 標準に重点を置いており、強力な視覚化コンポーネントとデータドリブン (データ駆動型)DOM 操作手法の組み合わせにより、特定のフレームワークに縛られることなく、モダンブラウザの性能をフルに 引き出すことができます。
D3.js - 日本語ドキュメント

具体的例として、統計データをHTML上に、グラフを用いて描くことができます。D3.jsは、一般的な画像とは違い、ラスタデータではなくベクタデータであるため、グラフを大きくした場合でも滑らかに描かれます。
以下サイトを見ると、どのようなグラフを描けるか参考になります。
github.com

D3.jsを扱う際に必要なスキルは、最低限「javascript」を知っていれば、誰でも簡単に描けます。

D3.jsでの準備

D3.jsに必要な物は、唯一つ、本家で公開されている「js」ファイルだけです。以下URLをHTML側に読み込みましょう。

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

これで準備は完了です。

D3.jsでの制作行程

D3.jsでグラフを描く行程は、大きく以下の通りとなります。

  1. キャンバスの用意
  2. 縮尺の決定
  3. xy軸の作成
  4. グラフの作成

それでは、実際にグラフを作成してみましょう。

キャンバスの用意

まず、HTMLファイルにグラフを描く場所を用意します。
今回は、DIVタグをHTML上に配置しました。
hoge.html】

<div id="content"></div>

そしてjavascriptでは、上記で用意した場所を指定(select)し、「svg」を追加(append("svg"))します。最後に、幅と高さを指定(attr({width: 800, height: 600}))します。
hoge.js】

var content = d3.select("#content").append("svg").attr({width: 800, height: 600});

これでキャンバスの準備は完了です。

縮尺の決定

次に、縮尺を決めます。
注意点が一つあります。D3.jsでは原点が左上となっているため、y軸の値を反転する必要があります。
縮尺(scale)に対して、データの範囲(domain)を指定し、また描画範囲(range)を指定しています。y軸については、描画範囲を反転して利用します。
hoge.js】

var xScale = d3.scale.linear().domain([0, 10]).range([50, 540]);
var yScale = d3.scale.linear().domain([-5, 30]).range([760, 30]);

xy軸の作成

そしてxy軸を用意します。
軸として、前節で作成した縮尺を利用(scale(xScale))します。また、軸の配置場所を指定(orient)します。最後に、SVG上にグループを作り(append("g"))、軸を生成(call(xAxis))しています。
hoge.js】

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
content.append("g").call(xAxis);
content.append("g").call(yAxis);

グラフの作成

最後に、グラフとなる点をプロットします。
線グラフとして、線オブジェクトを指定(line())し、X座標とY座標の出力方法(x(function(d, i){~~~~}))を指定します。その後、SVG上にグループを作り、線グラフを生成(append("path").attr("d", ~~~))します。
hoge.js】

var line = d3.svg.line().interpolate("cardinal").x(function(d, i){return i;}).y(function(d, i){return d;});
content.append("path").attr("d", line([-2,0,8,9,2,1]));

これでグラフ作成の一連の流れを確認できました。

筆休め

本章では、HTML上でグラフを作る方法について、共有しました。D3.jsでゴリゴリ描く方法もあれば、以下の様な便利なライブラリもあるので、臨機応変に利用してリッチなHTMLコンテンツを作って頂ければと思います。
www.highcharts.com

以上、「D3.jsでグラフを作ろう」でした。

※無断転載禁止 Copyright (C) 2015 kikkisnrdec All Rights Reserved.