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

15,470 views

Published on

Published in: Technology, Education
0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,470
On SlideShare
0
From Embeds
0
Number of Embeds
5,278
Actions
Shares
0
Downloads
81
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

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

×