Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 81 Ad
Advertisement

More Related Content

Slideshows for you (19)

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

Advertisement

More from Kohei Kadowaki (17)

Recently uploaded (20)

Advertisement

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-Driven Document
  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 Vector Graphics
  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 Chord Force Cluster
  61. 61. Bundle Chord Force 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. おしまい

×