| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <html>
- <head>
- <title>Crimean War</title>
- <link type="text/css" rel="stylesheet" href="../ex.css"/>
- <script type="text/javascript" src="../../protovis-r3.2.js"></script>
- <script type="text/javascript" src="crimea.js"></script>
- <style type="text/css">
- #fig {
- width: 800px;
- height: 450px;
- }
- #title {
- font: 16px baskerville;
- text-transform: uppercase;
- }
- #caption {
- position: absolute;
- font: oblique 12px baskerville;
- top: 300px;
- left: 25px;
- width: 320px;
- }
- #caption p {
- margin: 0;
- text-indent: 12px;
- }
- </style>
- </head>
- <body><div id="center"><div id="fig">
- <center id="title">
- Diagram <small>of the</small> Causes <small>of</small> Mortality<br>
- <small><small>in the</small> Army <small>of the</small> East</small>
- </center>
- <script type="text/javascript+protovis">
- /* Compute maximum. */
- crimea.forEach(function(d) d.max = Math.max(350, d.wounds, d.other, d.disease));
- /* Scales for radius, angle, and fill. */
- var format = pv.Format.date("%b"),
- radius = pv.Scale.linear(0, 1400).range(0, 275),
- angle = pv.Scale.linear(0, 12).range(Math.PI / 2, 5 * Math.PI / 2),
- fill = pv.colors("lightpink", "darkgray", "lightblue").domain(causes);
- var vis = new pv.Panel()
- .width(800)
- .height(450);
- /* Split the root panel by year. */
- var panel = vis.add(pv.Panel)
- .data([crimea.slice(12), crimea.slice(0, 12)])
- .left(function() this.index * 400);
- /* Add a panel per month, and sort causes by that month's deaths. */
- var wedge = panel.add(pv.Panel)
- .data(function(d) d)
- .add(pv.Wedge)
- .data(function(d) causes.sort(function(a, b) d[b] - d[a]))
- .left(200)
- .top(150)
- .angle(Math.PI / 6)
- .startAngle(function(c, d) angle(d.date.getMonth()))
- .outerRadius(function(c, d) radius(d[c]))
- .fillStyle(fill)
- .strokeStyle(function() this.fillStyle().darker())
- .lineWidth(1);
- /* Add a label using the pre-computed maximum value. */
- wedge.add(pv.Wedge)
- .data(["max"])
- .fillStyle(null)
- .strokeStyle(null)
- .anchor("outer").add(pv.Label)
- .text(function(c, d) format(d.date))
- .textAlign("center")
- .textBaseline("bottom")
- .textAngle(function() this.anchorTarget().midAngle() + Math.PI / 2);
- vis.render();
- </script>
- <div id="caption">
- The Areas of the blue, red, & black wedges are each measured from the
- centre as the common vertex
- <p>The blue wedges measured from the centre of the circle represent area
- for area the deaths from Preventible or Mitigable Zymotic Diseases, the
- red wedges measured from the center the deaths from wounds, & the
- black wedges measured from the center the deaths from all other causes
- <p>In October 1844, & April 1855, the black area coincides with the
- red, in January & February 1856, the blue coincides with the black
- <p>The entire areas may be compared by following the blue, the red &
- the black lines enclosing them.
- </div>
- </div></div></body>
- </html>
|