Use @gka’s transcription of Nightingale’s report.

Fixes mbostock#10 mbostock#11.
composarc · Nov 5, 2013 · fe258ac · fe258ac
1 parent 1a61bac
commit fe258ac
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 99 deletions.
diff --git a/examples/crimea/crimea-grouped-bar.html b/examples/crimea/crimea-grouped-bar.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Crimean War</title>
@@ -19,7 +20,7 @@
 var w = 545,
     h = 280,
     x = pv.Scale.ordinal(crimea, function(d) d.date).splitBanded(0, w, 4 / 5),
-    y = pv.Scale.linear(0, 1500).range(0, h),
+    y = pv.Scale.linear(0, .1).range(0, h),
     k = x.range().band / causes.length,
     format = pv.Format.date("%b");
 
@@ -39,7 +40,7 @@
     .bottom(0)
     .width(k)
     .left(function() this.index * k)
-    .height(function(t, d) y(d[t]))
+    .height(function(t, d) y(d[t] / d.total))
     .fillStyle(pv.colors("lightpink", "darkgray", "lightblue"))
     .strokeStyle(function() this.fillStyle().darker())
     .lineWidth(1);
@@ -56,7 +57,8 @@
     .strokeStyle(function(i) i ? "rgba(255, 255, 255, .5)" : "black")
   .anchor("right").add(pv.Label)
     .visible(function() !(this.index & 1))
-    .textMargin(6);
+    .textMargin(6)
+    .text(function(d) Math.round(d * 100) + "%");
 
 vis.render();
 

diff --git a/examples/crimea/crimea-line.html b/examples/crimea/crimea-line.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Crimean War</title>
@@ -19,7 +20,7 @@
 var w = 545,
     h = 280,
     x = pv.Scale.linear(crimea, function(d) d.date).range(0, w),
-    y = pv.Scale.linear(0, 1500).range(0, h),
+    y = pv.Scale.linear(0, .1).range(0, h),
     fill = pv.colors("lightpink", "darkgray", "lightblue"),
     format = pv.Format.date("%b");
 
@@ -34,7 +35,7 @@
   .add(pv.Line)
     .data(crimea)
     .left(function(d) x(d.date))
-    .bottom(function(d, t) y(d[t]))
+    .bottom(function(d, t) y(d[t] / d.total))
     .strokeStyle(fill.by(pv.parent))
     .lineWidth(3);
 
@@ -52,7 +53,8 @@
     .strokeStyle(function(i) i ? "#ccc" : "black")
   .anchor("right").add(pv.Label)
     .visible(function() !(this.index & 1))
-    .textMargin(6);
+    .textMargin(6)
+    .text(function(d) Math.round(d * 100) + "%");
 
 vis.render();
 

diff --git a/examples/crimea/crimea-stacked-area.html b/examples/crimea/crimea-stacked-area.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Crimean War</title>
@@ -19,7 +20,7 @@
 var w = 545,
     h = 280,
     x = pv.Scale.linear(crimea, function(d) d.date).range(0, w),
-    y = pv.Scale.linear(0, 2200).range(0, h),
+    y = pv.Scale.linear(0, .1).range(0, h),
     fill = pv.colors("lightpink", "darkgray", "lightblue"),
     format = pv.Format.date("%b");
 
@@ -33,7 +34,7 @@
     .layers(causes)
     .values(crimea)
     .x(function(d) x(d.date))
-    .y(function(d, t) y(d[t]))
+    .y(function(d, t) y(d[t] / d.total))
   .layer.add(pv.Area)
     .fillStyle(fill.by(pv.parent))
     .strokeStyle(function() this.fillStyle().darker())
@@ -52,7 +53,8 @@
     .bottom(y)
     .strokeStyle(function(i) i ? "rgba(255, 255, 255, .7)" : "black")
   .anchor("right").add(pv.Label)
-    .textMargin(6);
+    .textMargin(6)
+    .text(function(d) Math.round(d * 100) + "%");
 
 vis.render();
 

diff --git a/examples/crimea/crimea-stacked-bar.html b/examples/crimea/crimea-stacked-bar.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Crimean War</title>
@@ -19,7 +20,7 @@
 var w = 545,
     h = 280,
     x = pv.Scale.ordinal(crimea, function(d) d.date).splitBanded(0, w),
-    y = pv.Scale.linear(0, 2200).range(0, h),
+    y = pv.Scale.linear(0, .1).range(0, h),
     fill = pv.colors("lightpink", "darkgray", "lightblue"),
     format = pv.Format.date("%b");
 
@@ -33,7 +34,7 @@
     .layers(causes)
     .values(crimea)
     .x(function(d) x(d.date))
-    .y(function(d, t) y(d[t]))
+    .y(function(d, t) y(d[t] / d.total))
   .layer.add(pv.Bar)
     .antialias(false)
     .width(x.range().band)
@@ -51,7 +52,8 @@
     .bottom(y)
     .strokeStyle(function(i) i ? "rgba(255, 255, 255, .7)" : "black")
   .anchor("right").add(pv.Label)
-    .textMargin(6);
+    .textMargin(6)
+    .text(function(d) Math.round(d * 100) + "%");
 
 vis.render();
 

