interval-aware bin, stack

Author: mbostock

src/options.js

@@ -1,5 +1,6 @@
+import {color, descending, quantile, range as rangei} from "d3";
 import {parse as isoParse} from "isoformat";
-import {color, descending, range as rangei, quantile} from "d3";
+import {defined} from "./defined.js";
 import {maybeTimeInterval, maybeUtcInterval} from "./time.js";
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
@@ -269,6 +270,18 @@ export function mid(x1, x2) {
   };
 }
 
+// If the scale options declare an interval, applies it to the values V.
+export function maybeApplyInterval(V, scale) {
+  const t = maybeIntervalTransform(scale?.interval, scale?.type);
+  return t ? map(V, t) : V;
+}
+
+// Returns the equivalent scale transform for the specified interval option.
+export function maybeIntervalTransform(interval, type) {
+  const i = maybeInterval(interval, type);
+  return i && ((v) => (defined(v) ? i.floor(v) : v));
+}
+
 // If interval is not nullish, converts interval shorthand such as a number (for
 // multiples) or a time interval name (such as “day”) to a {floor, offset,
 // range} object similar to a D3 time interval.

src/plot.js

@@ -7,7 +7,7 @@ import {createLegends, exposeLegends} from "./legends.js";
 import {Mark} from "./mark.js";
 import {axisFx, axisFy, axisX, axisY, gridFx, gridFy, gridX, gridY} from "./marks/axis.js";
 import {frame} from "./marks/frame.js";
-import {arrayify, isColor, isIterable, isNone, isScaleOptions, map, yes, maybeInterval} from "./options.js";
+import {arrayify, isColor, isIterable, isNone, isScaleOptions, map, yes, maybeIntervalTransform} from "./options.js";
 import {createScales, createScaleFunctions, autoScaleRange, exposeScales} from "./scales.js";
 import {innerDimensions, outerDimensions} from "./scales.js";
 import {position, registry as scaleRegistry} from "./scales/index.js";
@@ -363,7 +363,7 @@ function applyScaleTransform(channel, options) {
     type,
     percent,
     interval,
-    transform = percent ? (x) => x * 100 : maybeInterval(interval, type)?.floor
+    transform = percent ? (x) => x * 100 : maybeIntervalTransform(interval, type)
   } = options[scale] ?? {};
   if (transform != null) channel.value = map(channel.value, transform);
 }

src/transforms/bin.js

@@ -40,6 +40,7 @@ import {
   reduceIdentity
 } from "./group.js";
 import {maybeInsetX, maybeInsetY} from "./inset.js";
