LTデータの可視化と D3.js

シリーズ　その 1 ：可視化の歴史

jsCafe vol.14 　 2013/09/08（於） Web デザイン・プログラミングスクール

WAVETwitter ID:@otanet 　太田 博三

自己紹介（ @otanet ） ・ 背景： 2008 年まで環境問題（廃棄物）を研究。 　　　　　　　 - 産業廃棄物の不法投棄の実証分析 - 最終処分場の跡地利用の環境評価 - 用いた手法：ゲーム理論、統計解析 ・ これまでの取り組み：　 Web の KPI を用いたサイト改善の提案、 DB の

一元化　によるデータ活用等を担当し、現在、日本ディレク　　ション協会にて活動中！・ スタンス：統計解析をパターン認識・機械学習に応用し、幅広い分析のできるマーケターとして活

躍したい。•発表など http://www.slideshare.net/otanet/

　突然ですが、　いま、 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　

• 「すごプレ」