O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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 によるデータビジュアライゼーション
Próximos SlideShares
Carregando em…5
×

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

15.930 visualizações

Publicada em

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

Publicada em: Tecnologia
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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. おしまい

×