JavaScriptによるデータビジュアライゼーション入門

はじめに

1章　データの可視化
    1.1　基本的な棒グラフの作成
        ステップ 1：必要なJavaScriptを読み込む
        ステップ 2：グラフを設定する<div>要素を用意する
        ステップ 3：データを定義する
        ステップ 4：グラフを描く
        ステップ 5：縦軸を修正する
        ステップ 6：横軸を修正する
        ステップ 7：スタイルを調整する
        ステップ 8：棒の色を変更する
        ステップ 9：Flotr2の「バグ」を回避する
    1.2　折れ線グラフを使った連続データのプロット
        ステップ 1：データを定義する
        ステップ 2：CO2データをグラフ化する
        ステップ 3：気温データを追加する
        ステップ 4：グラフを見やすくする
        ステップ 5：気温測定値をはっきりさせる
        ステップ 6：グラフにラベルを付ける
        ステップ 7：Flotr2の「バグ」を回避する
    1.3　円グラフによる割合の強調
        ステップ 1：データを定義する
        ステップ 2：グラフを描く
        ステップ 3：値にラベルを付ける
        ステップ 4：Flotr2の「バグ」を回避する
    1.4　散布図によるX/Yデータのプロット
        ステップ 1：データを定義する
        ステップ 2：データをフォーマットする
        ステップ 3：データをプロットする
        ステップ 4：グラフの軸を調整する
        ステップ 5：データにラベルを付ける
        ステップ 6：x軸を明確にする
        ステップ 7：ユーザの疑問に答える
        ステップ 8：Flotr2の「バグ」を回避する
    1.5　バブルチャートによるX/Yデータへの大きさの追加
        ステップ 1：データを定義する
        ステップ 2：グラフの背景を作成する
        ステップ 3：データをプロットする
        ステップ 4：背景を追加する
        ステップ 5：バブルに色を付ける
        ステップ 6：凡例のスタイルを調整する
        ステップ 7：Flotr2の「バグ」を回避する
    1.6　レーダーチャートによる多次元データの表示
        ステップ 1：データを定義する
        ステップ 2：グラフを作成する
        ステップ 3：Flotr2の「バグ」を回避する
    1.7　まとめ

2章　グラフをインタラクティブにする
    2.1　グラフ内容の選択
        ステップ 1：必要なJavaScriptライブラリを読み込む
        ステップ 2：グラフを設定する<div>要素を用意する
        ステップ 3：データを準備する
        ステップ 4：グラフを描く
        ステップ 5：コントロールを追加する
        ステップ 6：インタラクションのためのデータ構造を定義する
        ステップ 7：インタラクション状態に基づいてグラフデータを決める
        ステップ 8：JavaScriptを使ってコントロールを追加する
        ステップ 9：インタラクションコントロールに対応する
    2.2　グラフの拡大
        ステップ 1：ページを用意する
        ステップ 2：グラフを描く
        ステップ 3：インタラクションをサポートするためのデータを準備する
        ステップ 4：インタラクションイベントを受け取る準備をする
        ステップ 5：インタラクションを有効にする
    2.3　データ値の追跡
        ステップ 1：グラフを設定する<div>要素を用意する
        ステップ 2：データを準備する
        ステップ 3：グラフを描く
        ステップ 4：インタラクションを実装する
    2.4　Ajaxによるデータの取得
        ステップ 1：ソースデータを理解する
        ステップ 2：Ajaxを介して第1段階のデータを取得する
        ステップ 3：第1段階のデータを処理する
        ステップ 4：実際のデータを取得する
        ステップ 5：データを処理する
        ステップ 6：グラフを作成する
    2.5　まとめ

3章　ページ上でのグラフの統合
    3.1　一般的なスパークラインの作成
        ステップ 1：必要なJavaScriptライブラリを読み込む
        ステップ 2：スパークライン用にHTMLマークアップを作成する
        ステップ 3：スパークラインを描く
        ステップ 4：グラフのスタイルを調整する
    3.2　多くの変数のグラフ化
        ステップ 1：HTMLマークアップを準備する
        ステップ 2：グラフを描く
        ステップ 3：グラフのデフォルトスタイルを決める
        ステップ 4：特殊クラスのデフォルトスタイルを変更する
        ステップ 5：特定のグラフに固有のスタイルを作成する
    3.3　スパークラインに注釈を付ける
        ステップ 1：データを準備する
        ステップ 2：HTMLマークアップを準備する
        ステップ 3：グラフを追加する
        ステップ 4：主要な注釈を追加する
        ステップ 5：追加情報を提供する
    3.4　合成グラフを描く
        ステップ 1：出来高グラフを描く
        ステップ 2：終値グラフを追加する
        ステップ 3：注釈を追加する
        ステップ 4：詳細をグラフとして示す
    3.5　クリックイベントへの対応
        ステップ 1：グラフを追加する
        ステップ 2：クリックイベントに対応する
        ステップ 3：遷移を改善する
        ステップ 4：アニメーションにする
    3.6　リアルタイムでのグラフの更新
        ステップ 1：データを取得する
        ステップ 2：グラフを更新する
    3.7　まとめ

