インタラクティブ・データビジュアライゼーション

―D3.jsによるデータの可視化

[cover photo]
TOPICS
Database , HTML/CSS , JavaScript
発行年月日
PRINT LENGTH
296
ISBN
978-4-87311-646-4
原書
Interactive Data Visualization for the Web
FORMAT
Print PDF
Ebook
3,080円
Ebookを購入する
Print
3,080円

D3は、ウェブページにロードしたデータからビジュアルを生成するJavaScriptベースのツールです。本書は、プログラマではない人々を対象として、D3を使ったデータビジュアライゼーションのプログラミングについて解説しています。ビジュアルのスキルはあるもののデータやコードをいじったことがないアーティストやグラフィックデザイナ、または大量のデータを持っているがビジュアルやコードを相手にしたことがないジャーナリストや研究者などには、本書が大いに役立つでしょう。もちろん、データの可視化について学びたい読者にもおすすめします。

関連ファイル

目次

はじめに
本書での表記
サンプルコードの引用について
問い合わせ先
謝辞

1章 イントロダクション
    1.1 なぜデータビジュアライゼーションなのか
    1.2 なぜコードを書くのか
    1.3 なぜ対話的にしようというのか
    1.4 なぜウェブ上でなのか
    1.5 この本は何なのか
    1.6 この本の読者は誰なのか
    1.7 この本は何ではないのか
    1.8 サンプルコードの使い方
    1.9 ありがとう

2章  D3とは何か
    2.1 何をしてくれるのか
    2.2 何をしないのか
    2.3 起源と歴史
    2.4 ほかのツール
        2.4.1 簡単なグラフ作成
        2.4.2 グラフのビジュアライゼーション
        2.4.3 ジオマッピング
        2.4.4 ほとんど 0から作る
        2.4.5 3D
        2.4.6 D3 で作られたツール

3章 技術的な基礎
    3.1 ウェブ
    3.2 HTML
        3.2.1 コンテンツ+構造
        3.2.2 要素によって構造を追加する
        3.2.3 よく使われる要素
        3.2.4 属性
        3.2.5 クラスとID
        3.2.6 コメント
    3.3 DOM
    3.4 デベロッパツール
    3.5 レンダリングとボックスモデル
    3.6 CSS
        3.6.1 セレクタ
        3.6.2 プロパティと値
        3.6.3 コメント
        3.6.4 スタイルの参照
        3.6.5 継承、カスケード、限定性
    3.7 JavaScript
        3.7.1 Hello, Console
        3.7.2 変数
        3.7.3 変数のその他の型
        3.7.4 配列
        3.7.5 オブジェクト
        3.7.6 オブジェクトと配列
        3.7.7 算術演算子
        3.7.8 比較演算子
        3.7.9 制御構造
        3.7.10 関数
        3.7.11 コメント
        3.7.12 スクリプトを参照する
        3.7.13 JavaScript のあれこれ
    3.8 SVG
        3.8.1 SVG 要素
        3.8.2 単純な図形
        3.8.3 SVG 要素のスタイル
        3.8.4 レイヤーと描画順
        3.8.5 透明度
    3.9 互換性についてのメモ

4章 セットアップ
    4.1 D3 をダウンロードする
    4.2 D3 を参照する
    4.3 ウェブサーバーをセットアップする
        4.3.1 Python で書かれたサーバー
        4.3.2 MAMP、WAMP、LAMP
    4.4 さあ始めよう

5章 データ
    5.1 ウェブページの要素を生成する
        5.1.1 チェイン構文
        5.1.2 コードの細かい解説
        5.1.3 バトン渡し
        5.1.4 チェインなしに書き換える
    5.2 データをバインドする
        5.2.1 バインドの構成要素
        5.2.2 データ
        5.2.3 要素を選択して下さい
        5.2.4 バインドを確認する
        5.2.5 データを使う
        5.2.6 無名関数
        5.2.7 ハグされたがるデータ
        5.2.8 テキストを越えて

6章 データによる描画
    6.1 div で描画する
        6.1.1 属性を設定する
        6.1.2 クラスについてのコメント
        6.1.3 棒グラフに戻る
        6.1.4 スタイルを設定する
    6.2 data() の威力
        6.2.1 ランダムデータ
    6.3 SVG を描画する
        6.3.1 SVG を作る
        6.3.2 データ駆動の図形
        6.3.3 きれいな色
    6.4 棒グラフを作る
        6.4.1 もとのグラフ
        6.4.2 新しいグラフ
        6.4.3 色
        6.4.4 ラベル
    6.5 散布図を作る
        6.5.1 データ
        6.5.2 散布図
        6.5.3 サイズ
        6.5.4 ラベル
    6.6 次のステップ

7章 スケール
    7.1 りんごとピクセル
    7.2 ドメインとレンジ
    7.3 正規化
    7.4 スケールを作る
    7.5 散布図をスケーリングする
    7.6 d3.min()と d3.max()
        7.5.2 ダイナミックスケールをセットアップする
        7.5.3 スケーリングされた値を組み込む
    7.6 プロットを改良する
    7.7 ほかのメソッド
    7.8 その他のスケール

8章 軸
    8.1 軸とは何か
    8.2 軸をセットアップする
    8.3 きれいな軸にする
    8.4 目盛りを見直す
    8.5 Y軸を追加する
    8.6 仕上げ
    8.7 目盛りのラベルを操作する

9章 更新、遷移、動き
    9.1 棒グラフをモダンに
    9.1 序数スケール
        9.1.2 丸めたバンドがレンジになる
        9.1.3 序数スケールを参照する
        9.1.4 その他の更新
    9.2 データの更新
        9.2.1 イベントリスナーを介したやり取り
        9.2.2 データを切り替える
        9.2.3 ビジュアルを更新する
    9.3 遷移
        9.3.1 duration():遷移にどれだけの時間をかけるか
        9.3.2 ease():動きの質を決める
        9.3.3 delay():始まるまで
        9.3.4 データをランダム化する
        9.3.5 スケールを更新する
        9.3.6 軸を更新する
        9.3.7 each():遷移の開始、終了時の処理
    9.4 その他のタイプのデータ更新
        9.4.1 値(及び要素)を追加する
        9.4.2 値(及び要素)を削除する
        9.4.3 データとキーの結合
        9.4.4 追加と削除
        9.4.5 復習

10章 対話的操作
    10.1 イベントリスナーをバインドする
    10.2 ふるまい入門
        10.2.1 ホバリングによる強調表示
    10.3 SVG 要素のグループ化
        10.3.1 クリックしてソート
    10.4 ツールチップ
        10.4.1 デフォルトブラウザツールチップ
        10.4.2 SVG 要素によるツールチップ
        10.4.3 HTML div ツールチップ
    10.5 タッチデバイスに対する配慮
    10.6 さらにその先へ

11章 レイアウト
    11.1 Pieレイアウト
    11.2 Stackレイアウト
    11.3 Forceレイアウト

12章 ジオマッピング
    12.1 GeoJSONについて
    12.2 パス
    12.3 投影法
    12.4 コロプレス
    12.5 点を追加する
    12.5 ジオデータの獲得とパース
        12.5.1 シェープファイルを見つけてくる
        12.5.2 解像度の選択
        12.5.3 シェープファイルの単純化
        12.5.4 GeoJSONに変換する

13章 エキスポート
    13.1 ビットマップ
    13.2 PDF
    13.3 SVG

付録 A 学習を深めるために
    A.1 書籍
    A.2 ウェブサイト
    A.3 Twitterのフォロー先

カラー図版
索引