test plots (#546)

* replace proportion plot by "who owns Britain"

* tweak example

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

test/data/README.md

@@ -101,3 +101,9 @@ https://www.census.gov/retail/mrts/historic_releases.html
 ## us-state-population-2010-2019.csv
 U.S. Census Bureau (?)
 https://observablehq.com/@d3/diverging-bar-chart
+
+## wealth-britain.csv
+U.K. Office for National Statistics
+A recreation of “Who owns Britain?” by Richard Speigal; proportion plot chart type by Stephanie Evergreen
+https://www.linkedin.com/feed/update/urn:li:activity:6758306750174138368/
+https://stephanieevergreen.com/proportion-plots/

test/data/police-deaths.csv

@@ -0,0 +1,5 @@
+age,population,wealth
+16-34’s,30,3
+35-54’s,33,32
+55-74’s,28,52
+Over 75’s,9,13

test/data/wealth-britain.csv

@@ -90,8 +90,6 @@ export {default as penguinSpeciesIsland} from "./penguin-species-island.js";
 export {default as penguinSpeciesIslandRelative} from "./penguin-species-island-relative.js";
 export {default as penguinSpeciesIslandSex} from "./penguin-species-island-sex.js";
 export {default as polylinear} from "./polylinear.js";
-export {default as policeDeaths} from "./police-deaths.js";
-export {default as policeDeathsBar} from "./police-deaths-bar.js";
 export {default as randomBins} from "./random-bins.js";
 export {default as randomBinsXY} from "./random-bins-xy.js";
 export {default as randomQuantile} from "./random-quantile.js";
@@ -126,6 +124,8 @@ export {default as usPresidentialElection2020} from "./us-presidential-election-
 export {default as usPresidentialForecast2016} from "./us-presidential-forecast-2016.js";
 export {default as usRetailSales} from "./us-retail-sales.js";
 export {default as usStatePopulationChange} from "./us-state-population-change.js";
+export {default as wealthBritainBar} from "./wealth-britain-bar.js";
+export {default as wealthBritainProportionPlot} from "./wealth-britain-proportion-plot.js";
 export {default as wordCloud} from "./word-cloud.js";
 export {default as wordLengthMobyDick} from "./word-length-moby-dick.js";
 

test/output/policeDeathsBar.svg renamed to test/output/wealthBritainBar.svg

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const data = await d3.csv("data/wealth-britain.csv", d3.autoType);
+  return Plot.plot({
+    marks: [
+      Plot.barX(data, Plot.stackX({x: "wealth", fill: "age"})),
+      Plot.textX(data, Plot.stackX({x: "wealth", text: "age"})),
+      Plot.ruleX([0, 100])
+    ]
+  });
+}

test/output/wealthBritainProportionPlot.svg

@@ -0,0 +1,65 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const wide = await d3.csv("data/wealth-britain.csv", d3.autoType);
+  const columns = wide.columns.slice(1);
+  const data = columns.flatMap(type => wide.map(d => ({age: d.age, type, value: d[type]})));
+  const stack = options => Plot.stackY({}, {x: "type", y: "value", z: "age", ...options});
+  return Plot.plot({
+    x: {
+      domain: columns,
+      axis: "top",
+      label: null,
+      tickFormat: d => `Share of ${d}`,
+      tickSize: 0,
+      padding: 0 // see margins
+    },
+    y: {
+      axis: null,
+      reverse: true
+    },
+    color: {
+      scheme: "prgn",
+      reverse: true
+    },
+    marginLeft: 50,
+    marginRight: 60,
+    marks: [
+      Plot.areaY(data, stack({
+        curve: "bump-x",
+        fill: "age",
+        stroke: "white"
+      })),
+      Plot.text(
+        data,
+        stack({
+          filter: d => d.type === "population",
+          text: d => `${d.value}%`,
+          textAnchor: "end",
+          dx: -6
+        })
+      ),
+      Plot.text(
+        data,
+        stack({
+          filter: d => d.type === "wealth",
+          text: d => `${d.value}%`,
+          textAnchor: "start",
+          dx: +6
+        })
+      ),
+      Plot.text(
+        data,
+        stack({
+          filter: d => d.type === "population",
+          text: "age",
+          textAnchor: "start",
+          fill: "white",
+          fontWeight: "bold",
+          dx: +8
+        })
+      )
+    ]
+  });
+}