奥别产でもできるデータビジュアライゼーション
?
16 likes?6,241 views
2013/8/10に大阪で开催された「まにまにフェスティバル（まにフェス）笔2」で使用したプレゼン资料です
![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":"O?cia","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":
複雑なデータの例](https://image.slidesharecdn.com/web-130901050621-phpapp01/85/Web-16-320.jpg)
![var data = [{value: 200},
{value: 250},
{value: 300}];
データを準備する](https://image.slidesharecdn.com/web-130901050621-phpapp01/85/Web-62-320.jpg)
![var data = [{value: 200},
{value: 250},
{value: 300}];
d3
d3: jQueryの$にあたるもの](https://image.slidesharecdn.com/web-130901050621-phpapp01/85/Web-63-320.jpg)
奥别产でもできるデータビジュアライゼーション
- 2. 名前：門脇 恒平 @kadoppe 職業：ソフトウェアエンジニア 所属： HTML5-West.jp コアメンバ ShareWis Inc. CTO 自己紹介
- 7. データを 可視化すること
- 8. データを 可視化したもの
- 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. 身近なところに データはある
- 14. なぜ 可視化するの？ Why?
- 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":"O?cia","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": 複雑なデータの例
- 18. 可視化すると こうなる
- 29. 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のサンプルコード
- 30. Canvas APIを使った可視化 http://html5-demos.appspot.com/static/webaudio/createMediaSourceElement.html Web Audio API + Canvas API
- 33. 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のサンプルコード
- 34. Inline SVGを使った可視化（再掲） http://share-wis.com Inline SVG + JavaScript + CSS
- 37. Cytoscape.js Canvas API D3.js HTML / SVG PhiloGL WebGL 可視化に役立つライブラリ
- 38. Cytoscape.js Canvas API D3.js HTML / SVG PhiloGL WebGL 可視化に役立つライブラリ
- 43. データ HTML <html> <body> <svg> <circle /> <circle /> <circle /> <circle /> </svg> </body> </html> DOMとデータの関連付け
- 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
- 47. 特徴１： 豊富なコンポーネント
- 49. Core D3.jsのコアとなる機能 Scale 数値の変換に関する機能 SVG SVG要素を描画する機能 Time 日時や時刻に関する機能 Layouts データの配置に関する機能 Geography 地理的な情報の描画に関する機能 Geometry 幾何学的な図形の描画に関する機能 Behaviors ドラッグ?ホイール操作に関する機能 コンポーネント
- 50. Core D3.jsのコアとなる機能 Scale 数値の変換に関する機能 SVG SVG要素を描画する機能 Time 日時や時刻に関する機能 Layouts データの配置に関する機能 Geography 地理的な情報の描画に関する機能 Geometry 幾何学的な図形の描画に関する機能 Behaviors ドラッグ?ホイール操作に関する機能 コンポーネント
- 57. 日本语ドキュメントもある
- 58. 各コンポーネントのサンプルも充実
- 59. Hello D3.js !!
- 61. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src=/kadoppe/web-25790989/"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の$にあたるもの
- 67. d3.select('#visualization') .selectAll("div") .data(data) .enter() enter(): ここから先は 追加されたデータに関する処理
- 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. まとめ
- 77. Let s Try !!