barley.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <html>
  2. <head>
  3. <title>Barley Yields</title>
  4. <link type="text/css" rel="stylesheet" href="../ex.css"/>
  5. <script type="text/javascript" src="../../protovis-r3.2.js"></script>
  6. <script type="text/javascript" src="barley.js"></script>
  7. <style type="text/css">
  8. #fig {
  9. width: 334px;
  10. height: 833px;
  11. }
  12. </style>
  13. </head>
  14. <body><div id="center"><div id="fig">
  15. <script type="text/javascript+protovis">
  16. /* Compute yield medians by site and by variety. */
  17. function median(data) pv.median(data, function(d) d.yield);
  18. var site = pv.nest(barley).key(function(d) d.site).rollup(median);
  19. var variety = pv.nest(barley).key(function(d) d.variety).rollup(median);
  20. /* Nest yields data by site then year. */
  21. barley = pv.nest(barley)
  22. .key(function(d) d.site)
  23. .sortKeys(function(a, b) site[b] - site[a])
  24. .key(function(d) d.year)
  25. .sortValues(function(a, b) variety[b.variety] - variety[a.variety])
  26. .entries();
  27. /* Sizing and scales. */
  28. var w = 332,
  29. h = 132,
  30. x = pv.Scale.linear(10, 90).range(0, w),
  31. c = pv.Colors.category10();
  32. /* The root panel. */
  33. var vis = new pv.Panel()
  34. .width(w)
  35. .height(h * pv.keys(site).length)
  36. .top(15.5)
  37. .left(.5)
  38. .right(.5)
  39. .bottom(25);
  40. /* A panel per site-year. */
  41. var cell = vis.add(pv.Panel)
  42. .data(barley)
  43. .height(h)
  44. .left(90)
  45. .top(function() this.index * h)
  46. .strokeStyle("#999");
  47. /* Title bar. */
  48. cell.add(pv.Bar)
  49. .height(14)
  50. .fillStyle("bisque")
  51. .anchor("center").add(pv.Label)
  52. .text(function(site) site.key);
  53. /* A dot showing the yield. */
  54. var dot = cell.add(pv.Panel)
  55. .data(function(site) site.values)
  56. .top(23)
  57. .add(pv.Dot)
  58. .data(function(year) year.values)
  59. .left(function(d) x(d.yield))
  60. .top(function() this.index * 11)
  61. .size(10)
  62. .lineWidth(2)
  63. .strokeStyle(function(d) c(d.year));
  64. /* A label showing the variety. */
  65. dot.anchor("left").add(pv.Label)
  66. .visible(function() !this.parent.index)
  67. .left(-2)
  68. .text(function(d) d.variety);
  69. /* X-ticks. */
  70. vis.add(pv.Rule)
  71. .data(x.ticks())
  72. .left(function(d) 90 + x(d))
  73. .bottom(-5)
  74. .height(5)
  75. .strokeStyle("#999")
  76. .anchor("bottom").add(pv.Label);
  77. /* A legend showing the year. */
  78. vis.add(pv.Dot)
  79. .extend(dot)
  80. .data([{year:1931}, {year:1932}])
  81. .left(function(d) 260 + this.index * 40)
  82. .top(-8)
  83. .anchor("right").add(pv.Label)
  84. .text(function(d) d.year);
  85. vis.render();
  86. </script>
  87. </div></div></body>
  88. </html>