D3.jsでグラフを作ろう
本章では、D3.jsでHTMLのSVG上にグラフを描く方法について共有します。
D3.jsとは
D3.jsは、本家(日本向け)で以下のように説明しています。
D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。D3 はHTML や SVG、 CSSを使ってデータに命を吹き込みます。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でグラフを描く行程は、大きく以下の通りとなります。
- キャンバスの用意
- 縮尺の決定
- xy軸の作成
- グラフの作成
それでは、実際にグラフを作成してみましょう。
キャンバスの用意
まず、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でグラフを作ろう」でした。