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

チュートリアル > D3 > 基礎編

基礎編

最終更新日 2012年12月30日(原文)  2013年3月19日(翻訳 / h.sakai

D3 を使うためには以下の概念を理解しておく必要があります。

HTML

ハイパーテキスト・マークアップ・ランゲージはウェブブラウザのコンテンツ作成のために使います。次のコードは最も単純な HTML ページの例です。

<html>
   <head>
      <title>ページタイトル</title>
   </head>
   <body>
      <h1>ページタイトル</h1>
      <p>とても面白い内容</p>
   </body>
</html>

DOM

ドキュメント・オブジェクト・モデルは HTML の階層構造を表したものです。かぎカッコに囲まれたそれぞれのタグが要素です。要素間の相対的な関係を、人間の関係になぞらえて、親( parent )、子( child )、兄弟( sibling )、先祖( ancestor )、子孫( descendant )などと表します。上記の HTML の例で body は、その子である h1p(両者は互いに兄弟)の両方の親要素となります。また、ページ上内のすべての要素は html の子孫になります。

ウェブブラウザは DOM を解析してページコンテンツを理解します。

CSS

カスケーディング・スタイル・シートは、HTML ページの見た目のスタイルを設定するために使います。次のコードは簡単な CSS スタイルシートの例です。

body {
   background-color: white;
   color: black;
}

CSS のスタイルはセレクタ規則の組み合わせです。セレクタはスタイルを適用するための要素を指定します。

h1          /* レベル1の見出しを選択       */
p           /* パラグラフを選択             */
.caption    /* "caption"クラスの要素を選択" */
#subnav     /* IDが"subnav"の要素を選択"    */

規則とは属性のことで、これを列挙してスタイルを構成します。

color: pink;
background-color: yellow;
margin: 10px;
padding: 25px;

セレクタと規則は波カッコで結合します。

p {
   font-size: 12px;
   line-height: 14px;
   color: black;
}

D3 は 操作する要素を指定するために CSS スタイルのセレクタを用います。したがってセレクタの使い方を理解しておくことが大切です。

CSS ルールは、次のようにドキュメントの head 部に直接記述することができます。

<head>
   <style type="text/css">
      p {
         font-family: sans-serif;
         color: lime;
      }
   </style>
</head>

あるいは拡張子.css の外部ファイルに記述し、ドキュメントの head 部でそのファイルを参照することもできます。

<head>
   <link rel="stylesheet" href="style.css">
</head>

JavaScript

JavaScript は動的なスクリプト言語です。ブラウザがページを読み込んだ後にそれを変更することができます。

スクリプトは、次のように二つの script タグで囲んで HTML 内に直接記述することができます。

<body>
   <script type="text/javascript">
      alert("Hello, world!");
   </script>
</body>

あるいは独立したファイルに記述し、HTML のどこかで(一般的には head 部で)そのファイルを参照することもできます。

<head>
   <title>ページタイトル</title>
   <script type="text/javascript" src="myscript.js"></script>
</head>

デベロッパー・ツール

ブラウザに付属しているデベロッパー・ツールを使いこなしましょう。Webkit ブラウザ( Safari や Chrome )であれば、次のような WEB インスペクタを表示できます。

Safari’s web inspector

ブラウザメニューの「ソースを表示」が単に元の HTML ソースを表示するだけなのに対し、WEB インスペクタは現在の DOM の状態を表示します。DOM 要素は動的にプログラムによって変更されるためこの機能は有益です。要素の変化を WEB インスペクタで監視でき、JavaScript コンソールを使ってデバグも可能です。詳しくは debugging HTML, CSS, and JavaScript with the web inspector and console をご覧ください。

SVG

D3 が本領を発揮するのは、レンダリング表示に SVG(スケーラブル・ベクター・グラフィックス)を用いたときです。SVG はテキストベースの画像フォーマットです。つまり、SVG 画像がどう表示されるかを、HTML タグによく似た、簡単なマークアップコードの記述だけで指定できます。実際、SVG コードを直接 HTML ドキュメント内に記述することもできます。ウェブブラウザは、もう何年も前から SVG フォーマットをサポートしてきましたが (ただし Internet Explorer は除く)、最近まであまり利用されることはありませんでした。

ここで実際に、小さな青い円を表示する SVG コードを書いてみましょう。

<svg width="50" height="50">
   <circle cx="25" cy="25" r="22"
   fill="blue" stroke="gray" stroke-width="2"/>
</svg>

円の上で右クリックしてみてください。画像ではありませんね?ブラウザをズームしてみましょう。ベクターグラフィックらしく、ズームにあわせて円がスムーズに拡大・縮小するのがわかるでしょう。

D3 に SVG が必須というわけではありません。しかし SVGを使うことで、通常の HTML 要素では不可能な様々な視覚表現が可能になるのです。

次章はセットアップ

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

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

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

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