time intervals coerce isostrings

src/options.js

@@ -490,3 +490,11 @@ export function named(things) {
 export function maybeNamed(things) {
   return isIterable(things) ? named(things) : things;
 }
+
+export function isTimeInterval(t) {
+  return isInterval(t) && typeof t === "function" && t() instanceof Date;
+}
+
+export function isInterval(t) {
+  return typeof t?.range === "function";
+}

src/plot.js

@@ -7,7 +7,18 @@ 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,
+  coerceDate,
+  isColor,
+  isIterable,
+  isNone,
+  isScaleOptions,
+  isTimeInterval,
+  map,
+  yes,
+  maybeInterval
+} 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";
@@ -358,12 +369,13 @@ function applyScaleTransforms(channels, options) {
 function applyScaleTransform(channel, options) {
   const {scale} = channel;
   if (scale == null) return;
-  const {
-    type,
-    percent,
-    interval,
-    transform = percent ? (x) => x * 100 : maybeInterval(interval, type)?.floor
-  } = options[scale] ?? {};
+  let {type, percent, interval, transform} = options[scale] ?? {};
+  if (transform === undefined) {
+    if (percent) return (channel.value = channel.value.map((x) => x * 100)), undefined;
+    const i = maybeInterval(interval, type);
+    if (isTimeInterval(i)) return (channel.value = channel.value.map((d) => i.floor(coerceDate(d)))), undefined;
+    transform = i?.floor;
+  }
   if (transform != null) channel.value = map(channel.value, transform);
 }
 

src/transforms/bin.js

@@ -13,6 +13,8 @@ import {
   identity,
   coerceDate,
   coerceNumbers,
+  isInterval,
+  isTimeInterval,
   maybeColumn,
   maybeRangeInterval,
   maybeTuple,
@@ -325,14 +327,6 @@ function isTimeThresholds(t) {
   return isTimeInterval(t) || (isIterable(t) && isTemporal(t));
 }
 
-function isTimeInterval(t) {
-  return isInterval(t) && typeof t === "function" && t() instanceof Date;
-}
-
-function isInterval(t) {
-  return typeof t?.range === "function";
-}
-
 function bing(EX, EY) {
   return EX && EY
     ? function* (I) {

src/transforms/interval.js

@@ -1,3 +1,4 @@
+import {coerceDate, isTimeInterval} from "../options.js";
 import {isTemporal, labelof, map, maybeInterval, maybeValue, valueof} from "../options.js";
 import {maybeInsetX, maybeInsetY} from "./inset.js";
 
@@ -28,7 +29,9 @@ function maybeIntervalK(k, maybeInsetK, options, trivial) {
   let D1, V1;
   function transform(data) {
     if (V1 !== undefined && data === D1) return V1; // memoize
-    return (V1 = map(valueof((D1 = data), value), (v) => interval.floor(v)));
+    let V = valueof((D1 = data), value);
+    if (isTimeInterval(interval)) V = map(V, coerceDate, Float64Array);
+    return (V1 = map(V, (v) => interval.floor(v)));
   }
   return maybeInsetK({
     ...options,

test/plots/date-intervals.ts

@@ -0,0 +1,28 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function dateIntervalWeekMonth() {
+  const data = await d3.csv("data/bls-industry-unemployment.csv");
+  return Plot.plot({
+    marginLeft: 80,
+    color: {type: "linear", scheme: "blues"},
+    marks: (
+      [
+        {label: "month", interval: "month"},
+        {label: "d3.utcMonth", interval: d3.utcMonth},
+        {label: "week", interval: "week"},
+        {label: "d3.utcWeek", interval: d3.utcWeek}
+      ] as const
+    ).map(({label, interval}) =>
+      Plot.barX(data, {
+        x: "date",
+        filter: (d) => d.industry === "Construction",
+        interval,
+        fill: "unemployed",
+        title: "unemployed",
+        inset: 0,
+        fy: () => label
+      })
+    )
+  });
+}

test/plots/downloads-ordinal.ts

@@ -20,3 +20,18 @@ export async function downloadsOrdinal() {
     ]
   });
 }
+
+export async function downloadsOrdinalIsostrings() {
+  const downloads = (await d3.csv<any>("data/downloads.csv")).filter((d) => /20(19|20)-0/.test(d.date));
+  return Plot.plot({
+    width: 960,
+    marginBottom: 50,
+    x: {
+      interval: "month",
+      tickRotate: -45,
+      tickFormat: "%b %Y",
+      label: null
+    },
+    marks: [Plot.barY(downloads, {x: "date", y: "downloads", fill: "#ccc", stroke: "currentColor", title: "date"})]
+  });
+}

test/plots/index.ts

@@ -56,6 +56,7 @@ export * from "./crimean-war-overlapped.js";
 export * from "./crimean-war-stacked.js";
 export * from "./d3-survey-2015-comfort.js";
 export * from "./d3-survey-2015-why.js";
+export * from "./date-intervals.js";
 export * from "./darker-dodge.js";
 export * from "./decathlon.js";
 export * from "./diamonds-boxplot.js";