diff --git a/src/transforms/bin.js b/src/transforms/bin.js
index 3be7d72ea5..355bfb0f9f 100644
--- a/src/transforms/bin.js
+++ b/src/transforms/bin.js
@@ -45,6 +45,7 @@ import {
reduceIdentity,
reduceZ
} from "./group.js";
+import {maybeIdentityX, maybeIdentityY} from "./identity.js";
import {maybeInsetX, maybeInsetY} from "./inset.js";
// Group on {z, fill, stroke}, then optionally on y, then bin x.
@@ -78,12 +79,12 @@ function maybeDenseInterval(bin, k, options = {}) {
return bin(outputs, options);
}
-export function maybeDenseIntervalX({y = identity, x = indexOf, ...options} = {}) {
- return maybeDenseInterval(binX, "y", withTip({x, y, ...options}, "x"));
+export function maybeDenseIntervalX({x = indexOf, ...options} = {}) {
+ return maybeDenseInterval(binX, "y", withTip({x, ...maybeIdentityY(options)}, "x"));
}
-export function maybeDenseIntervalY({x = identity, y = indexOf, ...options} = {}) {
- return maybeDenseInterval(binY, "x", withTip({x, y, ...options}, "y"));
+export function maybeDenseIntervalY({y = indexOf, ...options} = {}) {
+ return maybeDenseInterval(binY, "x", withTip({y, ...maybeIdentityX(options)}, "y"));
}
function binn(
diff --git a/test/output/overlappingArea.svg b/test/output/overlappingArea.svg
new file mode 100644
index 0000000000..61a80f5df4
--- /dev/null
+++ b/test/output/overlappingArea.svg
@@ -0,0 +1,107 @@
+
\ No newline at end of file
diff --git a/test/plots/index.ts b/test/plots/index.ts
index d025972b51..0ae51bdd14 100644
--- a/test/plots/index.ts
+++ b/test/plots/index.ts
@@ -191,6 +191,7 @@ import "./npm-versions.js";
import "./offset.js";
import "./opacity.js";
import "./ordinal-bar.js";
+import "./overlapping-area.js";
import "./pairs.js";
import "./penguin-annotated.js";
import "./penguin-culmen-array.js";
diff --git a/test/plots/overlapping-area.ts b/test/plots/overlapping-area.ts
new file mode 100644
index 0000000000..871c9390a2
--- /dev/null
+++ b/test/plots/overlapping-area.ts
@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {test} from "test/plot";
+
+test(async function overlappingArea() {
+ const industries = await d3.csv("data/bls-industry-unemployment.csv", d3.autoType);
+ return Plot.plot({
+ marks: [
+ Plot.areaY(industries, {x: "date", y2: "unemployed", z: "industry", fillOpacity: 0.1}),
+ Plot.lineY(industries, {x: "date", y: "unemployed", z: "industry", strokeWidth: 1})
+ ]
+ });
+});