fix facet channel sort with transform (observablehq#1316)

* fix facet channel sort with transform

* marginLeft—less minimalist, but more readable

* rule y = 0

---------

Co-authored-by: Philippe Rivière <[email protected]>

Author: 2 people

src/channel.js

@@ -71,14 +71,14 @@ export function inferChannelScale(name, channel) {
 // Note: mutates channel.domain! This is set to a function so that it is lazily
 // computed; i.e., if the scale’s domain is set explicitly, that takes priority
 // over the sort option, and we don’t need to do additional work.
-export function channelDomain(channels, facetChannels, data, options) {
+export function channelDomain(data, facets, channels, facetChannels, options) {
   const {reverse: defaultReverse, reduce: defaultReduce = true, limit: defaultLimit} = options;
   for (const x in options) {
     if (!registry.has(x)) continue; // ignore unknown scale keys (including generic options)
     let {value: y, reverse = defaultReverse, reduce = defaultReduce, limit = defaultLimit} = maybeValue(options[x]);
     if (reverse === undefined) reverse = y === "width" || y === "height"; // default to descending for lengths
     if (reduce == null || reduce === false) continue; // disabled reducer
-    const X = findScaleChannel(channels, x) || (facetChannels && findScaleChannel(facetChannels, x));
+    const X = x === "fx" || x === "fy" ? reindexFacetChannel(facets, facetChannels[x]) : findScaleChannel(channels, x);
     if (!X) throw new Error(`missing channel for scale: ${x}`);
     const XV = X.value;
     const [lo = 0, hi = Infinity] = isIterable(limit) ? limit : limit < 0 ? [limit] : [0, limit];
@@ -120,6 +120,21 @@ function findScaleChannel(channels, scale) {
   }
 }
 
+// Facet channels are not affected by transforms; so, to compute the domain of a
+// facet scale, we must first re-index the facet channel according to the
+// transformed mark index. Note: mutates channel, but that should be safe here?
+function reindexFacetChannel(facets, channel) {
+  const originalFacets = facets.original;
+  if (originalFacets === facets) return channel; // not transformed
+  const V1 = channel.value;
+  const V2 = (channel.value = []); // mutates channel!
+  for (let i = 0; i < originalFacets.length; ++i) {
+    const vi = V1[originalFacets[i][0]];
+    for (const j of facets[i]) V2[j] = vi;
+  }
+  return channel;
+}
+
 function difference(channels, k1, k2) {
   const X1 = values(channels, k1);
   const X2 = values(channels, k2);

src/mark.js

@@ -78,9 +78,11 @@ export class Mark {
   initialize(facets, facetChannels) {
     let data = arrayify(this.data);
     if (facets === undefined && data != null) facets = [range(data)];
+    const originalFacets = facets;
     if (this.transform != null) ({facets, data} = this.transform(data, facets)), (data = arrayify(data));
+    if (facets !== undefined) facets.original = originalFacets; // needed up read facetChannels
     const channels = Channels(this.channels, data);
-    if (this.sort != null) channelDomain(channels, facetChannels, data, this.sort); // mutates facetChannels!
+    if (this.sort != null) channelDomain(data, facets, channels, facetChannels, this.sort); // mutates facetChannels!
     return {data, facets, channels};
   }
   filter(index, channels, values) {

test/output/athletesSortFacet.svg

@@ -1,6 +1,18 @@
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 
+export async function athletesSortFacet() {
+  const athletes = await d3.csv("data/athletes.csv", d3.autoType);
+  const female = (d) => d.sex === "female";
+  return Plot.plot({
+    marginLeft: 100,
+    marks: [
+      Plot.barX(athletes, Plot.groupZ({x: "mean"}, {x: female, fy: "sport", sort: {fy: "x"}})),
+      Plot.frame({anchor: "left", facet: "super"})
+    ]
+  });
+}
+
 export async function athletesSortNullLimit() {
   const athletes = await d3.csv("data/athletes.csv", d3.autoType);
   return Plot.plot({