crimea-stacked-area.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <html>
  2. <head>
  3. <title>Crimean War</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="crimea.js"></script>
  7. <style type="text/css">
  8. #fig {
  9. width: 600px;
  10. height: 300px;
  11. }
  12. </style>
  13. </head>
  14. <body><div id="center"><div id="fig">
  15. <script type="text/javascript+protovis">
  16. var w = 545,
  17. h = 280,
  18. x = pv.Scale.linear(crimea, function(d) d.date).range(0, w),
  19. y = pv.Scale.linear(0, 2200).range(0, h),
  20. fill = pv.colors("lightpink", "darkgray", "lightblue"),
  21. format = pv.Format.date("%b");
  22. var vis = new pv.Panel()
  23. .width(w)
  24. .height(h)
  25. .margin(19.5)
  26. .right(40);
  27. vis.add(pv.Layout.Stack)
  28. .layers(causes)
  29. .values(crimea)
  30. .x(function(d) x(d.date))
  31. .y(function(d, t) y(d[t]))
  32. .layer.add(pv.Area)
  33. .fillStyle(fill.by(pv.parent))
  34. .strokeStyle(function() this.fillStyle().darker())
  35. .lineWidth(1);
  36. vis.add(pv.Label)
  37. .data(x.ticks())
  38. .left(x)
  39. .bottom(0)
  40. .textBaseline("top")
  41. .textMargin(5)
  42. .text(pv.Format.date("%b"));
  43. vis.add(pv.Rule)
  44. .data(y.ticks(5))
  45. .bottom(y)
  46. .strokeStyle(function(i) i ? "rgba(255, 255, 255, .7)" : "black")
  47. .anchor("right").add(pv.Label)
  48. .textMargin(6);
  49. vis.render();
  50. </script>
  51. </div></div></body>
  52. </html>