diff --git a/src/transforms/stack.js b/src/transforms/stack.js index 20d7342e03..1ccf3bc174 100644 --- a/src/transforms/stack.js +++ b/src/transforms/stack.js @@ -106,7 +106,7 @@ function stack(x, y = one, kx, ky, {offset, order, reverse}, options) { 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 Y2[i] = Y1[i] = y === 0 ? yp : NaN; } } facetstacks.push(stacks); diff --git a/test/output/availability.svg b/test/output/availability.svg index 2727bef159..0e552df66c 100644 --- a/test/output/availability.svg +++ b/test/output/availability.svg @@ -18,7 +18,7 @@ - + @@ -26,30 +26,30 @@ 1 2 3 - 4 + 4 5 ↑ value - Jan2020 - Apr - Jul - Oct - Jan2021 - Apr + Jan2020 + Apr + Jul + Oct + Jan2021 + Apr - + diff --git a/test/output/downloads.svg b/test/output/downloads.svg index 4b0fb6d555..5d36dcdcf5 100644 --- a/test/output/downloads.svg +++ b/test/output/downloads.svg @@ -15,53 +15,53 @@ 0 - 2 + 2 4 6 - 8 + 8 10 12 - 14 + 14 16 18 - 20 + 20 22 - 24 + 24 ↑ downloads - 2018 - 2019 - 2020 - 2021 - 2022 + 2018 + 2019 + 2020 + 2021 + 2022 - + diff --git a/test/output/integerIntervalArea.html b/test/output/integerIntervalArea.html index d7073c9069..762c0649d0 100644 --- a/test/output/integerIntervalArea.html +++ b/test/output/integerIntervalArea.html @@ -97,8 +97,8 @@ x → - - + + diff --git a/test/output/integerIntervalAreaZ.html b/test/output/integerIntervalAreaZ.html index ca3f3de41b..2b0458ebf9 100644 --- a/test/output/integerIntervalAreaZ.html +++ b/test/output/integerIntervalAreaZ.html @@ -52,48 +52,48 @@ 0 - 2 - 4 - 6 - 8 - 10 - 12 - 14 - 16 + 2 + 4 + 6 + 8 + 10 + 12 + 14 + 16 ↑ y 0.0 - 1.0 - 2.0 + 1.0 + 2.0 3.0 x → - - - + + + diff --git a/test/output/seattlePrecipitationSum.svg b/test/output/seattlePrecipitationSum.svg index 2763aa5706..625aa63e47 100644 --- a/test/output/seattlePrecipitationSum.svg +++ b/test/output/seattlePrecipitationSum.svg @@ -15,118 +15,112 @@ 0 - 10 - 20 - 30 - 40 - 50 - 60 - 70 - 80 - 90 - 100 - 110 - 120 - 130 + 10 + 20 + 30 + 40 + 50 + 60 + 70 + 80 + 90 + 100 + 110 + 120 + 130 ↑ precipitation - 11Dec - 13 - 15 - 17 - 19 - 21 - 23 - 25 - 27 - 29 + 11Dec + 13 + 15 + 17 + 19 + 21 + 23 + 25 + 27 + 29 31 - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - 133 - 132 - 132 - 122 - 95 - 42 - 32 - 45 - 63 - 47 - 50 - 77 - 80 - 83 - 63 - 51 - 51 - 55 - 29 - 25 - 18 - 16 + 133 + 132 + 132 + 122 + 95 + 42 + 32 + 45 + 63 + 47 + 50 + 77 + 80 + 83 + 63 + 51 + 51 + 55 + 29 + 25 + 18 + 16 diff --git a/test/output/stackNaN.svg b/test/output/stackNaN.svg new file mode 100644 index 0000000000..d58b2010e7 --- /dev/null +++ b/test/output/stackNaN.svg @@ -0,0 +1,125 @@ + + + + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + + + ↑ Unemployed (thousands) + + + + 2000 + 2001 + 2002 + 2003 + 2004 + 2005 + 2006 + 2007 + 2008 + 2009 + 2010 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/index.ts b/test/plots/index.ts index 3c019e678f..d263a93a25 100644 --- a/test/plots/index.ts +++ b/test/plots/index.ts @@ -299,6 +299,7 @@ export * from "./single-value-bin.js"; export * from "./software-versions.js"; export * from "./sparse-cell.js"; export * from "./sparse-title.js"; +export * from "./stack-nan.js"; export * from "./stacked-bar.js"; export * from "./stacked-rect.js"; export * from "./stargazers-binned.js"; diff --git a/test/plots/stack-nan.ts b/test/plots/stack-nan.ts new file mode 100644 index 0000000000..d0cda41a05 --- /dev/null +++ b/test/plots/stack-nan.ts @@ -0,0 +1,23 @@ +import * as Plot from "@observablehq/plot"; +import * as d3 from "d3"; + +export async function stackNaN() { + const industries = await d3.csv("data/bls-industry-unemployment.csv", d3.autoType); + const gaps = new Map( + [...new Set(industries.map((d) => d.industry))].map((name, i) => [ + name, + [new Date(2000 + i, 0), new Date(2002 + i, 0)] + ]) + ); + for (const d of industries) { + const [lo, hi] = gaps.get(d.industry); + 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"})) + ] + }); +}