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

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. 理由１：
複雑なデータを見ても
何かを知ることが難しいから

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. 理由２：
可視化しないと
見えにくい事実があるから

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ページに
２次元ビットマップ画像を
動的に描画するための
JavaScript API
Canvas API

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

31. ベクターグラフィックを表現
できる画像フォーマット
SVG

32. Inline SVGにより
HTML文書の中に埋め込み
JavaScriptやCSSとの
連携が可能に
Inline SVG

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

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. 主な機能１：
DOMとデータの関連付け

43. データ HTML
<html>
<body>
<svg>
<circle />
<circle />
<circle />
<circle />
</svg>
</body>
</html>
DOMとデータの関連付け

44. 主な機能２：
データの値に基づく属性操作

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. 機能１：
DOMとデータの関連付け
機能２：
データの値に基づく属性操作
大事なのでもう一度

47. 特徴１：
豊富なコンポーネント

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コンポーネント
緯度・経度で表される
地理データを２次元に描画

54. Geographyコンポーネントの利用例
日本地図のデータ+Foursquareのチェックイン履歴

55. 特徴２：
豊富なドキュメント・サンプル

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. おしまい
ご清聴ありがとうございました