crimea-grouped-bar.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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, 4 / 5),
  19. y = pv.Scale.linear(0, 1500).range(0, h),
  20. k = x.range().band / causes.length,
  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. var panel = vis.add(pv.Panel)
  28. .data(crimea)
  29. .left(function(d) x(d.date))
  30. .width(x.range().band);
  31. panel.add(pv.Bar)
  32. .data(causes)
  33. .bottom(0)
  34. .width(k)
  35. .left(function() this.index * k)
  36. .height(function(t, d) y(d[t]))
  37. .fillStyle(pv.colors("lightpink", "darkgray", "lightblue"))
  38. .strokeStyle(function() this.fillStyle().darker())
  39. .lineWidth(1);
  40. panel.anchor("bottom").add(pv.Label)
  41. .visible(function() !(this.parent.index % 3))
  42. .textBaseline("top")
  43. .textMargin(5)
  44. .text(function(d) format(d.date));
  45. vis.add(pv.Rule)
  46. .data(y.ticks())
  47. .bottom(y)
  48. .strokeStyle(function(i) i ? "rgba(255, 255, 255, .5)" : "black")
  49. .anchor("right").add(pv.Label)
  50. .visible(function() !(this.index & 1))
  51. .textMargin(6);
  52. vis.render();
  53. </script>
  54. </div></div></body>
  55. </html>