LT
データの可視化とD3.js
シリーズ その1：可視化の歴史
jsCafe vol.14 2013/09/08
（於）Webデザイン・プログラミングスクー
ルWAVE
Twitter ID:@otanet 太田 博三

自己紹介（@otanet）
•背景： 2008年まで環境問題（廃棄物）を研究。
-産業廃棄物の不法投棄の実証分析
-最終処分場の跡地利用の環境評価
-用いた手法：ゲーム理論、統計解析
•これまでの取り組み：
WebのKPIを用いたサイト改善の提案、DBの一元
化
によるデータ活用等を担当し、現在、日本ディ
レク
ション協会にて活動中！
•スタンス：統計解析をパターン認識・機械学習
に応用し、幅広い分析のできるマーケターとして

突然ですが、
いま、D3.jsがあちこ
ちで取り上げられてい
ますよね！
3

4
ざっと、8月から9月ま
でで、
5冊以上出版されてい
る！

5
slideshareとか含めれば、
30本以上もある！

6
いったい、何が起きているの
か！
最近の本をてがかりに、
少し考えてみよう！

• さまざまな立場の人が注目している！ 7
D3.jsライブラ
リーの立場か
ら
クリエイター
の立場から
DBエンジニ
アの立場から
データサイ
エンティス
トの立場か
ら

プロットしてみよう！
8
クリエーター
より
DB・/サーバーよ
アクセスログ・ビックデータよ
り
フロント・
バックエンド
より

イメージだと、こんな感じに！
9
アクセスログ・ビックデータよ
り
クリエーター
より
フロント・
バックエンド
より
DB・/サーバーよ

3つのグループに分けられそう
だ！
• 上記の図からどんなことがいえる
か！
10

jsが圧倒的なシェアを占めてい
る！
• 上記の図からどんなことがいえる
か！
11
時代はJsだ！
いやっ、
Jsが時代だ！
そして勉強会
は
ｊsCafeだ！

データの可視化の歴史
＜ 1990年代＞
• IT業界ではデータの可視化（D3.js）をビジネスインテリジェンス（BI：ビィーアイ）という。
＜2000年代＞
• 2008年のリーマンショックでBIが減速。
∵時代は経営層の意思決定！
データをひと目で見て、データから売上などの現状がスピーディーにわかる、スピード性が求められてい
た！
→主要ソフトはSAS Institute Japanの「SAS」、「SPSS」、SAP等、ウイングアークテクノロジの「Dr.sum」
しかし、
＜2005年以降＞
• オープンソース（OSS）が台頭
＜2010年＞
•
Apacheに続き、Hadoopが、Jubatusが、、OSSが台頭してきた。
• ここで、データマイニングを前提とした著名なマイニングのソースコードがApache財団にそのまま寄贈
された。よって、hadoop/ Mahaut上でレコメンドエンジンの実装が可能となり、クラスタリングやナ
イーブベイズなどマイニングも可能となる。
＜2012年＞
• Yahoo!社がGoogle社の検索エンジンを同じものに採用した後は、ソーシャルゲームやコクコク配信シス
テムが出てきて、リアルタイム処理が重要視されるようになる。
• Hadoop/ MahautはたしかにOSSであるが、テラバイト級のビックデータの処理に秀でている。
＜2013年＞
• HTML5のW3Cによる運用化に向けて、ブラウザがｊｓと対応するようになり、上記のOSSでは重すぎるの
で不適格とし、SocketIOなどやnode.jsとの組み合わせによる開発が普及するようになる。
• 以前、SVGは使えんよう人もいたが、HTML5やD3などのライブラリー、GAのD3での仕様などで、使用用
途も拡大してきている。
12
次回にもっと、わかりやすく、説明
します。
次回につづ
く・・

13
次回以降のトピック（仮案）
‐データの可視化の歴史
‐インフォグラフ、
-ストーリーテリング、
-ビジネスインテリジェンス（BI）、
-ネットワークの可視化入門
-ネットワーク可視化のためのグラフ理論、
‐RとD3.jsの連携、
‐Fluentd（Open Source Log Management）との比較
・・・

14
ご声調、ありがとうございます！
今日、はじめて、「すごプレ」本のよ
うにやってみました。
次回以降、よろしくお願いいたしま
す！

参考文献・URI等一覧（逐次更新します）
15
• 「WEB+DB PRESS Vol.76」
• http://p.tl/6iKg サンプルデータはここにあるよ→ http://p.tl/hiiN
@門脇さんの、ソフトウェアエンジニアの立場からわかりやすく、説明されて
いる。
• 「データベースエンジニア養成読本」 http://p.tl/TZ_v
• Nifty@森藤さんので、Dev.Opsの視点からサーバーの異常検知などの視点から、ス
トーリテラーも含めて書いてある。生データを可視化することが重要と言ってい
る。ナポレオン進軍はともあれ、エンタメ性（→インフォグラフィック？）では
なく、データを可視化して、実用に生かそうというもの。
• ※Connpasで森藤さん主催の「データの可視化 Handson」の勉強会で上記は作成さ
れたもの。 http://connpass.com/event/2403/
• 「Interactive Data Visualization for the Web」
http://p.tl/cMlm
上記の洋書をhttp://p.tl/0VJB(オンラインで見られます！)
上記の日本語補足（D3.jsのチュートリアル）
http://ja.d3js.info/alignedleft/tutorials/d3/
• 「HTML5 インタラクティブ表現ガイド」
• http://p.tl/D2ch
• 「Visualize This!」
• http://p.tl/pAHH