Your SlideShare is downloading. ×
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webでもできるデータビジュアライゼーション

4,101

Published on

2013/8/10に大阪で開催された「まにまにフェスティバル(まにフェス)P2」で使用したプレゼン資料です

2013/8/10に大阪で開催された「まにまにフェスティバル(まにフェス)P2」で使用したプレゼン資料です

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,101
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
20
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×