lt データ可視化とd3.js js_cafe_20130908_otanet
DESCRIPTION
最近、D3.jsが「WEB+DB Press」や「データベースエンジニア要請読本」などの雑誌に取り上げられています。「データの可視化」といっても、立場によって異なるものなので、少し整理してみようと思いました。プレゼンの形式は、「すごプレ」を参考につくってみました。TRANSCRIPT
![Page 1: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/1.jpg)
LTデータの可視化と D3.js
シリーズ その 1 :可視化の歴史
jsCafe vol.14 2013/09/08(於) Web デザイン・プログラミングスクール
WAVETwitter ID:@otanet 太田 博三
![Page 2: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/2.jpg)
自己紹介( @otanet ) ・ 背景: 2008 年まで環境問題(廃棄物)を研究。 - 産業廃棄物の不法投棄の実証分析 - 最終処分場の跡地利用の環境評価 - 用いた手法:ゲーム理論、統計解析 ・ これまでの取り組み: Web の KPI を用いたサイト改善の提案、 DB の
一元化 によるデータ活用等を担当し、現在、日本ディレク ション協会にて活動中!・ スタンス:統計解析をパターン認識・機械学習に応用し、幅広い分析のできるマーケターとして活
躍したい。•発表など http://www.slideshare.net/otanet/
![Page 3: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/3.jpg)
突然ですが、 いま、 D3.js があちこ
ちで取り上げられていますよね!
3
![Page 4: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/4.jpg)
4
ざっと、 8 月から 9 月までで、
5 冊以上出版されている!
![Page 5: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/5.jpg)
5
slideshare とか含めれば、30 本以上もある!
![Page 6: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/6.jpg)
6
いったい、何が起きているのか!
最近の本をてがかりに、 少し考えてみよう!
![Page 7: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/7.jpg)
• さまざまな立場の人が注目している! 7
D3.js ライブラリーの立場から
クリエイターの立場から
DB エンジニアの立場から
データサイエンティストの立場から
![Page 8: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/8.jpg)
プロットしてみよう!
8
クリエーターより
DB ・ / サーバーより
アクセスログ・ビックデータよりフロント・バックエンドより
![Page 9: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/9.jpg)
イメージだと、こんな感じに!
9
アクセスログ・ビックデータより
クリエーターより
フロント・バックエンドより
DB ・ / サーバーより
![Page 10: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/10.jpg)
3 つのグループに分けられそうだ!
• 上記の図からどんなことがいえるか!
10
![Page 11: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/11.jpg)
js が圧倒的なシェアを占めている!
• 上記の図からどんなことがいえるか!
11
時代は Js だ!いやっ、Js が時代だ!そして勉強会はj sCafe だ!
![Page 12: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/12.jpg)
データの可視化の歴史< 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による運用化に向けて、ブラウザがjsと対応するようになり、上記の OSSでは重すぎるので不
適格とし、SocketIOなどやnode.jsとの組み合わせによる開発が普及するようになる。• 以前、SVGは使えんよう人もいたが、HTML5やD3などのライブラリー、GAのD3での仕様などで、使用用途も
拡大してきている。12
次回にもっと、わかりやすく、説明します。
次回につづく・・
![Page 13: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/13.jpg)
13
次回以降のトピック(仮案)‐データの可視化の歴史‐インフォグラフ、-ストーリーテリング、-ビジネスインテリジェンス(BI)、-ネットワークの可視化入門-ネットワーク可視化のためのグラフ理論、‐RとD3.jsの連携、‐Fluentd(Open Source Log Management)との比較・・・
![Page 14: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/14.jpg)
14
ご声調、ありがとうございます!
今日、はじめて、「すごプレ」本のようにやってみました。
次回以降、よろしくお願いいたします!
![Page 15: LT データ可視化とd3.js js_cafe_20130908_otanet](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5565f886d8b42a20158b5251/html5/thumbnails/15.jpg)
参考文献・ 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
• 「すごプレ」