Your SlideShare is downloading. ×
0
D3.jsとSVGによるデータビジュアライゼーション2013/3/23 第6回 HTML5など勉強会 - kadoppe
自己紹介名前:門脇 恒平 @kadoppe職業:ソフトウェアエンジニア所属:HTML5-West.jp コアメンバShareWis Inc. CTO
スライド:http://www.slideshare.net/kadoppeサンプルコード:https://github.com/kadoppe/html5etc-6
データビジュアライゼーション?
データビジュアライゼーション?    そのまんまの意味
データビジュアライゼーション?    可視化
データを可視化すること
何のために?
身近な例
http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
どんな駅・路線が存在してどう繋がっているのか複雑なデータをわかりやすく伝えている   http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
Web上の例
Before
Before誰が/いつ/どれくらい貢献してるのか知りたいでもわかりづらい
After
After
目的:わかりにくいデータをわかりやすく整形
もっと勉強したい人は
http://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html
1年前の僕:僕もWeb上でこんなの作ってみたい
1年前の僕:でも難しそうどう作ればいいの?
D3.jsとSVG      を使えばできるよ
D3.js        http://d3js.org/
D3 =Data-DrivenDocument
データにもとづいてHTMLドキュメントを構築するJavaScriptライブラリ
特徴1:豊富なドキュメントサンプルコード
http://bl.ocks.org/mbostock/4061961
http://bost.ocks.org/mike/fisheye/
特徴2:HTML要素やSVG要素を同じように扱える
SVG =Scalable VectorGraphics
XML形式のベクター画像フォーマット
特徴1:HTML文書に埋め込める(インラインSVG)
<html><head></head><body>  <h1>SVG画像</h1>  <svg>    <circle cx=50 cy=50 r=50 />  </svg></body></html>
特徴2:JavaScriptやCSSから操作できる
実際に触ってみよう
Twitterのデータを可視化してみる
ライブコーディングその1:ツイートリストを表示する       https://github.com/kadoppe/html5etc-6/tree/master/sample1
おさらい
d3: jQueryの$にあたるものvar li = d3
select(): ツイートリストを格納する要素を指定var li = d3.select(#tweets)
selectAll(): 個々のツイートを格納する要素を指定var li = d3.select(#tweets).selectAll("li")
data(): データの配列とキーとなる属性を指定var li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });
enter(): ここから先は追加されたデータの処理var li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });l...
append(): 追加データに要素を割り当てるvar li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });li....
text(): 要素内のテキストを指定するvar li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });li.ent...
exit(): ここから先は削除されたデータの処理var li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });li...
remove(): データに割り当てられた要素を削除var li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });l...
完成!var li = d3.select(#tweets).selectAll("li")  .data(results, function(data) { return data.id });li.enter().append(li)  ....
次はもうすこしビジュアライゼーション()っぽいことを
ライブコーディングその2:SVGをつかう       https://github.com/kadoppe/html5etc-6/tree/master/sample2
おさらい
SVG要素が使えるvar svg = d3.select(#tweets).selectAll("circle")  .data(results, function(data) { return data.id });
attr(): 要素の属性値を指定var svg = d3.select(#tweets).selectAll("circle")  .data(results, function(data) { return data.id });svg.e...
データの内容から属性値を計算できるvar svg = d3.select(#tweets).selectAll("circle")  .data(results, function(data) { return data.id });svg.e...
もちろん複雑な計算も可能var svg = d3.select(#tweets).selectAll("circle")  .data(results, function(data) { return data.id });svg.enter(...
完成!var svg = d3.select(#tweets).selectAll("circle")  .data(results, function(data) { return data.id });svg.enter().append(...
まだ時間ある?
ライブコーディングその3:Layoutモジュールをつかう       https://github.com/kadoppe/html5etc-6/tree/master/sample3
カンタンに見栄えが良くなる
Bundle   ChordForce    Cluster
Bundle   ChordForce    Cluster
おさらい
layout.force():forceレイアウトを使う準備var force = d3.layout.force()
nodes():表示するノードを設定var force = d3.layout.force()  .nodes(nodes)
links():ノード間の接続を設定var force = d3.layout.force()  .nodes(nodes)  .links(links)
.on(“tick”, function):周期的に実行する処理を指定var force = d3.layout.force()  .nodes(nodes)  .links(links)  .on("tick", tick)
.size(): 表示する領域のサイズを指定var force = d3.layout.force()  .nodes(nodes)  .links(links)  .on("tick", tick)  .size([500, 500])
.start(): ノード位置の自動計算をスタートvar force = d3.layout.force()  .nodes(nodes)  .links(links)  .on("tick", tick)  .size([500, 500])...
完成!var force = d3.layout.force()  .nodes(nodes)  .links(links)  .on("tick", tick)  .size([500, 500])  .start();
まとめ
データビジュアライゼーション
データをわかりやすく可視化すること
D3.js
データにもとづいてHTMLを組み立てられる
HTMLとSVGが使える
カンタンに見栄え良くできる
こんな僕でも・・
こんなの作れるようになったよ!          http://share-wis.com
Let s Try !!
おしまい
D3.js と SVG によるデータビジュアライゼーション
Upcoming SlideShare
Loading in...5
×

D3.js と SVG によるデータビジュアライゼーション

11,359

Published on

2013/03/23 大阪にて開催された「第6回 HTML5など勉強会」で使用したプレゼン資料です。

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

No Downloads
Views
Total Views
11,359
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
72
Comments
0
Likes
40
Embeds 0
No embeds

No notes for slide

Transcript of "D3.js と SVG によるデータビジュアライゼーション"

  1. 1. D3.jsとSVGによるデータビジュアライゼーション2013/3/23 第6回 HTML5など勉強会 - kadoppe
  2. 2. 自己紹介名前:門脇 恒平 @kadoppe職業:ソフトウェアエンジニア所属:HTML5-West.jp コアメンバShareWis Inc. CTO
  3. 3. スライド:http://www.slideshare.net/kadoppeサンプルコード:https://github.com/kadoppe/html5etc-6
  4. 4. データビジュアライゼーション?
  5. 5. データビジュアライゼーション? そのまんまの意味
  6. 6. データビジュアライゼーション? 可視化
  7. 7. データを可視化すること
  8. 8. 何のために?
  9. 9. 身近な例
  10. 10. http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
  11. 11. どんな駅・路線が存在してどう繋がっているのか複雑なデータをわかりやすく伝えている http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
  12. 12. Web上の例
  13. 13. Before
  14. 14. Before誰が/いつ/どれくらい貢献してるのか知りたいでもわかりづらい
  15. 15. After
  16. 16. After
  17. 17. 目的:わかりにくいデータをわかりやすく整形
  18. 18. もっと勉強したい人は
  19. 19. http://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html
  20. 20. 1年前の僕:僕もWeb上でこんなの作ってみたい
  21. 21. 1年前の僕:でも難しそうどう作ればいいの?
  22. 22. D3.jsとSVG を使えばできるよ
  23. 23. D3.js http://d3js.org/
  24. 24. D3 =Data-DrivenDocument
  25. 25. データにもとづいてHTMLドキュメントを構築するJavaScriptライブラリ
  26. 26. 特徴1:豊富なドキュメントサンプルコード
  27. 27. http://bl.ocks.org/mbostock/4061961
  28. 28. http://bost.ocks.org/mike/fisheye/
  29. 29. 特徴2:HTML要素やSVG要素を同じように扱える
  30. 30. SVG =Scalable VectorGraphics
  31. 31. XML形式のベクター画像フォーマット
  32. 32. 特徴1:HTML文書に埋め込める(インラインSVG)
  33. 33. <html><head></head><body> <h1>SVG画像</h1> <svg> <circle cx=50 cy=50 r=50 /> </svg></body></html>
  34. 34. 特徴2:JavaScriptやCSSから操作できる
  35. 35. 実際に触ってみよう
  36. 36. Twitterのデータを可視化してみる
  37. 37. ライブコーディングその1:ツイートリストを表示する https://github.com/kadoppe/html5etc-6/tree/master/sample1
  38. 38. おさらい
  39. 39. d3: jQueryの$にあたるものvar li = d3
  40. 40. select(): ツイートリストを格納する要素を指定var li = d3.select(#tweets)
  41. 41. selectAll(): 個々のツイートを格納する要素を指定var li = d3.select(#tweets).selectAll("li")
  42. 42. data(): データの配列とキーとなる属性を指定var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });
  43. 43. enter(): ここから先は追加されたデータの処理var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter()
  44. 44. append(): 追加データに要素を割り当てるvar li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li)
  45. 45. text(): 要素内のテキストを指定するvar li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });
  46. 46. exit(): ここから先は削除されたデータの処理var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });li.exit()
  47. 47. remove(): データに割り当てられた要素を削除var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });li.exit().remove();
  48. 48. 完成!var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });li.exit().remove();
  49. 49. 次はもうすこしビジュアライゼーション()っぽいことを
  50. 50. ライブコーディングその2:SVGをつかう https://github.com/kadoppe/html5etc-6/tree/master/sample2
  51. 51. おさらい
  52. 52. SVG要素が使えるvar svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });
  53. 53. attr(): 要素の属性値を指定var svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10)
  54. 54. データの内容から属性値を計算できるvar svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10) .attr(cx, function(data) { return data.text.length * 3 })
  55. 55. もちろん複雑な計算も可能var svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10) .attr(cx, function(data) { return data.text.length * 3 }) .attr(cy, function(data) { var d = new Date(); d.setTime(Date.parse(data.created_at)); return d.getHours() * 20; });
  56. 56. 完成!var svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10) .attr(cx, function(data) { return data.text.length * 3 }) .attr(cy, function(data) { var d = new Date(); d.setTime(Date.parse(data.created_at)); return d.getHours() * 20; });
  57. 57. まだ時間ある?
  58. 58. ライブコーディングその3:Layoutモジュールをつかう https://github.com/kadoppe/html5etc-6/tree/master/sample3
  59. 59. カンタンに見栄えが良くなる
  60. 60. Bundle ChordForce Cluster
  61. 61. Bundle ChordForce Cluster
  62. 62. おさらい
  63. 63. layout.force():forceレイアウトを使う準備var force = d3.layout.force()
  64. 64. nodes():表示するノードを設定var force = d3.layout.force() .nodes(nodes)
  65. 65. links():ノード間の接続を設定var force = d3.layout.force() .nodes(nodes) .links(links)
  66. 66. .on(“tick”, function):周期的に実行する処理を指定var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick)
  67. 67. .size(): 表示する領域のサイズを指定var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500])
  68. 68. .start(): ノード位置の自動計算をスタートvar force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
  69. 69. 完成!var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
  70. 70. まとめ
  71. 71. データビジュアライゼーション
  72. 72. データをわかりやすく可視化すること
  73. 73. D3.js
  74. 74. データにもとづいてHTMLを組み立てられる
  75. 75. HTMLとSVGが使える
  76. 76. カンタンに見栄え良くできる
  77. 77. こんな僕でも・・
  78. 78. こんなの作れるようになったよ! http://share-wis.com
  79. 79. Let s Try !!
  80. 80. おしまい
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×