D3.js と SVG によるデータビジュアライゼーション
•
44 gostaram•13,839 visualizações
2013/03/23 大阪にて開催された「第６回 HTML5など勉強会」で使用したプレゼン資料です。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Semelhante a D3.js と SVG によるデータビジュアライゼーション
Semelhante a D3.js と SVG によるデータビジュアライゼーション (20)
Mais de Kohei Kadowaki
Mais de Kohei Kadowaki (17)
Último
Último (9)
D3.js と SVG によるデータビジュアライゼーション
- 1. D3.jsとSVGによる データビジュアライゼーション 2013/3/23 第6回 HTML5など勉強会 - kadoppe
- 2. 自己紹介 名前：門脇 恒平 @kadoppe 職業：ソフトウェアエンジニア 所属： HTML5-West.jp コアメンバ ShareWis Inc. CTO
- 5. データビジュアライゼーション？ そのまんまの意味
- 6. データビジュアライゼーション？ 可視化
- 7. データを 可視化すること
- 8. 何のために？
- 9. 身近な例
- 11. どんな駅・路線が存在して どう繋がっているのか 複雑なデータを わかりやすく伝えている http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
- 12. Web上の例
- 13. Before
- 15. After
- 16. After
- 18. もっと 勉強したい人は
- 23. D3.jsとSVG を使えばできるよ
- 24. D3.js http://d3js.org/
- 34. <html> <head></head> <body> <h1>SVG画像</h1> <svg> <circle cx=50 cy=50 r=50 /> </svg> </body> </html>
- 36. 実際に 触ってみよう
- 38. ライブコーディングその１： ツイートリスト を表示する https://github.com/kadoppe/html5etc-6/tree/master/sample1
- 39. おさらい
- 40. d3: jQueryの$にあたるもの var li = d3
- 41. select(): ツイートリストを 格納する要素を指定 var li = d3.select('#tweets')
- 42. selectAll(): 個々のツイートを 格納する要素を指定 var li = d3.select('#tweets').selectAll("li")
- 43. data(): データの配列と キーとなる属性を指定 var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
- 44. enter(): ここから先は 追加されたデータの処理 var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id }); li.enter()
- 45. append(): 追加データに 要素を割り当てる var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id }); li.enter().append('li')
- 46. 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; });
- 47. 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()
- 48. 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();
- 49. 完成！ 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();
- 51. ライブコーディングその２： SVGをつかう https://github.com/kadoppe/html5etc-6/tree/master/sample2
- 52. おさらい
- 53. SVG要素が使える var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id });
- 54. attr(): 要素の属性値を指定 var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id }); svg.enter().append('circle') .attr('r', 10)
- 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 })
- 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. 完成！ 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; });
- 58. まだ時間ある？
- 59. ライブコーディングその３： Layoutモジュール をつかう https://github.com/kadoppe/html5etc-6/tree/master/sample3
- 60. カンタンに 見栄えが良くなる
- 61. Bundle Chord Force Cluster
- 62. Bundle Chord Force Cluster
- 63. おさらい
- 64. layout.force(): forceレイアウトを使う準備 var force = d3.layout.force()
- 65. nodes(): 表示するノードを設定 var force = d3.layout.force() .nodes(nodes)
- 66. links(): ノード間の接続を設定 var force = d3.layout.force() .nodes(nodes) .links(links)
- 67. .on(“tick”, function): 周期的に実行する処理を指定 var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick)
- 68. .size(): 表示する領域の サイズを指定 var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500])
- 69. .start(): ノード位置の 自動計算をスタート var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
- 70. 完成！ var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
- 71. まとめ
- 72. データ ビジュアライゼーション
- 74. D3.js
- 76. HTMLとSVG が使える
- 77. カンタンに 見栄え良くできる
- 78. こんな 僕でも・・
- 79. こんなの作れるようになったよ！ http://share-wis.com
- 80. Let s Try !!
- 81. おしまい