Software Design plusシリーズエンジニアのための データ可視化[実践]入門
D3.jsによるWebの可視化

書籍の概要

この本の概要

データの可視化とは,「データに含まれる事実・示唆を効率よく発見する技術」,「データから発見した事実・示唆を明確に伝える技術」ということができます。本書では,データ可視化の基本に始まり,何を可視化すべきで,誤った考え方は何かなどを解き明かしたあと,JavaScriptライブラリD3.jsの使い方,D3.jsによるWebの可視化のさまざまなケーススタディまで,エンジニアの方がさまざまな業務の現場で直面するであろうデータ可視化の考え方と手法をわかりやすく解説します。

こんな方におすすめ

  • アプリケーションエンジニア
  • サーバエンジニア/インフラエンジニア
  • データ分析に携わるエンジニア

目次

第1部 序
第1章 データ可視化とは

  • 1.1 データ可視化の歴史
    • 1.1.1 近代グラフの発明家(18世紀)
    • 1.1.2 初期のグラフによる表現(19世紀)
    • 1.1.3 インフォグラフィクスの始まり(20世紀)
    • 1.1.4 学術的な認知
    • 1.1.5 現代
  • 1.2 まとめ

第2部 理論
第2章 データ可視化の種類

  • 2.1 配列
    • 2.1.1 棒グラフ
    • 2.1.2 積上グラフ
    • 2.1.3 ヒストグラムƒ
    • 2.1.4 ファンネルグラフ
    • 2.1.5 折線グラフ
    • 2.1.6 パラレルチャート/レーダーチャート
    • 2.1.7 面グラフ
    • 2.1.8 円グラフ/ドーナツグラフ
    • 2.1.9 箱ひげ図
    • 2.1.10 散布図
    • 2.1.11 散布図行列
    • 2.1.12 バブルチャート
    • 2.1.13 ヒートマップ
    • 2.1.14 色つきテーブル(カラードテーブル/ヒートマップ)
  • 2.2 グラフ
    • 2.2.1 ツリーマップ
    • 2.2.2 パーティションダイアグラム
    • 2.2.3 Sankeyチャート
    • 2.2.4 力学グラフ(force directed graph)
  • 2.3 まとめ

第3章 データ可視化の基礎

  • 3.1 用語
    • 3.1.1 Webサーバのアクセスログ
    • 3.1.2 ソーシャルグラフ
  • 3.2 データセットから可視化への変換プロセス
    • 3.2.1 Webサーバのアクセスログ(再考)
  • 3.3 データ・データ変数・データ変数の性質
  • 3.4 視覚記号・視覚変数・視覚変数の性質
    • 3.4.1 視覚記号
    • 3.4.2 視覚記号が持つ視覚変数
    • 3.4.3 視覚変数が持つ性質
    • 3.4.4 視覚変数を選ぶときの注意点
  • 3.5 データ変数と視覚変数の対応
  • 3.6 可視化を構成する視覚記号
  • 3.7 データセットと可視化の対応関係
  • 3.8 まとめ

第4章 何を可視化すべきか

  • 4.1 「何を可視化するか」をどう決めるか
    • 4.1.1 なぜ可視化したいのか? 可視化の目的を明確にする
    • 4.1.2 KGIとKPIを決定する
    • 4.1.3 KPIの具体的な中身を定義する
  • 4.2 モデル── 目的変数と説明変数,操作変数
  • 4.3 頻繁に用いられる一般的なKPI
  • 4.4 KPI設計の注意点
    • 4.4.1 KGIとの関係が明確であること
    • 4.4.2 必要最低限のKPIに絞る
    • 4.4.3 定義を明確にする
  • 4.5 データ分類の切り口
    • 4.5.1 質的データ,量的データ
    • 4.5.2 尺度水準
    • 4.5.3 データの種類
  • 4.6 KPIを作る
    • 4.6.1 データを組み合わせる
    • 4.6.2 データを変換する
    • 4.6.3 比較用の指標を使う
    • 4.6.4 要約統計量を用いる
  • 4.7 まとめ

