flowers.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <html>
  2. <head>
  3. <title>Iris Flowers</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="flowers.js"></script>
  7. <style type="text/css">
  8. #fig {
  9. width: 680px;
  10. height: 705px;
  11. }
  12. </style>
  13. </head>
  14. <body><div id="center"><div id="fig">
  15. <script type="text/javascript+protovis">
  16. /* Size parameters. */
  17. var size = 150,
  18. padding = 20;
  19. /* Scales for color and position. */
  20. var color = pv.colors(
  21. "rgba(50%, 0%, 0%, .5)",
  22. "rgba(0%, 50%, 0%, .5)",
  23. "rgba(0%, 0%, 50%, .5)");
  24. position = pv.dict(traits, function(t)
  25. pv.Scale.linear(flowers, function(d) d[t])
  26. .range(0, size));
  27. /* Root panel. */
  28. var vis = new pv.Panel()
  29. .width((size + padding) * traits.length)
  30. .height((size + padding) * traits.length + padding)
  31. .left(.5)
  32. .top(5.5);
  33. /* One cell per trait pair. */
  34. var cell = vis.add(pv.Panel)
  35. .data(traits)
  36. .top(function() this.index * (size + padding) + padding / 2)
  37. .height(size)
  38. .add(pv.Panel)
  39. .data(function(y) traits.map(function(x) { return {x:x, y:y}; }))
  40. .left(function() this.index * (size + padding) + padding / 2)
  41. .width(size);
  42. /* Framed dot plots not along the diagonal. */
  43. var plot = cell.add(pv.Panel)
  44. .visible(function(t) t.x != t.y)
  45. .strokeStyle("#aaa");
  46. /* X-axis ticks. */
  47. var xtick = plot.add(pv.Rule)
  48. .data(function(t) position[t.x].ticks().filter(function(x) !(x % 1)))
  49. .left(function(d, t) position[t.x](d))
  50. .strokeStyle("#eee")
  51. .textMargin(5);
  52. /* Bottom and top labels. */
  53. xtick.anchor("bottom").add(pv.Label)
  54. .visible(function() (cell.parent.index == traits.length - 1) && !(cell.index % 2));
  55. xtick.anchor("top").add(pv.Label)
  56. .visible(function() (cell.parent.index == 0) && (cell.index % 2));
  57. /* Y-axis ticks. */
  58. var ytick = plot.add(pv.Rule)
  59. .data(function(t) position[t.y].ticks().filter(function(x) !(x % 1)))
  60. .bottom(function(d, t) position[t.y](d))
  61. .strokeStyle("#eee")
  62. .textMargin(5);
  63. /* Left and right labels. */
  64. ytick.anchor("left").add(pv.Label)
  65. .visible(function() (cell.index == 0) && (cell.parent.index % 2));
  66. ytick.anchor("right").add(pv.Label)
  67. .visible(function() (cell.index == traits.length - 1) && !(cell.parent.index % 2));
  68. /* Frame and dot plot. */
  69. plot.add(pv.Dot)
  70. .data(flowers)
  71. .left(function(d, t) position[t.x](d[t.x]))
  72. .bottom(function(d, t) position[t.y](d[t.y]))
  73. .size(8)
  74. .strokeStyle(null)
  75. .fillStyle(function(d) color(d.species));
  76. /* Labels along the diagonal. */
  77. cell.anchor("center").add(pv.Label)
  78. .visible(function(t) t.x == t.y)
  79. .font("bold 14px sans-serif")
  80. .text(function(t) t.x.replace(/([WL])/, " $1").toLowerCase());
  81. /* Legend. */
  82. vis.add(pv.Dot)
  83. .data(species)
  84. .bottom(5)
  85. .left(function() 15 + this.index * 65)
  86. .size(8)
  87. .strokeStyle(null)
  88. .fillStyle(color)
  89. .anchor("right").add(pv.Label);
  90. vis.render();
  91. </script>
  92. </div></div></body>
  93. </html>