Support interval+reduce in the area mark

src/transforms/bin.js

@@ -71,7 +71,7 @@ function maybeDenseInterval(bin, k, options = {}) {
   if (options?.interval == null) return options;
   const {reduce = reduceFirst} = options;
   const outputs = {filter: null};
-  if (options[k] != null) outputs[k] = reduce;
+  if (options[k] !== null) outputs[k] = reduce;
   if (options[`${k}1`] != null) outputs[`${k}1`] = reduce;
   if (options[`${k}2`] != null) outputs[`${k}2`] = reduce;
   return bin(outputs, options);

test/plots/dense-interval.ts

@@ -0,0 +1,40 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function denseIntervalAreaY() {
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.plot({
+    marks: [Plot.areaY(aapl, {x: "Date", reduce: "count", interval: "month"})]
+  });
+}
+
+export async function denseIntervalLineY() {
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.plot({
+    marks: [Plot.lineY(aapl, {x: "Date", reduce: "count", interval: "month"})]
+  });
+}
+
+export async function denseIntervalAreaX() {
+  return Plot.areaX(
+    {length: 1000},
+    {
+      y: d3.randomNormal.source(d3.randomLcg(42))(),
+      reduce: "count",
+      interval: 0.5,
+      curve: "basis"
+    }
+  ).plot({width: 200});
+}
+
+export async function denseIntervalLineX() {
+  return Plot.lineX(
+    {length: 1000},
+    {
+      y: d3.randomNormal.source(d3.randomLcg(42))(),
+      reduce: "count",
+      interval: 0.5,
+      curve: "basis"
+    }
+  ).plot({width: 200});
+}

test/plots/index.ts

@@ -48,6 +48,7 @@ export * from "./boxplot.js";
 export * from "./caltrain-direction.js";
 export * from "./caltrain.js";
 export * from "./cars-dodge.js";
+export * from "./dense-interval.js";
 export * from "./cars-hexbin.js";
 export * from "./cars-jitter.js";
 export * from "./cars-mpg.js";