crimea.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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: 800px;
  10. height: 450px;
  11. }
  12. #title {
  13. font: 16px baskerville;
  14. text-transform: uppercase;
  15. }
  16. #caption {
  17. position: absolute;
  18. font: oblique 12px baskerville;
  19. top: 300px;
  20. left: 25px;
  21. width: 320px;
  22. }
  23. #caption p {
  24. margin: 0;
  25. text-indent: 12px;
  26. }
  27. </style>
  28. </head>
  29. <body><div id="center"><div id="fig">
  30. <center id="title">
  31. Diagram <small>of the</small> Causes <small>of</small> Mortality<br>
  32. <small><small>in the</small> Army <small>of the</small> East</small>
  33. </center>
  34. <script type="text/javascript+protovis">
  35. /* Compute maximum. */
  36. crimea.forEach(function(d) d.max = Math.max(350, d.wounds, d.other, d.disease));
  37. /* Scales for radius, angle, and fill. */
  38. var format = pv.Format.date("%b"),
  39. radius = pv.Scale.linear(0, 1400).range(0, 275),
  40. angle = pv.Scale.linear(0, 12).range(Math.PI / 2, 5 * Math.PI / 2),
  41. fill = pv.colors("lightpink", "darkgray", "lightblue").domain(causes);
  42. var vis = new pv.Panel()
  43. .width(800)
  44. .height(450);
  45. /* Split the root panel by year. */
  46. var panel = vis.add(pv.Panel)
  47. .data([crimea.slice(12), crimea.slice(0, 12)])
  48. .left(function() this.index * 400);
  49. /* Add a panel per month, and sort causes by that month's deaths. */
  50. var wedge = panel.add(pv.Panel)
  51. .data(function(d) d)
  52. .add(pv.Wedge)
  53. .data(function(d) causes.sort(function(a, b) d[b] - d[a]))
  54. .left(200)
  55. .top(150)
  56. .angle(Math.PI / 6)
  57. .startAngle(function(c, d) angle(d.date.getMonth()))
  58. .outerRadius(function(c, d) radius(d[c]))
  59. .fillStyle(fill)
  60. .strokeStyle(function() this.fillStyle().darker())
  61. .lineWidth(1);
  62. /* Add a label using the pre-computed maximum value. */
  63. wedge.add(pv.Wedge)
  64. .data(["max"])
  65. .fillStyle(null)
  66. .strokeStyle(null)
  67. .anchor("outer").add(pv.Label)
  68. .text(function(c, d) format(d.date))
  69. .textAlign("center")
  70. .textBaseline("bottom")
  71. .textAngle(function() this.anchorTarget().midAngle() + Math.PI / 2);
  72. vis.render();
  73. </script>
  74. <div id="caption">
  75. The Areas of the blue, red, &amp; black wedges are each measured from the
  76. centre as the common vertex
  77. <p>The blue wedges measured from the centre of the circle represent area
  78. for area the deaths from Preventible or Mitigable Zymotic Diseases, the
  79. red wedges measured from the center the deaths from wounds, &amp; the
  80. black wedges measured from the center the deaths from all other causes
  81. <p>In October 1844, &amp; April 1855, the black area coincides with the
  82. red, in January &amp; February 1856, the blue coincides with the black
  83. <p>The entire areas may be compared by following the blue, the red &amp;
  84. the black lines enclosing them.
  85. </div>
  86. </div></div></body>
  87. </html>