4章　特殊なグラフの作成
    4.1　ツリーマップによる階層の可視化
        ステップ 1：必要なライブラリを読み込む
        ステップ 2：データを準備する
        ステップ 3：ツリーマップを描画する
        ステップ 4：色に陰影をつけて追加データを表す
    4.2　ヒートマップによる領域の強調
        ステップ 1：必要なJavaScriptを読み込む
        ステップ 2：可視化データを定義する
        ステップ 3：背景画像を作成する
        ステップ 4：可視化を備えたHTML要素を用意する
        ステップ 5：データをフォーマットする
        ステップ 6：マップを描画する
        ステップ 7：ヒートマップのz-indexを調整する
    4.3　ネットワークグラフによる関係の表示
        ステップ 1：必要なライブラリを読み込む
        ステップ 2：データを準備する
        ステップ 3：グラフのノードを追加する
        ステップ 4：ノードをエッジでつなぐ
        ステップ 5：レイアウトを自動化する
        ステップ 6：インタラクティブ性を持たせる
    4.4　ワードクラウドによる言語パターンの解明
        ステップ 1：必要なライブラリを読み込む
        ステップ 2：データを準備する
        ステップ 3：必要なマークアップを追加する
        ステップ 4：簡単なクラウドを作成する
        ステップ 5：インタラクティブ性を持たせる
    4.5　まとめ

5章　年表の表示
    5.1　ライブラリを使った年表の作成
        ステップ 1：必要なライブラリを読み込む
        ステップ 2：データを準備する
        ステップ 3：年表を描画する
        ステップ 4：データ用にChronoline.jsオプションを設定する
    5.2　JavaScriptを使った年表の作成
        ステップ 1：HTMLの骨組みを用意する
        ステップ 2：JavaScript実行を開始する
        ステップ 3：セマンティックHTMLで年表を作成する
        ステップ 4：補助コンテンツを追加する
        ステップ 5：オプションでjQueryを利用する
        ステップ 6：CSSで年表の問題を修正する
        ステップ 7：スタイルを追加して年表を視覚的に構造化する
        ステップ 8：インタラクティブ性を持たせる
    5.3　Webコンポーネントの使用
        ステップ 1：標準コンポーネントをプレビュー表示する
        ステップ 2：必要なコンポーネントを追加する
        ステップ 3：データを準備する
        ステップ 4：デフォルトの年表を作成する
        ステップ 5：年表のスタイルを調整する
    5.4　まとめ

6章　地理データの可視化
    6.1　地図フォントの使用
        ステップ 1：ページにフォントを読み込む
        ステップ 2：1つの国を表示する
        ステップ 3：複数の国を1つの地図に結合する
        ステップ 4：データに基づいて国を変える
        ステップ 5：凡例を追加する
    6.2　スケーラブルベクターグラフィックへの取り組み
        ステップ 1：SVG地図を作成する
        ステップ 2：ページに地図を埋め込む
        ステップ 3：データを収集する
        ステップ 4：配色を定義する
        ステップ 5：地図に色を付ける
        ステップ 6：凡例を追加する
        ステップ 7：インタラクティブ性を持たせる
    6.3　コンテキストに地図を追加する
        ステップ 1：Webページを用意する
        ステップ 2：データを準備する
        ステップ 3：地図のスタイルを選ぶ
        ステップ 4：地図を描画する
        ステップ 5：目撃情報を追加する
    6.4　機能を完備した地図作成ライブラリの統合
        ステップ 1：データを準備する
        ステップ 2：Webページとライブラリを用意する
        ステップ 3：土台となる地図を描画する
        ステップ 4：地図に路線を追加する
        ステップ 5：アニメーションコントロールを追加する
        ステップ 6：アニメーションを用意する
        ステップ 7：路線をアニメーション化する
        ステップ 8：停車駅のラベルを作成する
        ステップ 9：ラベルアニメーションを作成する
        ステップ 10：アニメーションステップにラベルアニメーションを組み込む
        ステップ 11：タイトルを追加する
    6.5　まとめ

