allow sort to reduce data (observablehq#517)

mbostock · web-flow · commit 0f30405fbe89 · 2021-08-20T11:26:55.000-07:00
* allow sort to reduce data; update tests

* declare data as input
diff --git a/src/mark.js b/src/mark.js
@@ -49,7 +49,7 @@ export class Mark {
       const {name} = channel;
       return [name == null ? undefined : name + "", Channel(data, channel)];
     });
-    if (this.sort != null) channelSort(channels, facetChannels, this.sort);
+    if (this.sort != null) channelSort(channels, facetChannels, data, this.sort);
     return {index, channels};
   }
   plot({marks = [], ...options} = {}) {
@@ -67,7 +67,7 @@ function Channel(data, {scale, type, value}) {
   };
 }
 
-function channelSort(channels, facetChannels, options) {
+function channelSort(channels, facetChannels, data, options) {
   const {reverse: defaultReverse, reduce: defaultReduce = true, limit: defaultLimit} = options;
   for (const x in options) {
     if (!registry.has(x)) continue; // ignore unknown scale keys
@@ -85,9 +85,14 @@ function channelSort(channels, facetChannels, options) {
         return domain;
       };
     } else {
-      const Y = channels.find(([name]) => name === y);
-      if (!Y) throw new Error(`missing channel: ${y}`);
-      const YV = Y[1].value;
+      let YV;
+      if (y === "data") {
+        YV = data;
+      } else {
+        const Y = channels.find(([name]) => name === y);
+        if (!Y) throw new Error(`missing channel: ${y}`);
+        YV = Y[1].value;
+      }
       const reducer = maybeReduce(reduce === true ? "max" : reduce, YV);
       X[1].domain = () => {
         let domain = rollup(range(XV), I => reducer.reduce(I, YV), i => XV[i]);
diff --git a/test/plots/athletes-nationality.js b/test/plots/athletes-nationality.js
@@ -3,17 +3,15 @@ import * as d3 from "d3";
 
 export default async function() {
   const athletes = await d3.csv("data/athletes.csv", d3.autoType);
-  const top = new Set(d3.groupSort(athletes, g => -g.length, d => d.nationality).slice(0, 20));
   return Plot.plot({
     x: {
       grid: true
     },
     y: {
-      domain: top,
       label: null
     },
     marks: [
-      Plot.barX(athletes, Plot.groupY({x: "count"}, {y: "nationality"}))
+      Plot.barX(athletes, Plot.groupY({x: "count"}, {y: "nationality", sort: {y: "x", reverse: true, limit: 20}}))
     ]
   });
 }
diff --git a/test/plots/athletes-sport-sex.js b/test/plots/athletes-sport-sex.js
@@ -3,7 +3,6 @@ import * as d3 from "d3";
 
 export default async function() {
   const athletes = await d3.csv("data/athletes.csv", d3.autoType);
-  const female = data => d3.mean(data, d => d.sex === "female");
   return Plot.plot({
     marginLeft: 100,
     x: {
@@ -14,11 +13,10 @@ export default async function() {
       grid: true
     },
     y: {
-      label: null,
-      domain: d3.groupSort(athletes, female, d => d.sport)
+      label: null
     },
     marks: [
-      Plot.barX(athletes, Plot.groupY({x: female}, {y: "sport"}))
+      Plot.barX(athletes, Plot.groupY({x: "mean"}, {x: d => d.sex === "female", y: "sport", sort: {y: "x"}}))
     ]
   });
 }
diff --git a/test/plots/ballot-status-race.js b/test/plots/ballot-status-race.js
@@ -62,7 +62,6 @@ export default async function() {
       axis: null
     },
     fy: {
-      domain: d3.groupSort(rollup, group => -group.find(d => d.status === "ACCEPTED").percent, d => d.race),
       label: null
     },
     color: {
@@ -75,7 +74,17 @@ export default async function() {
       marginLeft: 210
     },
     marks: [
-      Plot.barX(rollup, {x: "percent", y: "status", fill: "status", title: d => `${d.percent.toFixed(1)}%`}),
+      Plot.barX(rollup, {
+        x: "percent",
+        y: "status",
+        fill: "status",
+        title: d => `${d.percent.toFixed(1)}%`,
+        sort: {
+          fy: "data",
+          reduce: data => data.find(d => d.status === "ACCEPTED").percent,
+          reverse: true
+        }
+      }),
       Plot.ruleX([0])
     ]
   });
diff --git a/test/plots/d3-survey-2015.js b/test/plots/d3-survey-2015.js
@@ -34,15 +34,15 @@ function bars(groups, title) {
     y: {
       padding: 0,
       label: title,
-      labelAnchor: "top",
-      domain: d3.groupSort(groups, ([[, value]]) => -value, ([key]) => key)
+      labelAnchor: "top"
     },
     marks: [
       Plot.barX(groups, {
         x: ([, value]) => value,
         y: ([key]) => key,
         fill: "steelblue",
-        insetTop: 1
+        insetTop: 1,
+        sort: {y: "x", reverse: true}
       }),
       Plot.ruleX([0])
     ]
diff --git a/test/plots/metro-unemployment-ridgeline.js b/test/plots/metro-unemployment-ridgeline.js
@@ -11,7 +11,6 @@ export default async function() {
       axis: null
     },
     fy: {
-      domain: d3.groupSort(data, g => -d3.max(g, d => d.unemployment), d => d.division),
       label: null
     },
     facet: {
@@ -21,7 +20,7 @@ export default async function() {
     },
     marks: [
       Plot.areaY(data, {x: "date", y: "unemployment", fill: "#eee"}),
-      Plot.line(data, {x: "date", y: "unemployment"}),
+      Plot.line(data, {x: "date", y: "unemployment", sort: {fy: "y", reverse: true}}),
       Plot.ruleY([0])
     ]
   });
diff --git a/test/plots/movies-profit-by-genre.js b/test/plots/movies-profit-by-genre.js
@@ -13,9 +13,6 @@ export default async function() {
       label: "Profit ($M) &rarr;",
       domain: [d3.min(movies, Profit), 1e3]
     },
-    y: {
-      domain: d3.groupSort(movies, movies => -d3.median(movies, Profit), Genre)
-    },
     marks: [
       Plot.ruleX([0]),
       Plot.barX(movies, Plot.groupY({x1: quartile1, x2: quartile3}, {
@@ -32,7 +29,8 @@ export default async function() {
         y: Genre,
         x: Profit,
         stroke: "red",
-        strokeWidth: 2
+        strokeWidth: 2,
+        sort: {y: "x", reverse: true}
       }))
     ]
   });
diff --git a/test/plots/us-population-state-age-dots.js b/test/plots/us-population-state-age-dots.js
@@ -15,7 +15,6 @@ export default async function() {
       transform: d => d * 100
     },
     y: {
-      domain: d3.groupSort(stateage, g => -g.find(d => d.age === "&ge;80").population / d3.sum(g, d => d.population), d => d.state),
       axis: null
     },
     color: {
@@ -26,7 +25,7 @@ export default async function() {
       Plot.ruleX([0]),
       Plot.ruleY(stateage, Plot.groupY({x1: "min", x2: "max"}, position)),
       Plot.dot(stateage, {...position, fill: "age"}),
-      Plot.text(stateage, Plot.selectMinX({...position, textAnchor: "end", dx: -6, text: "state"}))
+      Plot.text(stateage, Plot.selectMinX({...position, textAnchor: "end", dx: -6, text: "state", sort: {y: "x", reduce: "min", reverse: true}}))
     ]
   });
 }