diff --git a/examples/crimea/crimea.html b/examples/crimea/crimea.html
@@ -1,34 +1,30 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Crimean War</title>
-    <link type="text/css" rel="stylesheet" href="../ex.css"/>
+    <link type="text/css" rel="stylesheet" href="../ex.css?3.2"/>
     <script type="text/javascript" src="../../protovis.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;
-}
-
+      #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">
@@ -38,50 +34,55 @@
     </center>
     <script type="text/javascript+protovis">
 
-/* Compute maximum. */
-crimea.forEach(function(d) d.max = Math.max(350, d.wounds, d.other, d.disease));
+      /* Compute per-capita death rate for each month, and monthly maximum. */
+      crimea.forEach(function(d) {
+        d.wounds /= d.total;
+        d.other /= d.total;
+        d.disease /= d.total;
+        d.max = Math.max(.008, 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);
+      /* Scales for radius, angle, and fill. */
+      var format = pv.Format.date("%b"),
+          radius = pv.Scale.root(0, pv.max(crimea, function(d) d.max)).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);
+      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);
+      /* 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 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);
+      /* 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();
+      vis.render();
 
     </script>
     <div id="caption">

diff --git a/examples/crimea/crimea.js b/examples/crimea/crimea.js
@@ -1,30 +1,30 @@
 var causes = ["wounds", "other", "disease"];
 
 var crimea = [
-  { date: "4/1854", wounds: 0, other: 110, disease: 110 },
-  { date: "5/1854", wounds: 0, other: 95, disease: 105 },
-  { date: "6/1854", wounds: 0, other: 40, disease: 95 },
-  { date: "7/1854", wounds: 0, other: 140, disease: 520 },
-  { date: "8/1854", wounds: 20, other: 150, disease: 800 },
-  { date: "9/1854", wounds: 220, other: 230, disease: 740 },
-  { date: "10/1854", wounds: 305, other: 310, disease: 600 },
-  { date: "11/1854", wounds: 480, other: 290, disease: 820 },
-  { date: "12/1854", wounds: 295, other: 310, disease: 1100 },
-  { date: "1/1855", wounds: 230, other: 460, disease: 1440 },
-  { date: "2/1855", wounds: 180, other: 520, disease: 1270 },
-  { date: "3/1855", wounds: 155, other: 350, disease: 935 },
-  { date: "4/1855", wounds: 195, other: 195, disease: 560 },
-  { date: "5/1855", wounds: 180, other: 155, disease: 550 },
-  { date: "6/1855", wounds: 330, other: 130, disease: 650 },
-  { date: "7/1855", wounds: 260, other: 130, disease: 430 },
-  { date: "8/1855", wounds: 290, other: 110, disease: 490 },
-  { date: "9/1855", wounds: 355, other: 100, disease: 290 },
-  { date: "10/1855", wounds: 135, other: 95, disease: 245 },
-  { date: "11/1855", wounds: 100, other: 140, disease: 325 },
-  { date: "12/1855", wounds: 40, other: 120, disease: 215 },
-  { date: "1/1856", wounds: 0, other: 160, disease: 160 },
-  { date: "2/1856", wounds: 0, other: 100, disease: 100 },
-  { date: "3/1856", wounds: 0, other: 125, disease: 90 }
+  {date:  "4/1854", total:  8571, disease:    1, wounds:   0, other:   5},
+  {date:  "5/1854", total: 23333, disease:   12, wounds:   0, other:   9},
+  {date:  "6/1854", total: 28333, disease:   11, wounds:   0, other:   6},
+  {date:  "7/1854", total: 28772, disease:  359, wounds:   0, other:  23},
+  {date:  "8/1854", total: 30246, disease:  828, wounds:   1, other:  30},
+  {date:  "9/1854", total: 30290, disease:  788, wounds:  81, other:  70},
+  {date: "10/1854", total: 30643, disease:  503, wounds: 132, other: 128},
+  {date: "11/1854", total: 29736, disease:  844, wounds: 287, other: 106},
+  {date: "12/1854", total: 32779, disease: 1725, wounds: 114, other: 131},
+  {date:  "1/1855", total: 32393, disease: 2761, wounds:  83, other: 324},
+  {date:  "2/1855", total: 30919, disease: 2120, wounds:  42, other: 361},
+  {date:  "3/1855", total: 30107, disease: 1205, wounds:  32, other: 172},
+  {date:  "4/1855", total: 32252, disease:  477, wounds:  48, other:  57},
+  {date:  "5/1855", total: 35473, disease:  508, wounds:  49, other:  37},
+  {date:  "6/1855", total: 38863, disease:  802, wounds: 209, other:  31},
+  {date:  "7/1855", total: 42647, disease:  382, wounds: 134, other:  33},
+  {date:  "8/1855", total: 44614, disease:  483, wounds: 164, other:  25},
+  {date:  "9/1855", total: 47751, disease:  189, wounds: 276, other:  20},
+  {date: "10/1855", total: 46852, disease:  128, wounds:  53, other:  18},
+  {date: "11/1855", total: 37853, disease:  178, wounds:  33, other:  32},
+  {date: "12/1855", total: 43217, disease:   91, wounds:  18, other:  28},
+  {date:  "1/1856", total: 44212, disease:   42, wounds:   2, other:  48},
+  {date:  "2/1856", total: 43485, disease:   24, wounds:   0, other:  19},
+  {date:  "3/1856", total: 46140, disease:   15, wounds:   0, other:  35}
 ];
 
 (function() {