Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
2
3
4
5
6
7
Chris Harrison - WikiViz: Visualizing Wikipediahttp://www.chrisharrison.net/projects/wikiviz/index.html                   ...
9
10
d3.js - http://mbostock.github.com/d3/11
12
d3.js ~ Force-Directed Graph                          d3.js ~ Voronoi Diagramhttp://mbostock.github.com/d3/ex/force.html  ...
14
15
16
17
18
19
20
21
[    {year: 2007, account: 200},    {year: 2008, account: 250},    {year: 2009, account: 300}]                          22
23
24
25
26
27
div.chartdivdivdiv            28
29
30
31
// CSS                Selectionvar chart = d3.selectAll(.chart);//chart.append(div).style(width,200px).text(200); d3.selec...
33
[    {year: 2007, account: 200},    {year: 2008, account: 250},    {year: 2009, account: 300}]        34
35
// .chart divchart.selectAll(div).data(data).style(width, function(d) {   return d.account + "px";})       36
37
[    {year: 2010, account: 250},    {year: 2011, account: 20}]        38
39
chart.selectAll(div).data(data)   .enter().append(div)250       40
41
42
43
44
selection.exit().remove(); 45
46
47
48
49
50
Upcoming SlideShare
Loading in …5
×

d3jsではじめるデータビジュアライゼーション入門

16,370 views

Published on

Published in: Technology, Education
  • Be the first to comment

d3jsではじめるデータビジュアライゼーション入門

  1. 1. 1
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. Chris Harrison - WikiViz: Visualizing Wikipediahttp://www.chrisharrison.net/projects/wikiviz/index.html Wow! The foursquare community has over 10,000,000 members! | Foursquare Blog http://blog.foursquare.com/2011/06/20/holysmokes10millionpeople/ 8
  9. 9. 9
  10. 10. 10
  11. 11. d3.js - http://mbostock.github.com/d3/11
  12. 12. 12
  13. 13. d3.js ~ Force-Directed Graph d3.js ~ Voronoi Diagramhttp://mbostock.github.com/d3/ex/force.html http://mbostock.github.com/d3/ex/voronoi.html 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. [ {year: 2007, account: 200}, {year: 2008, account: 250}, {year: 2009, account: 300}] 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. div.chartdivdivdiv 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. // CSS Selectionvar chart = d3.selectAll(.chart);//chart.append(div).style(width,200px).text(200); d3.selectAll(‘.chart’) $(‘.chart’) 32
  33. 33. 33
  34. 34. [ {year: 2007, account: 200}, {year: 2008, account: 250}, {year: 2009, account: 300}] 34
  35. 35. 35
  36. 36. // .chart divchart.selectAll(div).data(data).style(width, function(d) { return d.account + "px";}) 36
  37. 37. 37
  38. 38. [ {year: 2010, account: 250}, {year: 2011, account: 20}] 38
  39. 39. 39
  40. 40. chart.selectAll(div).data(data) .enter().append(div)250 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. 44
  45. 45. selection.exit().remove(); 45
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. 50

×