Webでもできるデータビジュアライゼーション
78
Webでもできる データビジュアライゼーション 2013/8/10 まにまにフェスティバルP2 門脇恒平 @kadoppe
-
Upload
kohei-kadowaki -
Category
Technology
-
view
4.127 -
download
6
description
2013/8/10に大阪で開催された「まにまにフェスティバル（まにフェス）P2」で使用したプレゼン資料です
Transcript of Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション2013/8/10 まにまにフェスティバルP2 門脇恒平 @kadoppe
名前：門脇 恒平 @kadoppe職業：ソフトウェアエンジニア所属：HTML5-West.jp コアメンバShareWis Inc. CTO
自己紹介
データビジュアライゼーションって何だろう？
What?
データビジュアライゼーション
データビジュアライゼーション
そのまんまの意味
データビジュアライゼーション
可視化
データを可視化すること
データを可視化したもの
データって何？
What?
データ（英: data。英語発音: /ˈdeɪtə/ デイタ、/ˈdætə/ ダタ、/ˈdɑːtə/ ダータ）とは、基礎的な事実や資料をさす言葉。情報処理や考察によって付加価値を与える前提で集められており、基本的に複数個の事象や数値の集合となっている。個々のデータのことを英語では datum （英語発音: /ˈdeɪtəm/ デイタム、データム）という。
http://ja.wikipedia.org/wiki/データ
データ（英: data。英語発音: /ˈdeɪtə/ デイタ、/ˈdætə/ ダタ、/ˈdɑːtə/ ダータ）とは、基礎的な事実や資料をさす言葉。情報処理や考察によって付加価値を与える前提で集められており、基本的に複数個の事象や数値の集合となっている。個々のデータのことを英語では datum （英語発音: /ˈdeɪtəm/ デイタム、データム）という。
http://ja.wikipedia.org/wiki/データ
難しい！わからない！
身近なところにデータはある
・Webサイトのアクセスログ・SNS上の友達関係・スマホからの位置情報・スポーツ選手の成績・etc.
身近なデータの例
なぜ可視化するの？
Why?
理由１：複雑なデータを見ても何かを知ることが難しいから
{"id":1483,"title":"Et In Mollitia","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":1,"latitude":-0.827678,"longitude":-0.0416767,"radius":817,"priority":1,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1484,"title":"Dignissimos Expedita Nesciunt Vitae Et","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":7,"latitude":0.411109,"longitude":-0.658991,"radius":725,"priority":0,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1485,"title":"Omnis Optio Autem Eos Soluta","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":1,"latitude":-0.921467,"longitude":0.830971,"radius":342,"priority":9,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1486,"title":"Vero Facere Doloribus Id Laborum","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":4,"latitude":0.399493,"longitude":-0.372682,"radius":296,"priority":9,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1487,"title":"Rem Et Repellendus Molestiae","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":6,"latitude":0.0471295,"longitude":-0.448484,"radius":1035,"priority":9,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1488,"title":"Sed Rerum Rem Qui Labore","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":2,"latitude":0.179707,"longitude":0.108137,"radius":682,"priority":8,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1489,"title":"Recusandae Laudantium Inventore","target":"Facilis distinctio harum debitis ipsum est repellendus omnis dolorem","estimated_time":6,"latitude":0.317327,"longitude":0.892203,"radius":857,"priority":0,"course_title":"Quo Minus Enim Ab Nulla","image":"/images/fallback/default.png","completed":false,"author":{"id":332,"username":"daija_casper","nickname":null}},{"id":1498,"title":"Assumenda Nemo","target":"Animi nemo omnis doloribus aliquid voluptate libero","estimated_time":8,"latitude":-0.536537,"longitude":-0.0589195,"radius":1388,"priority":3,"course_title":"Est Nihil Perferendis Consequatur","image":"/images/fallback/default.png","completed":false,"author":{"id":365,"username":"marie","nickname":null}},{"id":1499,"title":"Facilis Molestiae Reprehenderit","target":"Animi nemo omnis doloribus aliquid voluptate libero","estimated_time":3,"latitude":0.227728,"longitude":-0.54173,"radius":503,"priority":7,"course_title":"Est Nihil Perferendis Consequatur","image":"/images/fallback/default.png","completed":false,"author":{"id":365,"username":"marie","nickname":null}},{"id":1500,"title":"Fugit Numquam Magni Est Repellendus","target":"Animi nemo omnis doloribus aliquid voluptate libero","estimated_time":5,"latitude":-0.0405635,"longitude":0.217758,"radius":200,"priority":1,"course_title":"Est Nihil Perferendis Consequatur","image":"/images/fallback/default.png","completed":false,"author":{"id":365,"username":"marie","nickname":null}},{"id":1501,"title":"Et Quia Alias Facere Beatae","target":"Animi nemo omnis doloribus aliquid voluptate libero","estimated_time":2,"latitude":0.701472,"longitude":-0.778355,"radius":275,"priority":6,"course_title":"Est Nihil Perferendis Consequatur","image":"/images/fallback/default.png","completed":false,"author":{"id":365,"username":"marie","nickname":null}},{"id":1502,"title":"Magni Quis Amet Dolorum","target":"Animi nemo omnis doloribus aliquid voluptate libero","estimated_time":7,"latitude":-0.203591,"longitude":-0.913329,"radius":920,"priority":2,"course_title":"Est Nihil Perferendis Consequatur","image":"/images/fallback/default.png","completed":false,"author":{"id":365,"username":"marie","nickname":null}}],"lecture_links":[{"id":142,"from_lecture_id":10,"to_lecture_id":766},{"id":144,"from_lecture_id":93,"to_lecture_id":960},{"id":30,"from_lecture_id":382,"to_lecture_id":117},{"id":186,"from_lecture_id":764,"to_lecture_id":319},{"id":122,"from_lecture_id":786,"to_lecture_id":39},{"id":172,"from_lecture_id":839,"to_lecture_id":310},{"id":28,"from_lecture_id":933,"to_lecture_id":916},{"id":176,"from_lecture_id":963,"to_lecture_id":211},{"id":111,"from_lecture_id":1245,"to_lecture_id":271},{"id":71,"from_lecture_id":1255,"to_lecture_id":703}],"areas":[{"id":1,"name":"Error","latitude":-0.296154,"longitude":-0.337479,"lectures":[]},{"id":2,"name":"Sint","latitude":0.222852,"longitude":0.672233,"lectures":[]},{"id":3,"name":"Doloribus","latitude":-0.155865,"longitude":-0.846577,"lectures":[]},{"id":4,"name":"Aperiam","latitude":-0.588554,"longitude":0.943062,"lectures":[]},{"id":5,"name":"Sunt","latitude":-0.644573,"longitude":0.0537761,"lectures":[]},{"id":6,"name":"Quis","latitude":0.988751,"longitude":-0.220552,"lectures":[]},{"id":7,"name":"Exercitationem","latitude":-0.604344,"longitude":-0.752454,"lectures":[]},{"id":8,"name":"Omnis","latitude":-0.184628,"longitude":-0.804204,"lectures":[]},{"id":9,"name":"Similique","latitude":-0.207225,"longitude":-0.802956,"lectures":[]},{"id":10,"name":"Temporibus","latitude":0.0964795,"longitude":-0.467207,"lectures":[]},{"id":11,"name":"Facere","latitude":-0.191647,"longitude":0.879321,"lectures":[]},{"id":12,"name":"Soluta","latitude":-0.00540847,"longitude":-0.936694,"lectures":[]},{"id":13,"name":"Ipsa","latitude":0.718604,"longitude":0.740671,"lectures":[]},{"id":14,"name":"Rem","latitude":-0.374852,"longitude":0.93132,"lectures":[]},{"id":15,"name":"Ut","latitude":-0.00145833,"longitude":0.27256,"lectures":[]},{"id":16,"name":"Porro","latitude":0.730947,"longitude":-0.00247166,"lectures":[]},{"id":17,"name":"Odit","latitude":-0.483232,"longitude":0.467218,"lectures":[]},{"id":18,"name":"Est","latitude":-0.926676,"longitude":0.152803,"lectures":[]},{"id":19,"name":"Et","latitude":0.467571,"longitude":0.732176,"lectures":[]},{"id":20,"name":"Consequuntur","latitude":0.877647,"longitude":0.0600595,"lectures":[]},{"id":21,"name":"Ut","latitude":-0.237807,"longitude":-0.363187,"lectures":[]},{"id":22,"name":"Officia","latitude":0.964536,"longitude":-0.348976,"lectures":[]},{"id":23,"name":"Voluptatum","latitude":-0.578006,"longitude":0.71343,"lectures":[]},{"id":24,"name":"Ipsa","latitude":0.0285004,"longitude":0.679528,"lectures":[]},{"id":25,"name":"Qui","latitude":-0.376584,"longitude":0.69004,"lectures":[]},{"id":26,"name":"Eum","latitude":-0.533457,"longitude":-0.274135,"lectures":[]},{"id":27,"name":"Consequatur","latitude":0.732464,"longitude":-0.956671,"lectures":[]},{"id":28,"name":"Voluptates","latitude":0.100456,"longitude":0.163952,"lectures":[]},{"id":29,"name":"Beatae","latitude":0.341744,"longitude":-0.100863,"lectures":[]},{"id":30,"name":"Suscipit","latitude":-0.680867,"longitude":0.52059,"lectures":[]}],"sub_areas":[{"id":1,"name":"Enim","latitude":-0.876632,"longitude":0.809253,"lectures":[]},{"id":2,"name":"Cupiditate","latitude":-0.115012,"longitude":0.873928,"lectures":[]},{"id":3,"name":"Voluptatem","latitude":0.720074,"longitude":0.582866,"lectures":[]},{"id":4,"name":"Aut","latitude":-0.891177,"longitude":-0.267507,"lectures":[]},{"id":5,"name":"Eum","latitude":-0.0956232,"longitude":0.869623,"lectures":[]},{"id":6,"name":"Incidunt","latitude":-0.141511,"longitude":0.849488,"lectures":[]},{"id":7,"name":"Eveniet","latitude":0.344572,"longitude":-0.964607,"lectures":[]},{"id":8,"name":"Esse","latitude":-0.957538,"longitude":-0.945685,"lectures":[]},{"id":9,"name":"Eum","latitude":0.84946,"longitude":0.559915,"lectures":[]},{"id":10,"name":"Ea","latitude":0.0818624,"longitude":-0.689251,"lectures":[]},{"id":11,"name":"Nam","latitude":0.405188,"longitude":-0.536927,"lectures":[]},{"id":12,"name":"Doloribus","latitude":0.386354,"longitude":0.89373,"lectures":[]},{"id":13,"name":"Corporis","latitude":0.907445,"longitude":-0.231195,"lectures":[]},{"id":14,"name":"Veniam","latitude":0.250888,"longitude":0.271509,"lectures":[]},{"id":15,"name":"Qui","latitude":-0.0355562,"longitude":0.691546,"lectures":[]},{"id":16,"name":"Exercitationem","latitude":-0.783944,"longitude":0.669883,"lectures":[]},{"id":17,"name":"Sit","latitude":0.945752,"longitude":0.167431,"lectures":[]},{"id":18,"name":"Voluptatem","latitude":0.50432,"longitude":0.276525,"lectures":[]},{"id":19,"name":"Assumenda","latitude":0.64421,"longitude":0.977164,"lectures":[]},{"id":20,"name":"Iure","latitude":0.343454,"longitude":-0.739321,"lectures":[]},{"id":21,"name":"Aperiam","latitude":0.672663,"longitude":0.254398,"lectures":[]},{"id":22,"name":"Perspiciatis","latitude":-0.305407,"longitude":0.647599,"lectures":[]},{"id":23,"name":"Corrupti","latitude":-0.215153,"longitude":-0.117241,"lectures":[]},{"id":24,"name":"Tempore","latitude":-0.487299,"longitude":-0.00267482,"lectures":[]},{"id":25,"name":"Molestiae","latitude":-0.0673953,"longitude":0.751808,"lectures":[]},{"id":26,"name":"Et","latitude":-0.696528,"longitude":0.809538,"lectures":[]},{"id":27,"name":"Fugiat","latitude":-0.871912,"longitude":-0.625169,"lectures":[]},{"id":28,"name":"Quos","latitude":0.824723,"longitude":0.49526,"lectures":[]},{"id":29,"name":"Velit","latitude":0.694365,"longitude":0.496888,"lectures":[]},{"id":30,"name":"Esse","latitude":0.401573,"longitude":-0.0353998,"lectures":[]},{"id":31,"name":"Tempora","latitude":-0.673155,"longitude":0.831576,"lectures":[]},{"id":32,"name":"Sapiente","latitude":0.618535,"longitude":-0.33999,"lectures":[]},{"id":33,"name":"Quia","latitude":0.892558,"longitude":-0.381549,"lectures":[]},{"id":34,"name":"Qui","latitude":-0.77198,"longitude":-0.712152,"lectures":[]},{"id":35,"name":"Molestiae","latitude":0.545021,"longitude":0.0161866,"lectures":[]},{"id":36,"name":"Facilis","latitude":-0.847924,"longitude":-0.943891,"lectures":[]},{"id":37,"name":"Omnis","latitude":0.0429588,"longitude":0.503525,"lectures":[]},{"id":38,"name":"Eum","latitude":-0.460205,"longitude":0.343149,"lectures":[]},{"id":39,"name":"Voluptatem","latitude":-0.724984,"longitude":-0.646275,"lectures":[]},{"id":40,"name":"Quis","latitude":0.378197,"longitude":0.985287,"lectures":[]},{"id":41,"name":"Nobis","latitude":-0.522304,"longitude":-0.113652,"lectures":[]},{"id":42,"name":"Consequatur","latitude":-0.0381511,"longitude":-0.805972,"lectures":[]},{"id":43,"name":"Et","latitude":0.721901,"longitude":-0.177308,"lectures":[]},{"id":44,"name":"Cumque","latitude":0.616043,"longitude":-0.270068,"lectures":[]},{"id":45,"name":"Mollitia","latitude":-0.578659,"longitude":-0.883435,"lectures":[]},{"id":46,"name":"Aut","latitude":0.924721,"longitude":-0.236763,"lectures":[]},{"id":47,"name":"Rerum","latitude":-0.304267,"longitude":0.463134,"lectures":[]},{"id":48,"name":"Voluptas","latitude":-0.876458,"longitude":-0.48419,"lectures":[]},{"id":49,"name":"Nisi","latitude":0.00188961,"longitude":-0.92171,"lectures":[]},{"id":50,"name":"Consequuntur","latitude":-0.799352,"longitude":0.667248,"lectures":[]},{"id":51,"name":"Amet","latitude":0.622072,"longitude":0.405843,"lectures":[]},{"id":52,"name":"Quis","latitude":0.774713,"longitude":0.635047,"lectures":[]},{"id":53,"name":"Iure","latitude":0.145682,"longitude":0.387319,"lectures":[]},{"id":54,"name":"Cum","latitude":-0.845713,"longitude":0.25006,"lectures":[]},{"id":55,"name":"In","latitude":0.874406,"longitude":0.659481,"lectures":[]},{"id":56,"name":"Officia","latitude":0.512458,"longitude":0.565859,"lectures":[]},{"id":57,"name":"Adipisci","latitude":0.6113,"longitude":-0.702045,"lectures":[]},{"id":58,"name":"Eos","latitude":-0.524785,"longitude":-0.319665,"lectures":[]},{"id":59,"name":"Aut","latitude":0.759152,"longitude":0.916872,"lectures":[]},{"id":60,"name":"Quidem","latitude":0.720985,"longitude":0.658496,"lectures":[]}]}
複雑なデータの例
ShareWisに投稿されたコンテンツの関係性を表すデータ
データの正体
可視化するとこうなる
理由２：可視化しないと見えにくい事実があるから
ニューヨーク・ヤンキースのA・ロッド選手2010年に通算600本塁打を達成過去最年少記録とのこと
野球の話
他の選手と比べてどれくらい若いの？
浮かんでくる疑問点
NewYork Timesによる可視化
圧倒的に若いことがわかる
http://www.nytimes.com/interactive/2010/07/29/sports/rodriguez-600.html
http://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html
もっとくわしく知りたい人は
どうやって可視化するの？
How?
Canvas APISVGWebGL
可視化に使えるWeb技術
Webページに２次元ビットマップ画像を動的に描画するためのJavaScript API
Canvas API
Webページに２次元ビットマップ画像を動的に描画
■ Canvas API<html> <body> <canvas id="canvas" width="150" height="150"></canvas> <script> var canvas, ctx; canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d');
ctx.strokeStyle = "#FF0000"; ctx.strokeRect(25, 25, 100, 100); // 枠線 ctx.fillStyle = "#FFCC00"; ctx.fillRect(25, 25, 100, 100); // 塗りつぶし </script> </body></html>
Canvas APIのサンプルコード
Canvas APIを使った可視化
http://html5-demos.appspot.com/static/webaudio/createMediaSourceElement.html
Web Audio API + Canvas API
ベクターグラフィックを表現できる画像フォーマット
SVG
Inline SVGによりHTML文書の中に埋め込みJavaScriptやCSSとの連携が可能に
Inline SVG
Webページに２次元ビットマップ画像を動的に描画
■ Canvas API<html> <head> <meta charset="UTF-8"> <style> circle { fill: #FFCC00; stroke: #FF0000; } </style> </head> <body> <svg id="svg" width="275" height="150"> <circle r="50" cx="75" cy="75" /> </svg> </body></html>
Inline SVGのサンプルコード
Inline SVGを使った可視化（再掲）
http://share-wis.com
Inline SVG + JavaScript + CSS
Webページに3Dグラフィックスを動的に描画するためのJavaScript API
WebGL
WebGLを使った可視化
http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/
Cytoscape.js Canvas APID3.js HTML / SVG
PhiloGL WebGL
可視化に役立つライブラリ
Cytoscape.js Canvas APID3.js HTML / SVG
PhiloGL WebGL
可視化に役立つライブラリ
D3 = Data-Driven Document
データにもとづいてHTMLドキュメントを動的に構築するためのJavaScriptライブラリ
主な機能１：DOMとデータの関連付け
データ HTML<html> <body> <svg> <circle /> <circle /> <circle /> <circle /> </svg> </body></html>
DOMとデータの関連付け
主な機能２：データの値に基づく属性操作
データ HTML<html><body> <svg> <circle cx=10 cy=20/> <circle cx=20 cy=30/> <circle cx=30 cy=40/> <circle cx=40 cy=50/> </svg></body></html>
データの値に基づく属性操作
x=10, y=20
x=20, y=30
x=30, y=40
x=40, y=50
機能１：DOMとデータの関連付け機能２：データの値に基づく属性操作
大事なのでもう一度
特徴１：豊富なコンポーネント
可視化に必要な機能が再利用可能な形でコンポーネント化されている
Core D3.jsのコアとなる機能
Scale 数値の変換に関する機能
SVG SVG要素を描画する機能
Time 日時や時刻に関する機能
Layouts データの配置に関する機能
Geography 地理的な情報の描画に関する機能
Geometry 幾何学的な図形の描画に関する機能
Behaviors ドラッグ・ホイール操作に関する機能
コンポーネント
Core D3.jsのコアとなる機能
Scale 数値の変換に関する機能
SVG SVG要素を描画する機能
Time 日時や時刻に関する機能
Layouts データの配置に関する機能
Geography 地理的な情報の描画に関する機能
Geometry 幾何学的な図形の描画に関する機能
Behaviors ドラッグ・ホイール操作に関する機能
コンポーネント
Layoutsコンポーネント
デザインのセンスやアルゴリズムの知識なしにそれっぽくデータを可視化
Layoutsコンポーネントの利用例Foursquareの友達関係
Geographyコンポーネント
緯度・経度で表される地理データを２次元に描画
Geographyコンポーネントの利用例日本地図のデータ+Foursquareのチェックイン履歴
特徴２：豊富なドキュメント・サンプル
各コンポーネントが提供するAPIに関するドキュメントが非常に充実している
日本語ドキュメントもある
各コンポーネントのサンプルも充実
Hello D3.js !!
簡単な棒グラフを描画するコードを紹介
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style> </style> </head> <body> <div id="visualization"></div> <script> </script> </body></html>
ひな形となるHTML
var data = [{value: 200}, {value: 250}, {value: 300}];
データを準備する
var data = [{value: 200}, {value: 250}, {value: 300}];
d3
d3: jQueryの$にあたるもの
d3.select('#visualization')
select(): データを格納する要素を指定
d3.select('#visualization') .selectAll("div")
selectAll(): 個々のデータに関連付ける要素を指定
d3.select('#visualization') .selectAll("div") .data(data)
data(): データとdiv要素の関連付け
d3.select('#visualization') .selectAll("div") .data(data) .enter()
enter(): ここから先は追加されたデータに関する処理
d3.select('#visualization') .selectAll("div") .data(data) .enter() .append(‘div’)
append(): 各データに対応する要素を挿入
d3.select('#visualization') .selectAll("div") .data(data) .enter() .append(‘div’) .text(function(d) { return d.value; })
text(): 要素内のテキストを指定する
d3.select('#visualization') .selectAll("div") .data(data) .enter() .append(‘div’) .text(function(d) { return d.value; }) .style(‘width’, function(d) { return d.value + ‘px’; })
text(): 要素内のテキストを指定する
<style>#visualization div { background-color: #0000FF; color: #FFFFFF; margin: 5px; padding: 5px; text-align: right;}</style>
CSSで見た目を整える
完成！（しょぼくてすみません）
まとめ
データビジュアライゼーション→ 何かを知るために データを可視化すること
Web技術を使ってデータの可視化が実現できるようになってきている
コンポーネント・ドキュメントが充実したD3.jsを使って簡単にデータを可視化できる
Let’s Try !!
おしまい
ご清聴ありがとうございました
