D3.jsの概要

D3.jsの説明、使い方、環境作成
Tags:

D3.jsとは？

D3.js（Data-Driven Documents）は、データを可視化するJavaScriptライブラリである。データ可視化といえばD3.jsと言われるほど有名なライブラリである。D3は略称であり、Web上でデータ可視化のフレームワークを構築できる。

他のライブラリとは異なり、関数にデータを渡せばそのまま描画してくれるものではなく、用意したデータを描画用のデータに変換し、変換したデータをもとに画面を構成していく。1つの表示を作るにはいくつかの処理を組み合わせる必要があるが、他のライブラリに比べて汎用性が非常に高く、アイデアがあればさまざまな表現が可能である。

公式サイトのギャラリーには多くのサンプルがあり、どのような表現ができるのかを確認できる。

開発に必要なものは、テキストエディタ（メモ帳、Visual Studio Code、Sublime Textなど）とブラウザ（Google Chrome推奨）だけなので、無料で簡単に始められる。ライセンスもフリー（修正BSDライセンス）で、商用利用も可能である。

事前知識としてはHTML、JavaScript、CSS、SVGまたはCanvasがあるとよいが、ここでは知識がない人でも使い始められるように説明していく。

D3を使用すると、SVGチャートを簡単かつ便利に作成できる。HTML文書のSVGオブジェクトとして表現され、CSSでデザイン要素を調整し、JavaScriptを使って操作できる。

D3.jsを使用する理由

  • 非常に柔軟である。
  • 使いやすく高速である。
  • 大規模なデータセットをサポートする。
  • 宣言的なアプローチを使用する。
  • コードの再利用性が高い。
  • さまざまな曲線を作成できる。
  • データをHTMLページに結び付ける。

D3では通常、データ形式としてJSONを使用する。このときローカルで実行すると、JavaScriptのセキュリティポリシーによってクロスブラウジング関連の問題が発生し、実行できないことがある。そのためJSONファイルを使用する場合は、Node.jsやTomcatを利用して実行するのがよい。

D3.jsの動作過程

D3.jsは次の順序で動作する。

データの読み込み（Loading）

  • 視覚要素を描画する前に、表示したいデータをブラウザのメモリへ読み込む。
  • .tsv、.csv、.jsonなど、さまざまな形式のデータを連携できる。

データの結び付け（Selecting - Binding）

  • データを視覚要素と連携させる。
  • 視覚要素内にデータ値を入力したコードに合わせて連携させる。
  • 必要なHTML文書要素を新しく作成し、データを結び付ける。

視覚要素の指定（Transform）

  • データの視覚的な要素を指定する。
  • 各文書要素に結び付けられた個別データをもとに、その文書要素を変換する。
  • グラフの種類、要素の色、軸や凡例の有無など、さまざまな要素を指定できる。
  • 円グラフやツリーマップなど、グラフ種類ごとのレイアウトコードが用意されている。

ユーザー反応の指定（Transition）

  • クリックやドラッグなど、ユーザー反応に応じた効果を指定できる。
  • ユーザー入力に反応して、文書要素の状態をある値から別の値へ遷移させる。

D3.jsの動作過程

D3.jsの使い方

D3.jsの使い方について見ていこう。

ダウンロードして使用する

次の公式サイトからd3.jsをダウンロードし、フォルダに直接配置して使用する方法がある。

CDNで使用する

次のコードを追加して使用する方法もある。

<script src="https://d3js.org/d3.v7.min.js"></script>

環境を作成する

まずテキストエディタを用意し、次のテキストをコピーする。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <script>
      // ここにコードを記述する。
    </script>
  </body>
</html>

テキストエディタはメモ帳でも使用できるが、Visual Studio CodeやSublime Textなどのプログラムは、関数などを色分けしてくれて動作も軽いためおすすめである。

テキストをコピーした後、適切なファイル名で適当な場所に保存する。ここではindex.htmlとして保存した。

保存したらGoogle Chromeで開く。Google Chromeで開く方法はいくつかあるが、先にGoogle Chromeを開き、そこへファイルをドロップする方法が簡単である。

何もない白い画面が次のように開くはずである。
D3.jsを始める

この白い画面に要素を追加する。
D3.jsを始める
D3.jsの説明に入る前に、Google Chromeの開発者ツールについて説明する。画面右上の点（下図の赤い部分）をクリックしてメニューを開き、「その他のツール」->「デベロッパーツール」を選択する。

すると、次のような情報が表示される。
D3.jsを始める

現在のindex.htmlの構造が表示される。head情報が折りたたまれている場合は、<head>の左側にある三角形をクリックすると表示される。

<head>と</head>の間にはタイトルなどのヘッダー情報が記述され、<body>と</body>の間には実際にブラウザへ表示される文書の本体が記述される。<script>はJavaScriptのコードを記述するタグである。

<head>タグ内では、次のようにD3.jsライブラリを読み込んで使用できるようにしている。

<script src="https://d3js.org/d3.v7.min.js"></script>

ここで使用されるバージョンはv7であり、別のバージョンを使用する場合はこの部分を修正すればよい。