「移行プロジェクトでもモバイル開発でも必須! 今からでも間に … · 「移行プロジェクトでもモバイル開発でも必須! ... – 最近流行のモバイルアプリに対応しろオーダーが入っ
Webでもできるデータビジュアライゼーション
-
Upload
kohei-kadowaki -
Category
Technology
-
view
4.127 -
download
6
description
Transcript of Webでもできるデータビジュアライゼーション
![Page 1: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/1.jpg)
Webでもできるデータビジュアライゼーション2013/8/10 まにまにフェスティバルP2 門脇恒平 @kadoppe
![Page 2: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/2.jpg)
名前:門脇 恒平 @kadoppe職業:ソフトウェアエンジニア所属:HTML5-West.jp コアメンバShareWis Inc. CTO
自己紹介
![Page 3: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/3.jpg)
データビジュアライゼーションって何だろう?
What?
![Page 4: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/4.jpg)
データビジュアライゼーション
![Page 5: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/5.jpg)
データビジュアライゼーション
そのまんまの意味
![Page 6: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/6.jpg)
データビジュアライゼーション
可視化
![Page 7: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/7.jpg)
データを可視化すること
![Page 8: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/8.jpg)
データを可視化したもの
![Page 9: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/9.jpg)
データって何?
What?
![Page 10: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/10.jpg)
データ(英: data。英語発音: /ˈdeɪtə/ デイタ、/ˈdætə/ ダタ、/ˈdɑːtə/ ダータ)とは、基礎的な事実や資料をさす言葉。情報処理や考察によって付加価値を与える前提で集められており、基本的に複数個の事象や数値の集合となっている。個々のデータのことを英語では datum (英語発音: /ˈdeɪtəm/ デイタム、データム)という。
http://ja.wikipedia.org/wiki/データ
![Page 11: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/11.jpg)
データ(英: data。英語発音: /ˈdeɪtə/ デイタ、/ˈdætə/ ダタ、/ˈdɑːtə/ ダータ)とは、基礎的な事実や資料をさす言葉。情報処理や考察によって付加価値を与える前提で集められており、基本的に複数個の事象や数値の集合となっている。個々のデータのことを英語では datum (英語発音: /ˈdeɪtəm/ デイタム、データム)という。
http://ja.wikipedia.org/wiki/データ
難しい!わからない!
![Page 12: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/12.jpg)
身近なところにデータはある
![Page 13: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/13.jpg)
・Webサイトのアクセスログ・SNS上の友達関係・スマホからの位置情報・スポーツ選手の成績・etc.
身近なデータの例
![Page 14: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/14.jpg)
なぜ可視化するの?
Why?
![Page 15: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/15.jpg)
理由1:複雑なデータを見ても何かを知ることが難しいから
![Page 16: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/16.jpg)
{"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":[]}]}
複雑なデータの例
![Page 17: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/17.jpg)
ShareWisに投稿されたコンテンツの関係性を表すデータ
データの正体
![Page 18: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/18.jpg)
可視化するとこうなる
![Page 20: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/20.jpg)
理由2:可視化しないと見えにくい事実があるから
![Page 21: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/21.jpg)
ニューヨーク・ヤンキースのA・ロッド選手2010年に通算600本塁打を達成過去最年少記録とのこと
野球の話
![Page 22: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/22.jpg)
他の選手と比べてどれくらい若いの?
浮かんでくる疑問点
![Page 23: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/23.jpg)
NewYork Timesによる可視化
![Page 24: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/24.jpg)
圧倒的に若いことがわかる
http://www.nytimes.com/interactive/2010/07/29/sports/rodriguez-600.html
![Page 25: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/25.jpg)
http://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html
もっとくわしく知りたい人は
![Page 26: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/26.jpg)
どうやって可視化するの?
How?
![Page 27: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/27.jpg)
Canvas APISVGWebGL
可視化に使えるWeb技術
![Page 28: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/28.jpg)
Webページに2次元ビットマップ画像を動的に描画するためのJavaScript API
Canvas API
![Page 29: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/29.jpg)
Webページに2次元ビットマップ画像を動的に描画
■ 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のサンプルコード
![Page 30: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/30.jpg)
Canvas APIを使った可視化
http://html5-demos.appspot.com/static/webaudio/createMediaSourceElement.html
Web Audio API + Canvas API
![Page 31: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/31.jpg)
ベクターグラフィックを表現できる画像フォーマット
SVG
![Page 32: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/32.jpg)
Inline SVGによりHTML文書の中に埋め込みJavaScriptやCSSとの連携が可能に
Inline SVG
![Page 33: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/33.jpg)
Webページに2次元ビットマップ画像を動的に描画
■ 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のサンプルコード
![Page 34: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/34.jpg)
Inline SVGを使った可視化(再掲)
http://share-wis.com
Inline SVG + JavaScript + CSS
![Page 35: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/35.jpg)
Webページに3Dグラフィックスを動的に描画するためのJavaScript API
WebGL
![Page 36: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/36.jpg)
WebGLを使った可視化
http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/
![Page 37: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/37.jpg)
Cytoscape.js Canvas APID3.js HTML / SVG
PhiloGL WebGL
可視化に役立つライブラリ
![Page 38: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/38.jpg)
Cytoscape.js Canvas APID3.js HTML / SVG
PhiloGL WebGL
可視化に役立つライブラリ
![Page 40: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/40.jpg)
D3 = Data-Driven Document
![Page 41: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/41.jpg)
データにもとづいてHTMLドキュメントを動的に構築するためのJavaScriptライブラリ
![Page 42: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/42.jpg)
主な機能1:DOMとデータの関連付け
![Page 43: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/43.jpg)
データ HTML<html> <body> <svg> <circle /> <circle /> <circle /> <circle /> </svg> </body></html>
DOMとデータの関連付け
![Page 44: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/44.jpg)
主な機能2:データの値に基づく属性操作
![Page 45: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/45.jpg)
データ 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
![Page 46: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/46.jpg)
機能1:DOMとデータの関連付け機能2:データの値に基づく属性操作
大事なのでもう一度
![Page 47: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/47.jpg)
特徴1:豊富なコンポーネント
![Page 48: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/48.jpg)
可視化に必要な機能が再利用可能な形でコンポーネント化されている
![Page 49: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/49.jpg)
Core D3.jsのコアとなる機能
Scale 数値の変換に関する機能
SVG SVG要素を描画する機能
Time 日時や時刻に関する機能
Layouts データの配置に関する機能
Geography 地理的な情報の描画に関する機能
Geometry 幾何学的な図形の描画に関する機能
Behaviors ドラッグ・ホイール操作に関する機能
コンポーネント
![Page 50: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/50.jpg)
Core D3.jsのコアとなる機能
Scale 数値の変換に関する機能
SVG SVG要素を描画する機能
Time 日時や時刻に関する機能
Layouts データの配置に関する機能
Geography 地理的な情報の描画に関する機能
Geometry 幾何学的な図形の描画に関する機能
Behaviors ドラッグ・ホイール操作に関する機能
コンポーネント
![Page 51: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/51.jpg)
Layoutsコンポーネント
デザインのセンスやアルゴリズムの知識なしにそれっぽくデータを可視化
![Page 52: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/52.jpg)
Layoutsコンポーネントの利用例Foursquareの友達関係
![Page 53: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/53.jpg)
Geographyコンポーネント
緯度・経度で表される地理データを2次元に描画
![Page 54: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/54.jpg)
Geographyコンポーネントの利用例日本地図のデータ+Foursquareのチェックイン履歴
![Page 55: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/55.jpg)
特徴2:豊富なドキュメント・サンプル
![Page 56: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/56.jpg)
各コンポーネントが提供するAPIに関するドキュメントが非常に充実している
![Page 57: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/57.jpg)
日本語ドキュメントもある
![Page 58: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/58.jpg)
各コンポーネントのサンプルも充実
![Page 59: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/59.jpg)
Hello D3.js !!
![Page 60: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/60.jpg)
簡単な棒グラフを描画するコードを紹介
![Page 61: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/61.jpg)
<!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
![Page 62: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/62.jpg)
var data = [{value: 200}, {value: 250}, {value: 300}];
データを準備する
![Page 63: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/63.jpg)
var data = [{value: 200}, {value: 250}, {value: 300}];
d3
d3: jQueryの$にあたるもの
![Page 64: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/64.jpg)
d3.select('#visualization')
select(): データを格納する要素を指定
![Page 65: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/65.jpg)
d3.select('#visualization') .selectAll("div")
selectAll(): 個々のデータに関連付ける要素を指定
![Page 66: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/66.jpg)
d3.select('#visualization') .selectAll("div") .data(data)
data(): データとdiv要素の関連付け
![Page 67: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/67.jpg)
d3.select('#visualization') .selectAll("div") .data(data) .enter()
enter(): ここから先は追加されたデータに関する処理
![Page 68: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/68.jpg)
d3.select('#visualization') .selectAll("div") .data(data) .enter() .append(‘div’)
append(): 各データに対応する要素を挿入
![Page 69: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/69.jpg)
d3.select('#visualization') .selectAll("div") .data(data) .enter() .append(‘div’) .text(function(d) { return d.value; })
text(): 要素内のテキストを指定する
![Page 70: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/70.jpg)
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(): 要素内のテキストを指定する
![Page 71: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/71.jpg)
<style>#visualization div { background-color: #0000FF; color: #FFFFFF; margin: 5px; padding: 5px; text-align: right;}</style>
CSSで見た目を整える
![Page 72: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/72.jpg)
完成!(しょぼくてすみません)
![Page 73: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/73.jpg)
まとめ
![Page 74: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/74.jpg)
データビジュアライゼーション→ 何かを知るために データを可視化すること
![Page 75: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/75.jpg)
Web技術を使ってデータの可視化が実現できるようになってきている
![Page 76: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/76.jpg)
コンポーネント・ドキュメントが充実したD3.jsを使って簡単にデータを可視化できる
![Page 77: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/77.jpg)
Let’s Try !!
![Page 78: Webでもできるデータビジュアライゼーション](https://reader033.fdocuments.net/reader033/viewer/2022060112/556f64a3d8b42a9d338b4660/html5/thumbnails/78.jpg)
おしまい
ご清聴ありがとうございました