「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」を執筆しました

僕のような人間が書いていいのか、とは執筆前・執筆中・そして執筆が終わった今もずっと思っていますが、兎にも角にも書き終わりました。

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

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

2月20日に書店に並ぶそうです。

内容について

うまく伝えられているかはわからないですが下記のようなことを意識して書きました

  • データ可視化は情報との対話であり、「データに存在する事実を掬い上げやすく加工する」「データに存在する事実を効率的に伝える」作業そのものである
  • データ可視化はデータ処理(収集・保持・分析・解析)と企画者(施策・経営)のコミュニケーションを円滑にするものである

上記を実現するために必要な知識として次のような内容を紹介しました

  • データ可視化の歴史
  • 代表的なデータ可視化の種類(端的にいうとグラフの種類)
  • データ可視化のための用語「データ」「視覚記号」「データ変数」「視覚変数」
  • データ変数の尺度・水準、視覚変数の特性の対応関係
  • 可視化が受容可能な視覚変数の数、つまり可視化で表現できる変数の数

また、可視化を行うときにやりがちな失敗(要素数が多い円グラフ、3D円グラフ、絵グラフ、不揃いな軸・変数)や探索的データ可視化についても盛り込みました。

そして、最後に12のケースに対して、実際にD3.jsで可視化を作成するサンプルコードを付けました。

D3でのデータ可視化のサンプル

実際の業務でも作成していそうな以下の12のケースの可視化をD3で作成するサンプルを紹介しました。 複合的なグラフやインタラクションなどはなかなか(代表的な可視化ツールとして)エクセルでは作成が難しく、D3での作成にメリットが大きいサンプルだと感じています。

  • 基本的な折線グラフの作成
  • 時々刻々と入力されるデータをアニメーションで反映させる方法・時系列範囲を指定してフォーカスする可視化の作成
  • 顧客属性などのアトリビューション分析 (ツリーマップ)
  • 離脱率を可視化する (折線グラフ・バブルチャート)
  • ヒートマップを用いた購買価格帯の推移の可視化 (ヒートマップ)
  • ニコニコ動画の投稿日時・コメントの投稿日時の可視化 (ヒートマップ)
  • アクセスフローの可視化(sankey チャート)
  • 税金はどこにいったの模写
  • 単語の解析結果の可視化(棒グラフとワードネット)
  • 両箱ひげ図 (箱ひげ図)
  • 状態遷移図
  • 決定木

最後に

私は、データ可視化の専門的な教育を受けたわけでもありませんし、素晴らしい技術者でもありません。 しかし、データ可視化という分野はまだまだ市民権を得ている技術分野でもないため、私のような人間に執筆の機会がいただけたのだと思っています。

と書いたとおり、優しく議論させていただければと思います。

で、事前の言い訳会「こういう話をじつはこういう経緯で書いたよ」とか「サンプルの真意はこんなだよ」を説明する会を開きます→Zusaarはこちら

あまり聞いたことがないと思いますので、可視化の理論とD3のデモを話そうかと思っております。

謝辞

共著者のあんちべさん、レビュアーの本郷様、市原様、井戸さん、春山様、山根様ありがとうございました!