center the silhouette and wiggle offsets (#444)

* center the silhouette and wiggle offsets

closes #424

* center the silhouette and wiggle stacks across facets, while keeping them based on the smaller x1 overall at 0

* embed the offsetCenterFacet logic in the offset function
see discussion at #444 (review)

* consolidate map

* rename for clarity

* tweak footballCoverage example

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

Author: Fil

src/transforms/stack.js

@@ -1,4 +1,4 @@
-import {InternMap, cumsum, group, groupSort, greatest, rollup, sum, min} from "d3";
+import {InternMap, cumsum, group, groupSort, greatest, max, min, rollup, sum} from "d3";
 import {ascendingDefined} from "../defined.js";
 import {field, lazyChannel, maybeLazyChannel, maybeZ, mid, range, valueof, maybeZero, isOptions, maybeValue} from "../mark.js";
 import {basic} from "./basic.js";
@@ -93,6 +93,7 @@ function stack(x, y = () => 1, ky, {offset, order, reverse}, options) {
       const n = data.length;
       const Y1 = setY1(new Float64Array(n));
       const Y2 = setY2(new Float64Array(n));
+      const facetstacks = [];
       for (const facet of facets) {
         const stacks = X ? Array.from(group(facet, i => X[i]).values()) : [facet];
         if (O) applyOrder(stacks, O);
@@ -106,8 +107,9 @@ function stack(x, y = () => 1, ky, {offset, order, reverse}, options) {
             else Y2[i] = Y1[i] = yp; // NaN or zero
           }
         }
-        if (offset) offset(stacks, Y1, Y2, Z);
+        facetstacks.push(stacks);
       }
+      if (offset) offset(facetstacks, Y1, Y2, Z);
       return {data, facets};
     }),
     X,
@@ -139,51 +141,59 @@ function extent(stack, Y2) {
   return [min, max];
 }
 
