本文へスキップします。

【参】モーダルJS:読み込み
書籍DB:詳細

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

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

  • 著者Stephen A. Thomas古籏 一浩 監訳木下 哲也
  • 定価3,888円 (本体3,600円+税)
  • 判型B5変
  • 400頁
  • ISBN978-4-87311-746-1
  • 発売日2015/10/21
  • 発行元オライリー・ジャパン

JavaScriptのライブラリ群を使って効果的なグラフを作成!

JavaScript、HTML、CSSというWeb開発者が使い慣れたツールのみを使って、効果的で見栄えのするグラフの作成方法を、ステップバイステップで紹介する優れたチュートリアルです。さまざまなデータ可視化手法がある中で、どのようなスタイルが効果的なのか、そしてWebの制約の中でどのように行うのかを解説します。基本的なグラフから、樹形図、ヒートマップ、ネットワークグラフ、ワードクラウド、時系列グラフ、地理情報、複合グラフといった複雑なグラフの作成方法まで、初心者から中上級者までのニーズをカバーしています。
はじめに
1章 データの可視化
1.1 基本的な棒グラフの作成
ステップ 1:必要なJavaScriptを読み込む
ステップ 2:グラフを設定する
要素を用意する
ステップ 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:グラフを設定する
要素を用意する
ステップ 3:データを準備する
ステップ 4:グラフを描く
ステップ 5:コントロールを追加する
ステップ 6:インタラクションのためのデータ構造を定義する
ステップ 7:インタラクション状態に基づいてグラフデータを決める
ステップ 8:JavaScriptを使ってコントロールを追加する
ステップ 9:インタラクションコントロールに対応する
2.2 グラフの拡大
ステップ 1:ページを用意する
ステップ 2:グラフを描く
ステップ 3:インタラクションをサポートするためのデータを準備する
ステップ 4:インタラクションイベントを受け取る準備をする
ステップ 5:インタラクションを有効にする
2.3 データ値の追跡
ステップ 1:グラフを設定する
要素を用意する
ステップ 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 まとめ
索引