Download as PDF, PPTX
![.size(): 表示する領域の
サイズを指定
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.on("tick", tick)
.size([500, 500])](https://image.slidesharecdn.com/d3-jssvg-130322204713-phpapp02/85/D3-js-SVG-68-320.jpg)
![.start(): ノード位置の
自動計算をスタート
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.on("tick", tick)
.size([500, 500])
.start();](https://image.slidesharecdn.com/d3-jssvg-130322204713-phpapp02/85/D3-js-SVG-69-320.jpg)
![完成！
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.on("tick", tick)
.size([500, 500])
.start();](https://image.slidesharecdn.com/d3-jssvg-130322204713-phpapp02/85/D3-js-SVG-70-320.jpg)
Uploaded byKohei Kadowaki
D3.js と SVG によるデータビジュアライゼーション
2013/03/23 大阪にて開催された「第６回 HTML5など勉強会」で使用したプレゼン資料です。
![Data Visualizationしてみた [ D3.js編 ]](https://cdn.slidesharecdn.com/ss_thumbnails/wplt0317a-160323052825-thumbnail.jpg?width=640&height=640&fit=bounds)
D3.js と SVG によるデータビジュアライゼーション
- 1.
- 2. 自己紹介 名前：門脇 恒平 @kadoppe 職業：ソフトウェアエンジニア 所属： HTML5-West.jpコアメンバ ShareWis Inc. CTO
- 3.
- 4.
- 5. データビジュアライゼーション？ そのまんまの意味
- 6. データビジュアライゼーション？ 可視化
- 7.
- 8.
- 9.
- 10.
- 11. どんな駅・路線が存在して どう繋がっているのか 複雑なデータを わかりやすく伝えている http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 21.
- 22.
- 23. D3.jsとSVG を使えばできるよ
- 24. D3.js http://d3js.org/
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. <html> <head></head> <body> <h1>SVG画像</h1> <svg> <circle cx=50 cy=50 r=50 /> </svg> </body> </html>
- 35.
- 36.
- 37.
- 38. ライブコーディングその１： ツイートリスト を表示する https://github.com/kadoppe/html5etc-6/tree/master/sample1
- 39.
- 40.
- 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();
- 50.
- 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.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79. こんなの作れるようになったよ！ http://share-wis.com
- 80.
- 81.