adopt Plot.find

Author: Fil

test/output/youngAdults.html

@@ -165,6 +165,9 @@ <h3>…by age and sex. Data: Eurostat</h3>
         <text y="0.32em" transform="translate(40,30)">100</text>
       </g>
     </g>
+    <g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-26.5)">
+      <text y="0.71em" transform="translate(40,30)">↑ OBS_VALUE</text>
+    </g>
     <g aria-label="x-axis tick" transform="translate(0.5,0)">
       <g fill="none" stroke="currentColor" transform="translate(0,0)">
         <path transform="translate(48.833333333333336,400)" d="M0,0L0,6"></path>
@@ -230,7 +233,7 @@ <h3>…by age and sex. Data: Eurostat</h3>
       </g>
     </g>
     <g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
-      <text transform="translate(907,400)">year →</text>
+      <text transform="translate(907,400)">TIME_PERIOD →</text>
     </g>
     <g aria-label="frame" transform="translate(0.5,0.5)">
       <rect fill="none" stroke="currentColor" x="40" y="30" width="159" height="370" transform="translate(0,0)"></rect>

test/plots/young-adults.ts

@@ -2,26 +2,11 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 
 export async function youngAdults() {
-  const ilc_lvps08 = await d3.csv<any>("data/ilc_lvps08.csv", d3.autoType);
   const ages = ["Y16-19", "Y20-24", "Y25-29"];
   const geos = ["SE", "FR", "DE", "TR", "IT"];
-  const wider = d3
-    .flatRollup(
-      ilc_lvps08.filter(({age, geo}) => ages.includes(age) && geos.includes(geo)),
-      (v) =>
-        Object.fromEntries(
-          d3
-            .index(
-              v.map(({sex, OBS_VALUE}) => [sex, OBS_VALUE]),
-              (d) => d[0]
-            )
-            .values()
-        ),
-      (d) => d.geo,
-      (d) => d.age,
-      (d) => d.TIME_PERIOD
-    )
-    .map(([geo, age, year, d]) => ({geo, age, year, ...d}));
+  const ilc_lvps08 = await d3.csv<any>("data/ilc_lvps08.csv", (d) =>
+    ages.includes(d.age) && geos.includes(d.geo) ? d3.autoType(d) : null
+  );
   return Plot.plot({
     title: "Share of young adults living with their parents (%)",
     subtitle: "…by age and sex. Data: Eurostat",
@@ -32,20 +17,28 @@ export async function youngAdults() {
     y: {grid: true, nice: true},
     marks: [
       Plot.frame(),
-      Plot.differenceY(wider, {
-        x: "year",
-        y1: "F",
-        y2: "M",
-        sort: {fx: {value: "y", reduce: "mean"}},
-        fillOpacity: 0.5,
-        negativeFill: "grey",
-        positiveFill: "age",
-        fx: "geo",
-        curve: "basis",
-        z: (d) => `${d.age}, ${d.geo}`,
-        channels: {M: "M", F: "F"},
-        tip: true
-      })
+      Plot.differenceY(
+        ilc_lvps08,
+        Plot.groupX(
+          {
+            y1: Plot.find((d) => d.sex === "F"),
+            y2: Plot.find((d) => d.sex === "M"),
+            positiveFill: "first"
+          },
+          {
+            x: "TIME_PERIOD",
+            y: "OBS_VALUE",
+            negativeFill: "grey",
+            positiveFill: "age",
+            z: "age",
+            sort: {fx: {value: "y", reduce: "mean"}},
+            fillOpacity: 0.5,
+            fx: "geo",
+            curve: "basis",
+            tip: true
+          }
+        )
+      )
     ]
   });
 }