+import {maybeApplyInterval} from "../options.js";
 
 export function binX(outputs = {y: "count"}, options = {}) {
   // Group on {z, fill, stroke}, then optionally on y, then bin x.
@@ -143,8 +144,8 @@ function binn(
     ...("z" in inputs && {z: GZ || z}),
     ...("fill" in inputs && {fill: GF || fill}),
     ...("stroke" in inputs && {stroke: GS || stroke}),
-    ...basic(options, (data, facets) => {
-      const K = valueof(data, k);
+    ...basic(options, (data, facets, plotOptions) => {
+      const K = maybeApplyInterval(valueof(data, k), plotOptions?.[gk]);
       const Z = valueof(data, z);
       const F = valueof(data, vfill);
       const S = valueof(data, vstroke);

src/transforms/group.js

@@ -22,11 +22,10 @@ import {
   isObject,
   isTemporal,
   labelof,
-  map,
+  maybeApplyInterval,
   maybeColorChannel,
   maybeColumn,
   maybeInput,
-  maybeInterval,
   maybeTuple,
   percentile,
   range,
@@ -159,11 +158,6 @@ function groupn(
   };
 }
 
-function maybeApplyInterval(V, scale) {
-  const i = maybeInterval(scale?.interval, scale?.type);
-  return i ? map(V, (v) => i.floor(v)) : V;
-}
-
 export function hasOutput(outputs, ...names) {
   for (const {name} of outputs) {
     if (names.includes(name)) {

src/transforms/stack.js

@@ -2,46 +2,47 @@ import {InternMap, cumsum, group, groupSort, greatest, max, min, rollup, sum} fr
 import {ascendingDefined} from "../defined.js";
 import {field, column, maybeColumn, maybeZ, mid, range, valueof, maybeZero, one} from "../options.js";
 import {basic} from "./basic.js";
+import {maybeApplyInterval} from "../options.js";
 
-export function stackX(stack = {}, options = {}) {
-  if (arguments.length === 1) [stack, options] = mergeOptions(stack);
+export function stackX(stackOptions = {}, options = {}) {
+  if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {y1, y = y1, x, ...rest} = options; // note: consumes x!
-  const [transform, Y, x1, x2] = stackAlias(y, x, "x", stack, rest);
+  const [transform, Y, x1, x2] = stack(y, x, "y", "x", stackOptions, rest);
   return {...transform, y1, y: Y, x1, x2, x: mid(x1, x2)};
 }
 
-export function stackX1(stack = {}, options = {}) {
-  if (arguments.length === 1) [stack, options] = mergeOptions(stack);
+export function stackX1(stackOptions = {}, options = {}) {
+  if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {y1, y = y1, x} = options;
-  const [transform, Y, X] = stackAlias(y, x, "x", stack, options);
+  const [transform, Y, X] = stack(y, x, "x", "y", stackOptions, options);
   return {...transform, y1, y: Y, x: X};
 }
 
-export function stackX2(stack = {}, options = {}) {
-  if (arguments.length === 1) [stack, options] = mergeOptions(stack);
+export function stackX2(stackOptions = {}, options = {}) {
+  if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {y1, y = y1, x} = options;
-  const [transform, Y, , X] = stackAlias(y, x, "x", stack, options);
+  const [transform, Y, , X] = stack(y, x, "y", "x", stackOptions, options);
   return {...transform, y1, y: Y, x: X};
 }
 
-export function stackY(stack = {}, options = {}) {
-  if (arguments.length === 1) [stack, options] = mergeOptions(stack);
+export function stackY(stackOptions = {}, options = {}) {
+  if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {x1, x = x1, y, ...rest} = options; // note: consumes y!
-  const [transform, X, y1, y2] = stackAlias(x, y, "y", stack, rest);
+  const [transform, X, y1, y2] = stack(x, y, "x", "y", stackOptions, rest);
   return {...transform, x1, x: X, y1, y2, y: mid(y1, y2)};
 }
 
-export function stackY1(stack = {}, options = {}) {
-  if (arguments.length === 1) [stack, options] = mergeOptions(stack);
+export function stackY1(stackOptions = {}, options = {}) {
+  if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {x1, x = x1, y} = options;
-  const [transform, X, Y] = stackAlias(x, y, "y", stack, options);
+  const [transform, X, Y] = stack(x, y, "x", "y", stackOptions, options);
   return {...transform, x1, x: X, y: Y};
 }
 
-export function stackY2(stack = {}, options = {}) {
-  if (arguments.length === 1) [stack, options] = mergeOptions(stack);
+export function stackY2(stackOptions = {}, options = {}) {
+  if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {x1, x = x1, y} = options;
-  const [transform, X, , Y] = stackAlias(x, y, "y", stack, options);
+  const [transform, X, , Y] = stack(x, y, "x", "y", stackOptions, options);
   return {...transform, x1, x: X, y: Y};
 }
 
@@ -65,16 +66,16 @@ function mergeOptions(options) {
   return [{offset, order, reverse}, rest];
 }
 
-function stack(x, y = one, ky, {offset, order, reverse}, options) {
+function stack(x, y = one, kx, ky, {offset, order, reverse}, options) {
   const z = maybeZ(options);
   const [X, setX] = maybeColumn(x);
   const [Y1, setY1] = column(y);
   const [Y2, setY2] = column(y);
   offset = maybeOffset(offset);
   order = maybeOrder(order, offset, ky);
   return [
-    basic(options, (data, facets) => {
-      const X = x == null ? undefined : setX(valueof(data, x));
+    basic(options, (data, facets, plotOptions) => {
+      const X = x == null ? undefined : setX(maybeApplyInterval(valueof(data, x), plotOptions?.[kx]));
       const Y = valueof(data, y, Float64Array);
       const Z = valueof(data, z);
       const O = order && order(data, X, Y, Z);
@@ -107,9 +108,6 @@ function stack(x, y = one, ky, {offset, order, reverse}, options) {
   ];
 }
 
-// This is used internally so we can use `stack` as an argument name.
-const stackAlias = stack;
-
 function maybeOffset(offset) {
   if (offset == null) return;
   if (typeof offset === "function") return offset;