7章　 D3.jsによる独自の可視化
    7.1　従来の種類のグラフの適用
        ステップ 1：データを用意する
        ステップ 2：Webページを用意する
        ステップ 3：可視化のためのステージを作成する
        ステップ 4：グラフの大きさを制御する
        ステップ 5：グラフの枠組みを描画する
        ステップ 6：グラフにデータを追加する
        ステップ 7：ユーザの疑問に答える
    7.2　力指向ネットワークグラフの作成
        ステップ 1：データを準備する
        ステップ 2：ページを用意する
        ステップ 3：可視化のためのステージを作成する
        ステップ 4：グラフのノードを描画する
        ステップ 5：グラフのエッジを描画する
        ステップ 6：要素の位置を決める
        ステップ 7：グラフに力指向を追加する
        ステップ 8：インタラクティブ性を持たせる
        ステップ 9：他の改善を試みる
    7.3　拡張性のある地図の作成
        ステップ 1：データを準備する
        ステップ 2：ページを用意する
        ステップ 3：地図投影法を作成する
        ステップ 4：SVGコンテナを初期化する
        ステップ 5：地図データを取得する
        ステップ 6：地図を描画する
        ステップ 7：気象データを取得する
        ステップ 8：データをプロットする
        ステップ 9：インタラクティブ性を持たせる
    7.4　固有のグラフの作成
        ステップ 1：データを準備する
        ステップ 2：ページを用意する
        ステップ 3：可視化のためのステージを作成する
        ステップ 4：スケールを作成する
        ステップ 5：データを取得する
        ステップ 6：グラフを描画する
        ステップ 7：領域に色を付ける
        ステップ 8：グラフをインタラクティブにする
    7.5　まとめ

8章　ブラウザでのデータ管理
    8.1　関数型プログラミングの使用
        ステップ 1：命令型バージョンから始める
        ステップ 2：命令型コードをデバッグする
        ステップ 3：命令型プログラミングにより起こりうる問題を理解する
        ステップ 4：関数型プログラミングスタイルで書き直す
        ステップ 5：性能を評価する
        ステップ 6：性能問題を修正する
    8.2　配列を使う
        位置での要素の抽出
        配列の結合
        無効なデータ値の削除
        配列要素の検索
        配列の作成
    8.3　オブジェクトの拡張
        キーと値を使う
        オブジェクトサブセットの整理
        属性の更新
    8.4　コレクションの操作
        反復ユーティリティの利用
        コレクション要素の検索
        コレクションの検査
        コレクションの再配置
    8.5　まとめ

9章　データ駆動型 Webアプリケーションの構築：その 1
    9.1　フレームワークとライブラリ
        ステップ 1：アプリケーションライブラリを選ぶ
        ステップ 2：開発ツールのインストール
        ステップ 3：新しいプロジェクトを定義する
        ステップ 4：固有の依存関係を追加する
    9.2　モデルとビュー
        ステップ 1：アプリケーションのモデルを選ぶ
        ステップ 2：モデルを実装する
        ステップ 3：アプリケーションのコレクションを選ぶ
        ステップ 4：アプリケーションのメインビューを選ぶ
        ステップ 5：メインビューのテンプレートを選ぶ
        ステップ 6：メインビューを改良する
    9.3　可視化のためのビュー
        ステップ 1：追加のビューを選ぶ
        ステップ 2：Detailsビューを実装する
        ステップ 3：Propertiesビューを実装する
        ステップ 4：Mapビューを実装する
        ステップ 5：Chartsビューを実装する
    9.4　まとめ

10章　データ駆動型 Webアプリケーションの構築：その2
    10.1　Nike+サービスとの接続
        ステップ 1：ユーザを認可する
        ステップ 2：Nike+レスポンスを受け入れる
        ステップ 3：コレクションのページングを行う
        ステップ 4：ビューを動的に更新する
        ステップ 5：コレクションをフィルタリングする
        ステップ 6：レスポンスを解析する
        ステップ 7：詳細を取得する
    10.2　全部をまとめる
        ステップ 1：Backbone.jsルータを作成する
        ステップ 2：コレクション外のRunモデルをサポートする
        ステップ 3：ユーザにビューを変更させる
        ステップ 4：アプリケーションを微調整する
    10.3　まとめ

索引