interval for rect

Author: mbostock

src/marks/rect.js

@@ -3,6 +3,7 @@ import {filter} from "../defined.js";
 import {Mark, number} from "../mark.js";
 import {isCollapsed} from "../scales.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr, applyChannelStyles} from "../style.js";
+import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 const defaults = {};
@@ -64,13 +65,13 @@ export class Rect extends Mark {
 }
 
 export function rect(data, options) {
-  return new Rect(data, options);
+  return new Rect(data, maybeIntervalX(maybeIntervalY(options)));
 }
 
 export function rectX(data, options) {
-  return new Rect(data, maybeStackX(options));
+  return new Rect(data, maybeStackX(maybeIntervalY(options)));
 }
 
 export function rectY(data, options) {
-  return new Rect(data, maybeStackY(options));
+  return new Rect(data, maybeStackY(maybeIntervalX(options)));
 }

src/transforms/interval.js

@@ -0,0 +1,41 @@
+import {labelof, maybeValue, valueof} from "../mark.js";
+
+// TODO Allow the interval to be specified as a string, e.g. “day” or “hour”?
+// This will require the interval knowing the type of the associated scale to
+// chose between UTC and local time (or better, an explicit timeZone option).
+function maybeInterval(interval) {
+  if (interval == null) return;
+  if (typeof interval.floor !== "function" || typeof interval.offset !== "function") throw new Error("invalid interval");
+  return interval;
+}
+
+// The interval may be specified either as x: {value, interval} or as {x,
+// interval}. The former is used, for example, for Plot.rect.
+function maybeIntervalValue(value, {interval} = {}) {
+  (value = {...maybeValue(value)});
+  value.interval = maybeInterval(value.interval === undefined ? interval : value.interval);
+  return value;
+}
+
+function maybeIntervalK(k, options = {}) {
+  const {[k]: v, [`${k}1`]: v1, [`${k}2`]: v2} = options;
+  const {value, interval} = maybeIntervalValue(v, options);
+  if (interval == null) return options;
+  let V1;
+  const tv1 = data => V1 || (V1 = valueof(data, value).map(v => interval.floor(v)));
+  const label = labelof(v);
+  return {
+    ...options,
+    [k]: undefined,
+    [`${k}1`]: v1 === undefined ? {transform: tv1, label} : v1,
+    [`${k}2`]: v2 === undefined ? {transform: () => tv1().map(v => interval.offset(v)), label} : v2
+  };
+}
+
+export function maybeIntervalX(options) {
+  return maybeIntervalK("x", options);
+}
+
+export function maybeIntervalY(options = {}) {
+  return maybeIntervalK("y", options);
+}

test/output/aaplCloseRect.svg

@@ -0,0 +1,15 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const AAPL = (await d3.csv("data/aapl.csv", d3.autoType)).slice(-90);
+  return Plot.plot({
+    y: {
+      grid: true
+    },
+    marks: [
+      Plot.rectY(AAPL, {x: "Date", interval: d3.utcDay, y: "Close"}),
+      Plot.ruleY([0])
+    ]
+  });
+}

test/plots/aapl-close-rect.js

@@ -1,6 +1,7 @@
 export {default as aaplCandlestick} from "./aapl-candlestick.js";
 export {default as aaplChangeVolume} from "./aapl-change-volume.js";
 export {default as aaplClose} from "./aapl-close.js";
+export {default as aaplCloseRect} from "./aapl-close-rect.js";
 export {default as aaplCloseUntyped} from "./aapl-close-untyped.js";
 export {default as aaplMonthly} from "./aapl-monthly.js";
 export {default as aaplVolume} from "./aapl-volume.js";