crimea-line.html 1.3 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, 1500).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.Panel)
  28. .data(causes)
  29. .add(pv.Line)
  30. .data(crimea)
  31. .left(function(d) x(d.date))
  32. .bottom(function(d, t) y(d[t]))
  33. .strokeStyle(fill.by(pv.parent))
  34. .lineWidth(3);
  35. vis.add(pv.Label)
  36. .data(x.ticks())
  37. .left(x)
  38. .bottom(0)
  39. .textBaseline("top")
  40. .textMargin(5)
  41. .text(pv.Format.date("%b"));
  42. vis.add(pv.Rule)
  43. .data(y.ticks())
  44. .bottom(y)
  45. .strokeStyle(function(i) i ? "#ccc" : "black")
  46. .anchor("right").add(pv.Label)
  47. .visible(function() !(this.index & 1))
  48. .textMargin(6);
  49. vis.render();
  50. </script>
  51. </div></div></body>
  52. </html>