D3.jsはSVGを使って高度なビジュアル化を行うライブラリです。

グラフに限らず、様々なチャートやビジュアルの表現ができますが、複雑な仕組みを覚えなければなりません。他のグラフライブラリなどではCSVデータを適用するだけというものもありますが、D3.jsはそこまで簡単ではありません。

今回はD3.jsで折れ線グラフ(Line Chart)を描画してみる | Will Style Inc.|神戸にあるウェブ制作会社を参考に、なるべく段階を区切ってD3.jsの使い方を解説します。

インストール

インストールはMonaca IDEのJS/CSSライブラリの管理でD3を検索するか、index.htmlに次の記述を行います。

HTML側での準備

HTMLは body タグ内に次の記述を行います。グラフの大きさはスタイルシートで調整してください。

今回はCSVのパース用ライブラリと、JavaScriptを記述するファイルを追加しています。

JavaScriptについて

www/js/app.js の内容について解説します。
今回は塗りつぶしまで行ってみます。段階としては次のように分かれます。

D3.js用のDOM取得、については大して説明はいらないでしょう。D3.jsではjQueryのような形でDOMコンテンツを取得したり、作成できます。ここでは先ほどbodyタグ内に記述した #chart--wrapper の取得と、その中に svg タグを記述しています。

1. データを取得

次は、データの取得を行う getData 関数についての解説です。

今回は機械学習によく使われるAAPL.CSVを使っています。このファイルは様々な場所で見かけますが、GitHubからダウンロードもできます。これを www/data/aapl.csv として保存します。

このデータを取得し、CSV解析ライブラリでテキストデータから配列に変換します。このステップは外部のWeb APIなどからデータを取得する場合には不要でしょう。

このデータの概要は以下のようになっています。日付が Date カラムに入っており、Open/Close/High/Lowというデータがあります。

2. データを整形する

次にデータを整形します。

日付は YYYY-MM-DD という形式になっていますので d3.timeParse を使って変換します。さらに値もCSVで解析したままでは文字列なので parseFloat を使って数値にします。そしてデータの中に日付が入っていない不正なものも含まれていたので、filterを使って除外しています。

この下準備でD3.jsで使えるデータになります。

3. グラフの枠を準備する

D3.jsではデータを渡せば後は勝手に表示してくれるという訳ではありません。まずSVGを用意したのと同様に、グラフを描画する枠を準備します。これはもちろんX軸、Y軸の二つがあります。各コードの内容はコメントを参考にしてください。

この結果として、グラフの枠だけが表示されます。

4. 折れ線グラフを描画

グラフの枠はできあがったので、値を折れ線グラフとして描画していきます。ここは先ほどのグラフ枠の生成に比べるとシンプルです。こちらもコードはコメントを参考にしてください。

これで折れ線グラフが描画できました。

5. 塗りつぶし

最後にグラデーションを使った塗りつぶしを行ってみます。これは、上が線と同じ色、下は白とグラデーションで表示する方法です。見ると分かりますが、上半分はSVGに関する記述になります。

このようにすると、グラフにグラデーションをかけられます。

まとめ

D3.jsを使いこなす上で大事なのはSVGを把握することです。D3.jsによってSVGが幾分使いやすくなっていますが、それでも基本的なSVGを分かっていないとどう使っていいかも分からないでしょう。そしてSVGのセットアップができたら、D3.jsのオブジェクトを作成し、SVGとD3.jsオブジェクトをミックスして描画するといった形です。

基本的にSVGなので、JavaScriptとの親和性は高く、マウスオーバーでツールチップを出したり(スマートフォンでは難しそうですが)、アニメーションを追加することもできます。使いこなせば、かなり高度なグラフィックス表現に使えますので、ぜひトライしてみてください。

D3.js - Data-Driven Documents