第5章 可視化によくある過ち

  • 5.1 避けるべきグラフ
  • 5.2 グラフの恣意的な加工
    • 5.2.1 グラフの省略
    • 5.2.2 棒の幅
    • 5.2.3 目盛操作
  • 5.3 要約統計量による誤解
    • 5.3.1 要約統計量を使うべきかということから考えるべきケース
    • 5.3.2 どの要約統計量を使うべきか選択が難しいケース
  • 5.4 時系列変化の指標を明記しないケース
  • 5.5 相関と因果
    • 5.5.1 見せかけの相関
    • 5.5.2 因果関係の逆転
    • 5.5.3 こじつけと偶然
  • 5.6 誤った可視化をしないためのチェックリスト
  • 5.7 まとめ

第6章 探索的データ解析入門

  • 6.1 探索的データ解析の基本概念
  • 6.2 可視化による探索的データ解析
    • 6.2.1 分布を把握する――ヒストグラムの使い方
    • 6.2.2 3つ以上の分布を比較する――箱ひげ図の使い方
    • 6.2.3 変数の関係を可視化する――散布図と散布図行列
  • 6.3 まとめ

第7章 Webでの可視化の特徴

  • 7.1 インタラクション
    • 7.1.1 選択範囲の絞り込み
    • 7.1.2 ドリルダウン/ドリルアップ
    • 7.1.3 インタラクションと探索的データ解析
  • 7.2 URLによる共有と継続的な可視化
    • 7.2.1 より見られる可視化
    • 7.2.2 継続的なデータ可視化
  • 7.3 アニメーション(時間変化の可視化)
  • 7.4 Webによる可視化の特徴の組み合わせ
  • 7.5 まとめ

第3部 実践
第8章 CoffeeScriptの紹介

  • 8.1 コメント/ブロックコメント/文字列内挿入/ブロックテキスト
  • 8.2 関数
  • 8.3 配列生成,部分配列
  • 8.4 演算子
  • 8.5 ループ
  • 8.6 クラス
  • 8.7 まとめ

第9章 D3.js入門

  • 9.1 D3.jsとは?
  • 9.2 SVGとは
    • 9.2.1 具体例
    • 9.2.2 SVGで利用できる要素
    • 9.2.3 Path要素
    • 9.2.4 g要素
    • 9.2.5 注意点
  • 9.3 D3.jsの基本的な使い方
  • 9.4 基本となるAPI
    • d3.select
    • d3.selectAll
    • selection.attr
    • selection.style
    • selection.text
    • selection.append
    • selection.data / selection.datum
    • selection.enter / selection.exit
    • selector.on
  • 9.5 まとめ

第4部 事例
第10章 ケーススタディ

  • 10.1 本章の概要
    • 10.1.1 実行環境について
  • ケース1 サーバ情報の可視化
  • ケース2 サーバ情報のグラフへのリアルタイムの反映と範囲選択のインタラクション
  • ケース3 効果的な顧客属性・入会経路の可視化
  • ケース4 どこで顧客が脱落するか,離脱率の可視化
  • ケース5 ヒートマップを用いた売上推移可視化
  • ケース6 ニコニコ動画投稿/コメントの可視化
  • ケース7 アクセスフローの可視化
  • ケース8 様々なインタラクションを試してみよう。「税金はどこに行った?」を模写
  • ケース9 単語の解析と可視化
  • ケース10 両箱ひげ図
  • ケース11 状態遷移図
  • ケース12 決定木

付録

  • 付録1 可視化のツール/サービス/ライブラリ
  • 付録2 D3.js API ハンドブック
  • 付録3 参考文献ほか

著者プロフィール

森藤大地(もりふじだいち)

大学院にて自然言語処理・言語発達のニューラルネットワークなどの研究を行った後,ニフティ株式会社に入社。レコメンデーションエンジンの設計開発などを行い,現在,興味の赴くままにD3.js,HTML5,JavaScript,Node.js,MongoDB,Hadoop,機械学習などの勉強会に参加しつつ,日々開発業務を楽しんでいます。


あんちべ(あんちべ)

統計屋。