stack invalid values as NaN (#2390)

* stack invalids as NaN

* consolidate loop; avoid local time

* simplify

* fill(NaN)

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>

Author: Fil

src/transforms/stack.js

@@ -92,8 +92,8 @@ function stack(x, y = one, kx, ky, {offset, order, reverse}, options) {
       const Z = valueof(data, z);
       const compare = order && order(data, X, Y, Z);
       const n = lengthof(data);
-      const Y1 = setY1(new Float64Array(n));
-      const Y2 = setY2(new Float64Array(n));
+      const Y1 = setY1(new Float64Array(n).fill(NaN));
+      const Y2 = setY2(new Float64Array(n).fill(NaN));
       const facetstacks = [];
       for (const facet of facets) {
         const stacks = X ? Array.from(group(facet, (i) => X[i]).values()) : [facet];
@@ -105,8 +105,7 @@ function stack(x, y = one, kx, ky, {offset, order, reverse}, options) {
           for (const i of stack) {
             const y = Y[i];
             if (y < 0) yn = Y2[i] = (Y1[i] = yn) + y;
-            else if (y > 0) yp = Y2[i] = (Y1[i] = yp) + y;
-            else Y2[i] = Y1[i] = yp; // NaN or zero
+            else if (y >= 0) yp = Y2[i] = (Y1[i] = yp) + y;
           }
         }
         facetstacks.push(stacks);

test/output/availability.svg

@@ -97,8 +97,8 @@
       <text transform="translate(620,370)">x →</text>
     </g>
     <g aria-label="area" fill-opacity="0.7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
-      <path fill="#4269d0" stroke="#4269d0" d="M40,260.625L330,216.875L620,370L620,370L330,370L40,370Z"></path>
-      <path fill="#efb118" stroke="#efb118" d="M40,260.625L330,20L620,282.5L620,370L330,216.875L40,260.625Z"></path>
+      <path fill="#4269d0" stroke="#4269d0" d="M40,260.625L330,216.875L330,370L40,370Z"></path>
+      <path fill="#efb118" stroke="#efb118" d="M330,20L620,282.5L620,370L330,216.875Z"></path>
     </g>
     <g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g>
   </svg>

test/output/downloads.svg

@@ -91,9 +91,9 @@
       <text transform="translate(620,370)">x →</text>
     </g>
     <g aria-label="area" fill-opacity="0.7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
-      <path fill="#b2df8a" stroke="#a6cee3" d="M40,267.059L233.333,225.882L426.667,370L620,370L620,370L426.667,370L233.333,370L40,370Z"></path>
-      <path fill="#33a02c" stroke="#a6cee3" d="M40,267.059L233.333,40.588L426.667,287.647L620,370L620,370L426.667,370L233.333,225.882L40,267.059Z"></path>
-      <path fill="#fb9a99" stroke="#1f78b4" d="M40,267.059L233.333,20L426.667,287.647L620,225.882L620,370L426.667,287.647L233.333,40.588L40,267.059Z"></path>
+      <path fill="#b2df8a" stroke="#a6cee3" d="M40,267.059L233.333,225.882L233.333,370L40,370Z"></path>
+      <path fill="#33a02c" stroke="#a6cee3" d="M233.333,40.588L426.667,287.647L426.667,370L233.333,225.882Z"></path>
+      <path fill="#fb9a99" stroke="#1f78b4" d="M233.333,20L233.333,40.588ZM620,225.882L620,370Z"></path>
     </g>
     <g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g>
   </svg>

test/output/emptyFacet.svg

@@ -299,6 +299,7 @@ import "./single-value-bin.js";
 import "./software-versions.js";
 import "./sparse-cell.js";
 import "./sparse-title.js";
+import "./stack-nan.js";
 import "./stacked-bar.js";
 import "./stacked-rect.js";
 import "./stargazers-binned.js";

test/output/integerIntervalArea.html

@@ -0,0 +1,23 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {test} from "test/plot";
+
+test(async function stackNaN() {
+  const industries = await d3.csv<any>("data/bls-industry-unemployment.csv", d3.autoType);
+  for (const [i, [, D]] of d3.groups(industries, (d) => d.industry).entries()) {
+    const lo = Date.UTC(2000 + i, 0, 1, 8);
+    const hi = Date.UTC(2002 + i, 0, 1, 8);
+    for (const d of D) {
+      if (d.date >= lo && d.date < hi) {
+        d.unemployed = NaN;
+      }
+    }
+  }
+  return Plot.plot({
+    y: {grid: true, label: "Unemployed (thousands)", transform: (d) => d / 1000},
+    marks: [
+      Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", fillOpacity: 0.5}),
+      Plot.lineY(industries, Plot.stackY({x: "date", y: "unemployed", stroke: "industry"}))
+    ]
+  });
+});