初めてのD3 | Yasushi Noguchi Class

1. なぜデータの視覚化が必要なのか

現代は情報過多の時代であり、データ自体はインターネットなどに溢れかえっていますが、公開されている統計資料はMicrosoft Excelなどの表データであることが多く、数字の羅列からそのデータの性質を俯瞰的に読み取ることは非常に困難です。一方、例えば棒グラフであれば誰でも直感的にデータを読み取ることができます。
当然のことながら、データは恣意的に編集し視覚化することも可能であることから、作成者の意図によって見る人に間違った印象を与えたりする可能性もありますが、それでもなお、データを視覚化するということは、「世界を新しい視点から眺める」ということに他ならず、予期しなかったパターンや隠された情報さえも表出させることができるパワフルな手法だと言えます。

2. なぜインタラクティブである必要があるのか

インフォグラフィックスという言葉が示す通り、静止画によるデータの視覚化も依然として重要です。しかし、静止した画像情報は、単一的な視点からしかデータを眺めることができないのに対し、インタラクティブな手法によって複数の切り口からデータを眺めるということは、同じ情報から多角的な視点による関係性を見い出すことが可能になります。現代における統計データは非常に複雑で大量に存在することから、インタラクティブな手法によるデータの視覚化はますます必要性を増していくでしょう。

次の例は、オバマ大統領の2013年度のアメリカ合衆国予算案を視覚化したインタラクティブグラフィックスです。
このメディアの優れた点は、全体の予算の増減、一般会計と特別会計の増減の差、部門別の予算の増減などが一つのメディアで分かるようになっています。非常に洗練された視覚化の例だと言えます。

オバマ政権における2013年の国家予算提案の内訳

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

3. D3.jsとは

D3.js（Data-Driven Documents　データ駆動型ドキュメント）は、 2011年からMichael Bostockによって開発が始められたwebブラウザで様々なグラフを描くことができるJavaScriptライブラリです。グラフを作成できるJavaScriptライブラリは様々なものがありますが、もっとも自由度の高いライブラリだと考えていいでしょう。引き換えに、他のライブラリに比べて若干難解な部分はあります。
D3.jsは、SVG(Scalable Vector Graphics）という、Adobe Illustratorなどで使われているベクター画像を表示する規格です。つまり、jpegやpngのようなビットマップデータと違い、拡大縮小しても画質が損なわれないという特徴を持っています。

D3.jsの2021年9月時点でのバージョンは、7.6.1です。
https://github.com/d3/d3/releases

論より証拠ということで、様々なサンプルを見てみましょう。
https://github.com/d3/d3/wiki/Gallery

どうでしょうか。どんなことができそうかイメージが湧きましたか？

なお、D3.jsのver.7はJavaScriptのES6というバージョン以降に準拠していますが、ネット上で検索可能なサンプルコードはそれ以前のバージョンに準拠していることが多いので、レジュメは基本的にES6以前の書き方で進めます。最新のJavaScriptのバージョンで書きたい場合はES6以降のサンプルも添付していますので、参考にしてください。

4. D3.jsの開発環境

D3.jsは、実はエディタソフトがあれば使うことができます。代表的なソフトは、Windowsのメモ帳、秀丸エディタ、Macのmiなどですが、web用の開発環境としては、MicrosoftのVisual Studio Code、AdobeのBracketsやSublime Textが有名です。もちろんそれ以外にも有償無償含めて様々なエディタがありますので、好きなものを選んでください。

参考サイト

5. まずはhtmlを書く

まずは、htmlファイル内でD3.jsを使う準備をします。以下のコードをエディタ上で書いて保存し、ブラウザで表示してください。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
    </head>
    <body>
            // Your beautiful code will go here
    </body>
</html>

6行目に以下のコードを記述し、このファイルでD3を使用することを宣言します。

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

さらに、bodyタグないに以下のコードを記述します。

<script type="text/javascript">
    // D3のコード
</script>

この、<body>や<html>という要素を操作する仕組みのことをDOM（Document Object Model）と呼びます。直訳すると書類をオブジェクトとして扱うモデルとなります。D3は、これらのDOM要素にアクセスし、追加・修正・削除等の操作を行います。

01_empty_page_template ダウンロード

6. 初めてのD3のコード

それでは、「// D3のコード」の箇所に以下のコードを記述してください。

d3.select("body").append("p").text("新しいテキスト!");

これは、bodyタグを選び、pをbodyの中にappend（追加）し、さらにそのpの中にtextを表示するという意味になります。
このように、複数のメソッド（もしくは関数）をピリオドでつなげて複数の機能を実行することを「メソッドチェーン」と呼びます。jQueryでも同じような書き方をします。
このように横につなげていく書き方でもいいのですが、コードが長くなると読みにくいので、以下のようにピリオドの前で揃えてみましょう。コードとしては同じ意味です。

d3.select("body")
  .append("p")
  .text("新しいテキスト!");

また、「d3.select(“body”)」はこのコード内のbodyタグで囲まれた部分を参照している（指している）ので、この参照先を変数に入れることもできます。

var body = d3.select("body");
var p = body.append("p");
p.text("新しいテキスト!");

02_new_element ダウンロード