スコット・マレイ
コード・アーティスト

Tutorials > D3 > セットアップ

セットアップ

最終更新日 2013年1月1日(原文)  2013年03月20日(翻訳 / h.sakai

D3 のダウンロード

最初にプロジェクト用の新しいフォルダを作成します。お薦めはそのフォルダの中に d3 という名前のサブフォルダを作ることです。次に d3 フォルダに最新版の d3.v3.js をダウンロードし、ZIP ファイルを解凍します。現在の D3 の最新版はバージョンは 3.0.1 です。

D3 はミニファイ版の d3.v3.min.js でも提供されています。これはファイルサイズを小さくし、読み込み時間を速くするために通常版から空白文字を除去したバージョンです。どちらを使っても機能に変わりありません。一般的には、開発中は(デバグを容易にするために)通常版で作業し、プロジェクトを公開する段になったら(読み込み時間の最適化のために)ミニファイ版に切り替える手法がとられます。好きな方法を選んで構わないのですが、このチュートリアルでは通常版を使用します。

三つ目の選択肢は、D3 のレポジトリを丸ごとダウンロードする方法です。レポジトリ中には JavaScript ファイルだけではなくすべてのコンポーネントのソースコードが含まれています。ダウンロードする前にレポジトリの内容を確認することも、全部まとめて ZIP ファイルでダウンロードすることもできます。

D3 へのリンク

プロジェクトフォルダの中に index.html という名前の空の HTML ページを作ります。フォルダ構成は次のようになっているはずです。

project-folder/
   d3/
      d3.v3.js
      d3.v3.min.js (必要な場合)
   index.html

次に index.html に以下のコードを貼り付けてください。これで head 内で D3 を参照するようになり、bodyscript タグ内に自分の JavaScript コードを書く準備が整いました。

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="utf-8">
         <title>D3 Test</title>
         <script type="text/javascript" src="d3/d3.v3.js"></script>
      </head>
      <body>
         <script type="text/javascript">
            // ここに D3 スクリプトを書きます
         </script>
      </body>
</html>

ページの表示方法

ページをブラウザに表示するのは、単に HTML ファイルを開くだけでよい場合もあります。しかし外部データを読み込むためのより確実な方法は、ローカルの WEB サーバを立ち上げ、http://localhost:8888/ として表示させることです。MAMP のようなサーバを利用する方法もありますし、d3 wiki のノートには すぐに一時的なサーバを起動する方法が記載されています。

次章は要素の追加

インタラクティブ・データ・ヴィジュアライゼーション このチュートリアルの書籍版の翻訳がオライリー・ジャパンより発売されました。タイトルは『インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化』です(画像をクリックするとアマゾンに飛びます)。

このチュートリアルを大幅に拡充し、3倍近い内容となっています。JavaScriptを中心に基礎編をさらに詳しく解説し(書籍版第3章)、応用編としてモーション、イベント、レイアウト、地図の作成法、データのエクスポート(PDFやSVG等)の章が追加されています(同9章~13章)。アマゾンのページで目次を見ることができます。

本チュートリアルがわかりにくいと感じられた方、あるいは本チュートリアルを終え、さらに応用力を身につけたいと思われた方のどちらにもお勧めの内容となっています。

翻訳はコンピュータ・プログラミング関連書籍を多数翻訳されている長尾高弘氏です。