-function offsetExpand(stacks, Y1, Y2) {
-  for (const stack of stacks) {
-    const [yn, yp] = extent(stack, Y2);
-    for (const i of stack) {
-      const m = 1 / (yp - yn || 1);
-      Y1[i] = m * (Y1[i] - yn);
-      Y2[i] = m * (Y2[i] - yn);
+function offsetExpand(facetstacks, Y1, Y2) {
+  for (const stacks of facetstacks) {
+    for (const stack of stacks) {
+      const [yn, yp] = extent(stack, Y2);
+      for (const i of stack) {
+        const m = 1 / (yp - yn || 1);
+        Y1[i] = m * (Y1[i] - yn);
+        Y2[i] = m * (Y2[i] - yn);
+      }
     }
   }
 }
 
-function offsetCenter(stacks, Y1, Y2) {
-  for (const stack of stacks) {
-    const [yn, yp] = extent(stack, Y2);
-    for (const i of stack) {
-      const m = (yp + yn) / 2;
-      Y1[i] -= m;
-      Y2[i] -= m;
+function offsetCenter(facetstacks, Y1, Y2) {
+  for (const stacks of facetstacks) {
+    for (const stack of stacks) {
+      const [yn, yp] = extent(stack, Y2);
+      for (const i of stack) {
+        const m = (yp + yn) / 2;
+        Y1[i] -= m;
+        Y2[i] -= m;
+      }
     }
+    offsetZero(stacks, Y1, Y2);
   }
-  offsetZero(stacks, Y1, Y2);
+  offsetCenterFacets(facetstacks, Y1, Y2);
 }
 
-function offsetWiggle(stacks, Y1, Y2, Z) {
-  const prev = new InternMap();
-  let y = 0;
-  for (const stack of stacks) {
-    let j = -1;
-    const Fi = stack.map(i => Math.abs(Y2[i] - Y1[i]));
-    const Df = stack.map(i => {
-      j = Z ? Z[i] : ++j;
-      const value = Y2[i] - Y1[i];
-      const diff = prev.has(j) ? value - prev.get(j) : 0;
-      prev.set(j, value);
-      return diff;
-    });
-    const Cf1 = [0, ...cumsum(Df)];
-    for (const i of stack) {
-      Y1[i] += y;
-      Y2[i] += y;
+function offsetWiggle(facetstacks, Y1, Y2, Z) {
+  for (const stacks of facetstacks) {
+    const prev = new InternMap();
+    let y = 0;
+    for (const stack of stacks) {
+      let j = -1;
+      const Fi = stack.map(i => Math.abs(Y2[i] - Y1[i]));
+      const Df = stack.map(i => {
+        j = Z ? Z[i] : ++j;
+        const value = Y2[i] - Y1[i];
+        const diff = prev.has(j) ? value - prev.get(j) : 0;
+        prev.set(j, value);
+        return diff;
+      });
+      const Cf1 = [0, ...cumsum(Df)];
+      for (const i of stack) {
+        Y1[i] += y;
+        Y2[i] += y;
+      }
+      const s1 = sum(Fi);
+      if (s1) y -= sum(Fi, (d, i) => (Df[i] / 2 + Cf1[i]) * d) / s1;
     }
-    const s1 = sum(Fi);
-    if (s1) y -= sum(Fi, (d, i) => (Df[i] / 2 + Cf1[i]) * d) / s1;
+    offsetZero(stacks, Y1, Y2);
   }
-  offsetZero(stacks, Y1, Y2);
+  offsetCenterFacets(facetstacks, Y1, Y2);
 }
 
 function offsetZero(stacks, Y1, Y2) {
@@ -196,6 +206,21 @@ function offsetZero(stacks, Y1, Y2) {
   }
 }
 
+function offsetCenterFacets(facetstacks, Y1, Y2) {
+  const n = facetstacks.length;
+  if (n === 1) return;
+  const facets = facetstacks.map(stacks => stacks.flat());
+  const m = facets.map(I => (min(I, i => Y1[i]) + max(I, i => Y2[i])) / 2);
+  const m0 = min(m);
+  for (let j = 0; j < n; j++) {
+    const p = m0 - m[j];
+    for (const i of facets[j]) {
+      Y1[i] += p;
+      Y2[i] += p;
+    }
+  }
+}
+
 function maybeOrder(order, offset, ky) {
   if (order === undefined && offset === offsetWiggle) return orderInsideOut;
   if (order == null) return;

test/data/football-coverage.csv

@@ -0,0 +1,225 @@
+coverage,value
+C2,0.124
+C2,0.1012
+C2,0.0902
+C2,0.1421
+C2,0.0905
+C2,0.1248
+C2,0.0766
+C2,0.0898
+C2,0.1121
+C2,0.1385
+C2,0.1282
+C2,0.1016
+C2,0.1352
+C2,0.1082
+C2,0.1115
+C2,0.1335
+C2,0.087
+C2,0.0827
+C2,0.119
+C2,0.1023
+C2,0.0942
+C2,0.1445
+C2,0.1056
+C2,0.1146
+C2,0.1244
+C2,0.1107
+C2,0.14
+C2,0.0907
+C2,0.1226
+C2,0.1349
+C2,0.1003
+C2,0.1284
+C3,0.339
+C3,0.3513
+C3,0.3826
+C3,0.3429
+C3,0.3157
+C3,0.3537
+C3,0.3884
+C3,0.3404
+C3,0.3156
+C3,0.3538
+C3,0.3359
+C3,0.3288
+C3,0.3461
+C3,0.3465
+C3,0.3425
+C3,0.3187
+C3,0.3646
+C3,0.3492
+C3,0.3649
+C3,0.3482
+C3,0.3292
+C3,0.3806
+C3,0.3389
+C3,0.406
+C3,0.356
+C3,0.3298
+C3,0.3437
+C3,0.3335
+C3,0.3539
+C3,0.3421
+C3,0.3623
+C3,0.353
+C4,0.2056
+C4,0.1592
+C4,0.2042
+C4,0.196
+C4,0.234
+C4,0.2445
+C4,0.2376
+C4,0.2099
+C4,0.1559
+C4,0.2277
+C4,0.2016
+C4,0.2124
+C4,0.1622
+C4,0.1893
+C4,0.216
+C4,0.174
+C4,0.1869
+C4,0.179
+C4,0.2296
+C4,0.1784
+C4,0.1934
+C4,0.1913
+C4,0.182
+C4,0.21
+C4,0.1694
+C4,0.1545
+C4,0.2174
+C4,0.2177
+C4,0.1869
+C4,0.1873
+C4,0.1645
+C4,0.2029
+M0,0.2023
+M0,0.2262
+M0,0.1968
+M0,0.2103
+M0,0.2423
+M0,0.1992
+M0,0.193
+M0,0.1994
+M0,0.1532
+M0,0.2495
+M0,0.1746
+M0,0.2285
+M0,0.1937
+M0,0.2176
+M0,0.2182
+M0,0.2042
+M0,0.1953
+M0,0.2388
+M0,0.2363
+M0,0.2658
+M0,0.2132
+M0,0.2283
+M0,0.2363
+M0,0.1727
+M0,0.2334
+M0,0.2274
+M0,0.2406
+M0,0.2407
+M0,0.2212
+M0,0.2392
+M0,0.1921
+M0,0.2553
+M1,0.3343
+M1,0.3426
+M1,0.3487
+M1,0.3454
+M1,0.2872
+M1,0.32
+M1,0.3529
+M1,0.3403
+M1,0.3245
+M1,0.3158
+M1,0.2974
+M1,0.3061
+M1,0.315
+M1,0.3068
+M1,0.3262
+M1,0.2838
+M1,0.3513
+M1,0.3544
+M1,0.2983
+M1,0.3652
+M1,0.3224
+M1,0.3025
+M1,0.3416
+M1,0.3204
+M1,0.35
+M1,0.3126
+M1,0.3496
+M1,0.3153
+M1,0.3303
+M1,0.3364
+M1,0.3251
+M1,0.3418
+M2,0.1089
+M2,0.1769
+M2,0.1504
+M2,0.1378
+M2,0.1904
+M2,0.1491
+M2,0.1825
+M2,0.153
+M2,0.1617
+M2,0.2008
+M2,0.1366
+M2,0.1549
+M2,0.19
+M2,0.1114
+M2,0.154
+M2,0.1609
+M2,0.1634
+M2,0.1661
+M2,0.1698
+M2,0.1242
+M2,0.1542
+M2,0.1641
+M2,0.1422
+M2,0.1561
+M2,0.1857
+M2,0.1489
+M2,0.1626
+M2,0.1386
+M2,0.1443
+M2,0.1596
+M2,0.1603
+M2,0.2085
+T2,0.3073
+T2,0.312
+T2,0.2928
+T2,0.3228
+T2,0.3124
+T2,0.2958
+T2,0.3288
+T2,0.3444
+T2,0.2848
+T2,0.3199
+T2,0.3006
+T2,0.3044
+T2,0.3358
+T2,0.3026
+T2,0.2613
+T2,0.2752
+T2,0.3272
+T2,0.3275
+T2,0.3371
+T2,0.2767
+T2,0.3074
+T2,0.316
+T2,0.2976
+T2,0.3328
+T2,0.2836
+T2,0.3019
+T2,0.3103
+T2,0.3155
+T2,0.3264
+T2,0.3178
+T2,0.2654
+T2,0.2922