crimea-stacked-bar.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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.ordinal(crimea, function(d) d.date).splitBanded(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.Bar)
  33. .antialias(false)
  34. .width(x.range().band)
  35. .fillStyle(fill.by(pv.parent))
  36. .strokeStyle(function() this.fillStyle().darker())
  37. .lineWidth(1)
  38. .anchor("bottom").add(pv.Label)
  39. .visible(function() !this.parent.index && !(this.index % 3))
  40. .textBaseline("top")
  41. .textMargin(5)
  42. .text(function(d) format(d.date));
  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>