@uwdata/mosaic-plot 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -10,7 +10,7 @@
     "mosaic"
   ],
   "license": "BSD-3-Clause",
-  "author": "Jeffrey Heer (http://idl.cs.washington.edu)",
+  "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -24,15 +24,15 @@
     "prebuild": "rimraf dist && mkdir dist",
     "build": "node ../../esbuild.js mosaic-plot",
     "lint": "eslint src test",
-    "test": "mocha 'test/**/*-test.js'",
+    "test": "vitest run",
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.14",
-    "@uwdata/mosaic-core": "^0.9.0",
-    "@uwdata/mosaic-sql": "^0.9.0",
+    "@observablehq/plot": "^0.6.16",
+    "@uwdata/mosaic-core": "^0.11.0",
+    "@uwdata/mosaic-sql": "^0.11.0",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "89bb9b0dfa747aed691eaeba35379525a6764c61"
+  "gitHead": "861d616f39926a1d2aee83b59dbdd70b0b3caf12"
 }

package/src/interactors/Highlight.js

@@ -99,6 +99,6 @@ async function predicateFunction(mark, selection) {
   const data = await mark.coordinator.query(q);
   const v = data.getChild?.('__');
   return !(data.numRows || data.length) ? (() => false)
-    : v ? (i => v.get(i))
+    : v ? (i => v.at(i))
     : (i => data[i].__);
 }

package/src/interactors/Interval1D.js

@@ -1,4 +1,4 @@
-import { interval } from '@uwdata/mosaic-core';
+import { clauseInterval } from '@uwdata/mosaic-core';
 import { ascending, min, max, select } from 'd3';
 import { brushX, brushY } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
@@ -52,7 +52,7 @@ export class Interval1D {
 
   clause(value) {
     const { mark, pixelSize, field, scale } = this;
-    return interval(field, value, {
+    return clauseInterval(field, value, {
       source: this,
       clients: this.peers ? mark.plot.markSet : new Set().add(mark),
       scale,

package/src/interactors/Interval2D.js

@@ -1,4 +1,4 @@
-import { intervals } from '@uwdata/mosaic-core';
+import { clauseIntervals } from '@uwdata/mosaic-core';
 import { ascending, min, max, select } from 'd3';
 import { brush } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
@@ -55,7 +55,7 @@ export class Interval2D {
 
   clause(value) {
     const { mark, pixelSize, xfield, yfield, xscale, yscale } = this;
-    return intervals([xfield, yfield], value, {
+    return clauseIntervals([xfield, yfield], value, {
       source: this,
       clients: this.peers ? mark.plot.markSet : new Set().add(mark),
       scales: [xscale, yscale],

package/src/interactors/Nearest.js

@@ -1,4 +1,4 @@
-import { isSelection, points } from '@uwdata/mosaic-core';
+import { clausePoint, clausePoints, isSelection } from '@uwdata/mosaic-core';
 import { select, pointer } from 'd3';
 import { getField } from './util/get-field.js';
 
@@ -24,7 +24,12 @@ export class Nearest {
 
   clause(value) {
     const { clients, fields } = this;
-    return points(fields, value ? [value] : value, { source: this, clients });
+    const opt = { source: this, clients };
+    // if only one field, use a simpler clause that passes the value
+    // this allows a single field selection value to act like a param
+    return fields.length > 1
+      ? clausePoints(fields, value ? [value] : value, opt)
+      : clausePoint(fields[0], value?.[0], opt);
   }
 
   init(svg) {
@@ -53,11 +58,10 @@ export class Nearest {
       if (i !== this.valueIndex) {
         this.valueIndex = i;
         const v = i < 0 ? undefined : keys.map(k => columns[k][i]);
-        if (param) {
-          if (i > -1) selection.update(v.length > 1 ? v : v[0]);
-        } else {
-          selection.update(that.clause(v));
-        }
+        selection.update(
+          // provide value for param, clause for selection
+          param ? (!v || v.length > 1 ? v : v[0]) : that.clause(v)
+        );
       }
     });
 

package/src/interactors/PanZoom.js

@@ -1,4 +1,4 @@
-import { interval, Selection } from '@uwdata/mosaic-core';
+import { Selection, clauseInterval } from '@uwdata/mosaic-core';
 import { select, zoom, ZoomTransform } from 'd3';
 import { getField } from './util/get-field.js';
 
@@ -48,7 +48,7 @@ export class PanZoom {
   }
 
   clause(value, field, scale) {
-    return interval(field, value, {
+    return clauseInterval(field, value, {
       source: this,
       clients: this.mark.plot.markSet,
       scale

package/src/interactors/Toggle.js

@@ -1,4 +1,4 @@
-import { points } from '@uwdata/mosaic-core';
+import { clausePoints } from '@uwdata/mosaic-core';
 
 export class Toggle {
   /**
@@ -35,7 +35,7 @@ export class Toggle {
 
   clause(value) {
     const { fields, mark } = this;
-    return points(fields, value, {
+    return clausePoints(fields, value, {
       source: this,
       clients: this.peers ? mark.plot.markSet : new Set().add(mark)
     });

package/src/legend.js

@@ -10,7 +10,7 @@ export class Legend {
   constructor(channel, options) {
     const { as, field, ...rest } = options;
     this.channel = channel;
-    this.options = { label: null, ...rest };
+    this.options = rest;
     this.type = null;
     this.handler = null;
     this.selection = as;
@@ -51,10 +51,15 @@ export class Legend {
 }
 
 function createLegend(legend, svg) {
-  const { channel, options, selection } = legend;
+  const { channel, plot, selection } = legend;
   const scale = svg.scale(channel);
   const type = scale.type === 'ordinal' ? SWATCH : RAMP;
 
+  const options = {
+    label: plot.getAttribute(`${channel}Label`) ?? null,
+    ...legend.options
+  };
+
   // labels for swatch legends are not yet supported by Plot
   // track here: https://github.com/observablehq/plot/issues/834
   // for consistent layout, adjust sizing when there is no label

package/src/marks/ConnectedMark.js

@@ -45,7 +45,7 @@ export class ConnectedMark extends Mark {
 
 /**
  * M4 is an optimization for value-preserving time-series aggregation
- * (http://www.vldb.org/pvldb/vol7/p797-jugel.pdf). This implementation uses
+ * (https://www.vldb.org/pvldb/vol7/p797-jugel.pdf). This implementation uses
  * an efficient version with a single scan and the aggregate function
  * argmin and argmax, following https://arxiv.org/pdf/2306.03714.pdf.
  */

package/src/marks/Density1DMark.js

@@ -1,3 +1,4 @@
+import { toDataColumns } from '@uwdata/mosaic-core';
 import { Query, gt, isBetween, sql, sum } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
@@ -6,7 +7,6 @@ import { extentX, extentY, xext, yext } from './util/extent.js';
 import { grid1d } from './util/grid.js';
 import { handleParam } from './util/handle-param.js';
 import { Mark, channelOption, markQuery } from './Mark.js';
-import { toDataColumns } from './util/to-data-columns.js';
 
 export class Density1DMark extends Mark {
   constructor(type, source, options) {

package/src/marks/ErrorBarMark.js

@@ -1,8 +1,8 @@
+import { toDataColumns } from '@uwdata/mosaic-core';
 import { avg, count, stddev } from '@uwdata/mosaic-sql';
 import { erfinv } from './util/stats.js';
 import { Mark, markPlotSpec, markQuery } from './Mark.js';
 import { handleParam } from './util/handle-param.js';
-import { toDataColumns } from './util/to-data-columns.js';
 
 export class ErrorBarMark extends Mark {
   constructor(type, source, options) {

package/src/marks/Grid2DMark.js

@@ -1,4 +1,5 @@
 import { interpolatorBarycentric, interpolateNearest, interpolatorRandomWalk } from '@observablehq/plot';
+import { toDataColumns } from '@uwdata/mosaic-core';
 import { Query, count, isBetween, lt, lte, neq, sql, sum } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
@@ -6,7 +7,6 @@ import { dericheConfig, dericheConv2d } from './util/density.js';
 import { extentX, extentY, xyext } from './util/extent.js';
 import { grid2d } from './util/grid.js';
 import { handleParam } from './util/handle-param.js';
-import { toDataColumns } from './util/to-data-columns.js';
 import { Mark } from './Mark.js';
 
 export const DENSITY = 'density';

package/src/marks/HexbinMark.js

@@ -25,72 +25,62 @@ export class HexbinMark extends Mark {
     if (this.hasOwnData()) return null;
     const { plot, binWidth, channels, source } = this;
 
-    // get x / y extents, may update plot domainX / domainY
-    const [x1, x2] = extentX(this, filter);
-    const [y1, y2] = extentY(this, filter);
-
-    // Adjust screen-space coordinates by top/left
-    // margins as this is what Observable Plot does.
-    // TODO use zero margins when faceted?
-    const ox = 0.5 - plot.getAttribute('marginLeft');
-    const oy = 0 - plot.getAttribute('marginTop');
-    const dx = `${binWidth}::DOUBLE`;
-    const dy = `${binWidth * (1.5 / Math.sqrt(3))}::DOUBLE`;
-    const xr = `${plot.innerWidth() / (x2 - x1)}::DOUBLE`;
-    const yr = `${plot.innerHeight() / (y2 - y1)}::DOUBLE`;
-
     // Extract channel information, update top-level query
     // and extract dependent columns for aggregates
     let x, y;
-    const aggr = new Set;
+    const dims = new Set;
     const cols = {};
-    let orderby;
     for (const c of channels) {
       if (c.channel === 'orderby') {
-        orderby = c.value; // TODO revisit once groupby is added
+        // ignore ordering, as we will aggregate
       } else if (c.channel === 'x') {
         x = c;
       } else if (c.channel === 'y') {
         y = c;
       } else if (Object.hasOwn(c, 'field')) {
-        cols[c.as] = c.field;
-        if (c.field.aggregate) {
-          c.field.columns.forEach(col => aggr.add(col));
+        const { as, field } = c;
+        cols[as] = field;
+        if (!field.aggregate) {
+          dims.add(as);
         }
       }
     }
 
-    // Top-level query; we add a hex binning subquery below
-    // Maps binned screen space coordinates back to data
-    // values to ensure we get correct data-driven scales
-    const q = Query.select({
-      [x.as]: sql`${x1}::DOUBLE + ((x + 0.5 * (y & 1)) * ${dx} + ${ox})::DOUBLE / ${xr}`,
-      [y.as]: sql`${y2}::DOUBLE - (y * ${dy} + ${oy})::DOUBLE / ${yr}`,
-      ...cols
-    }).groupby('x', 'y');
-
-    if (orderby) q.orderby(orderby);
+    // get x / y extents, may update plot xDomain / yDomain
+    const [x1, x2] = extentX(this, filter);
+    const [y1, y2] = extentY(this, filter);
 
-    // Map x/y channels to screen space
-    const xx = `${xr} * (${x.field} - ${x1}::DOUBLE)`;
-    const yy = `${yr} * (${y2}::DOUBLE - ${y.field})`;
+    // Adjust screen-space coordinates by top/left
+    // margins as this is what Observable Plot does.
+    const ox = 0.5 - plot.getAttribute('marginLeft');
+    const oy = 0 - plot.getAttribute('marginTop');
+    const dx = `${binWidth}::DOUBLE`;
+    const dy = `${binWidth * (1.5 / Math.sqrt(3))}::DOUBLE`;
+    const xr = `${plot.innerWidth() / (x2 - x1)}::DOUBLE`;
+    const yr = `${plot.innerHeight() / (y2 - y1)}::DOUBLE`;
 
-    // Perform hex binning of x/y coordinates
-    // TODO add groupby dims
-    const hex = Query
-      .select({
-        py: sql`(${yy} - ${oy}) / ${dy}`,
-        pj: sql`ROUND(py)::INTEGER`,
-        px: sql`(${xx} - ${ox}) / ${dx} - 0.5 * (pj & 1)`,
-        pi: sql`ROUND(px)::INTEGER`,
-        tt: sql`ABS(py-pj) * 3 > 1 AND (px-pi)**2 + (py-pj)**2 > (px - pi - 0.5 * CASE WHEN px < pi THEN -1 ELSE 1 END)**2 + (py - pj - CASE WHEN py < pj THEN -1 ELSE 1 END)**2`,
-        x: sql`CASE WHEN tt THEN (pi + (CASE WHEN px < pi THEN -0.5 ELSE 0.5 END) + (CASE WHEN pj & 1 <> 0 THEN 0.5 ELSE -0.5 END))::INTEGER ELSE pi END`,
-        y: sql`CASE WHEN tt THEN (pj + CASE WHEN py < pj THEN -1 ELSE 1 END)::INTEGER ELSE pj END`
+    // Top-level query maps from screen space back to data values.
+    // Doing so ensures that Plot generates correct data-driven scales.
+    return Query.select({
+        [x.as]: sql`${x1}::DOUBLE + ((_x + 0.5 * (_y & 1)) * ${dx} + ${ox})::DOUBLE / ${xr}`,
+        [y.as]: sql`${y2}::DOUBLE - (_y * ${dy} + ${oy})::DOUBLE / ${yr}`,
+        ...cols
       })
-      .select(Array.from(aggr))
-      .from(source.table)
-      .where(isNotNull(x.field), isNotNull(y.field), filter)
-
-    return q.from(hex);
+      .groupby('_x', '_y', ...dims)
+      .from(
+        // Subquery performs hex binning in screen space and also passes
+        // original columns through (the DB should optimize this).
+        Query.select({
+            _py: sql`(${yr} * (${y2}::DOUBLE - ${y.field}) - ${oy}) / ${dy}`,
+            _pj: sql`ROUND(_py)::INTEGER`,
+            _px: sql`(${xr} * (${x.field} - ${x1}::DOUBLE) - ${ox}) / ${dx} - 0.5 * (_pj & 1)`,
+            _pi: sql`ROUND(_px)::INTEGER`,
+            _tt: sql`ABS(_py-_pj) * 3 > 1 AND (_px-_pi)**2 + (_py-_pj)**2 > (_px - _pi - 0.5 * CASE WHEN _px < _pi THEN -1 ELSE 1 END)**2 + (_py - _pj - CASE WHEN _py < _pj THEN -1 ELSE 1 END)**2`,
+            _x: sql`CASE WHEN _tt THEN (_pi + (CASE WHEN _px < _pi THEN -0.5 ELSE 0.5 END) + (CASE WHEN _pj & 1 <> 0 THEN 0.5 ELSE -0.5 END))::INTEGER ELSE _pi END`,
+            _y: sql`CASE WHEN _tt THEN (_pj + CASE WHEN _py < _pj THEN -1 ELSE 1 END)::INTEGER ELSE _pj END`
+          }, '*')
+          .from(source.table)
+          .where(isNotNull(x.field), isNotNull(y.field), filter)
+      );
   }
 }

package/src/marks/Mark.js

@@ -1,9 +1,8 @@
-import { MosaicClient } from '@uwdata/mosaic-core';
+import { MosaicClient, toDataColumns } from '@uwdata/mosaic-core';
 import { Query, Ref, column, isParamLike } from '@uwdata/mosaic-sql';
 import { isColor } from './util/is-color.js';
 import { isConstantOption } from './util/is-constant-option.js';
 import { isSymbol } from './util/is-symbol.js';
-import { toDataColumns } from './util/to-data-columns.js';
 import { Transform } from '../symbols.js';
 
 const isColorChannel = channel => channel === 'stroke' || channel === 'fill';

package/src/marks/RegressionMark.js

@@ -1,4 +1,5 @@
 import { range } from 'd3';
+import { toDataColumns } from '@uwdata/mosaic-core';
 import {
   Query, max, min, castDouble, isNotNull,
   regrIntercept, regrSlope, regrCount,
@@ -7,7 +8,6 @@ import {
 import { qt } from './util/stats.js';
 import { Mark, channelOption } from './Mark.js';
 import { handleParam } from './util/handle-param.js';
-import { toDataColumns } from './util/to-data-columns.js';
 
 export class RegressionMark extends Mark {
   constructor(source, options) {
@@ -118,7 +118,7 @@ function concat(a, b) {
 
 function linePoints(fit) {
   // eslint-disable-next-line no-unused-vars
-  const { x0, x1, xm, intercept, slope, n, ssx, ssy, ...rest } = fit.columns;
+  const { x0 = [], x1 = [], xm, intercept, slope, n, ssx, ssy, ...rest } = fit.columns;
   const predict = (x, i) => intercept[i] + x * slope[i];
   const x = concat(x0, x1);
   const y = concat(x0.map(predict), x1.map(predict));

package/src/marks/util/stats.js

@@ -172,7 +172,7 @@ export function qt(p, dof) {
 export function erfinv(x) {
   // Implementation from "Approximating the erfinv function" by Mike Giles,
   // GPU Computing Gems, volume 2, 2010.
-  // Ported from Apache Commons Math, http://www.apache.org/licenses/LICENSE-2.0
+  // Ported from Apache Commons Math, https://www.apache.org/licenses/LICENSE-2.0
 
   // beware that the logarithm argument must be
   // computed as (1.0 - x) * (1.0 + x),

package/src/plot-attributes.js

@@ -182,6 +182,7 @@ export const attributeMap = new Map([
   ['rRange', 'r.range'],
   ['rClamp', 'r.clamp'],
   ['rNice', 'r.nice'],
+  ['rLabel', 'r.label'],
   ['rPercent', 'r.percent'],
   ['rZero', 'r.zero'],
   ['rBase', 'r.base'],

package/src/plot.js

@@ -42,8 +42,9 @@ export class Plot {
   innerHeight(defaultValue = 400) {
     const { top, bottom } = this.margins();
     let h = this.getAttribute('height');
-    if (h == null && defaultValue != null) {
-      h = defaultValue; // TODO could apply more nuanced logic here
+    if (h == null) {
+      // TODO could apply more nuanced logic here?
+      h = maybeAspectRatio(this, top, bottom) || defaultValue;
       this.setAttribute('height', h, { silent: true });
     }
     return h - top - bottom;
@@ -131,7 +132,7 @@ export class Plot {
         params.set(param, [mark]);
         param.addEventListener('value', () => {
           return Promise.allSettled(
-            params.get(param).map(mark => mark.requestQuery())
+            params.get(param).map(mark => mark.initialize())
           );
         });
       }
@@ -159,3 +160,14 @@ export class Plot {
     this.legends.push({ legend, include });
   }
 }
+
+function maybeAspectRatio(plot, top, bottom) {
+  const ar = plot.getAttribute('aspectRatio');
+  if (ar == null) return;
+  const x = plot.getAttribute('xDomain');
+  const y = plot.getAttribute('yDomain');
+  if (!x || !y) return;
+  const dx = Math.abs(x[1] - x[0]);
+  const dy = Math.abs(y[1] - y[0]);
+  return dy * plot.innerWidth() / (ar * dx) + top + bottom;
+}

package/src/transforms/bin-step.js

@@ -0,0 +1,43 @@
+export function binStep(span, steps, minstep = 0, logb = Math.LN10) {
+  let v;
+
+  const level = Math.ceil(Math.log(steps) / logb);
+  let step = Math.max(
+    minstep,
+    Math.pow(10, Math.round(Math.log(span) / logb) - level)
+  );
+
+  // increase step size if too many bins
+  while (Math.ceil(span / step) > steps) { step *= 10; }
+
+  // decrease step size if allowed
+  const div = [5, 2];
+  for (let i = 0, n = div.length; i < n; ++i) {
+    v = step / div[i];
+    if (v >= minstep && span / v <= steps) step = v;
+  }
+
+  return step;
+}
+
+export function bins(min, max, options) {
+  let { step, steps, minstep = 0, nice = true } = options;
+
+  if (nice !== false) {
+    // use span to determine step size
+    const span = max - min;
+    const logb = Math.LN10;
+    step = step || binStep(span, steps || 25, minstep, logb);
+
+    // adjust min/max relative to step
+    let v = Math.log(step);
+    const precision = v >= 0 ? 0 : ~~(-v / logb) + 1;
+    const eps = Math.pow(10, -precision - 1);
+    v = Math.floor(min / step + eps) * step;
+    min = min < v ? v - step : v;
+    max = Math.ceil(max / step) * step;
+    steps = Math.round((max - min) / step);
+  }
+
+  return { min, max, steps };
+}

package/src/transforms/bin.js

@@ -1,13 +1,20 @@
+import { dateBin } from '@uwdata/mosaic-sql';
 import { Transform } from '../symbols.js';
 import { channelScale } from '../marks/util/channel-scale.js';
+import { bins } from './bin-step.js';
+import { timeInterval } from './time-interval.js';
 
 const EXTENT = new Set([
   'rectY-x', 'rectX-y', 'rect-x', 'rect-y', 'ruleY-x', 'ruleX-y'
 ]);
 
-export function bin(field, options = { steps: 25 }) {
+export function hasExtent(mark, channel) {
+  return EXTENT.has(`${mark.type}-${channel}`);
+}
+
+export function bin(field, options = {}) {
   const fn = (mark, channel) => {
-    if (EXTENT.has(`${mark.type}-${channel}`)) {
+    if (hasExtent(mark, channel)) {
       return {
         [`${channel}1`]: binField(mark, channel, field, options),
         [`${channel}2`]: binField(mark, channel, field, { ...options, offset: 1 })
@@ -26,56 +33,39 @@ function binField(mark, channel, column, options) {
   return {
     column,
     label: column,
-    get stats() { return { column, stats: ['min', 'max'] }; },
     get columns() { return [column]; },
     get basis() { return column; },
+    get stats() { return { column, stats: ['min', 'max'] }; },
     toString() {
-      const { apply, sqlApply, sqlInvert } = channelScale(mark, channel);
-      const { min, max } = mark.channelField(channel);
-      const b = bins(apply(min), apply(max), options);
-      const col = sqlApply(column);
-      const base = b.min === 0 ? col : `(${col} - ${b.min})`;
-      const alpha = `${(b.max - b.min) / b.steps}::DOUBLE`;
-      const off = options.offset ? `${options.offset} + ` : '';
-      const expr = `${b.min} + ${alpha} * (${off}FLOOR(${base} / ${alpha}))`;
-      return `${sqlInvert(expr)}`;
+      const { type, min, max } = mark.channelField(channel);
+      const { interval: i, steps, offset = 0 } = options;
+      const interval = i ?? (
+        type === 'date' || hasTimeScale(mark, channel) ? 'date' : 'number'
+      );
+
+      if (interval === 'number') {
+        // perform number binning
+        const { apply, sqlApply, sqlInvert } = channelScale(mark, channel);
+        const b = bins(apply(min), apply(max), options);
+        const col = sqlApply(column);
+        const base = b.min === 0 ? col : `(${col} - ${b.min})`;
+        const alpha = `${(b.max - b.min) / b.steps}::DOUBLE`;
+        const off = offset ? `${offset} + ` : '';
+        const expr = `${b.min} + ${alpha} * (${off}FLOOR(${base} / ${alpha}))`;
+        return `${sqlInvert(expr)}`;
+      } else {
+        // perform date/time binning
+        const { interval: unit, step = 1 } = interval === 'date'
+          ? timeInterval(min, max, steps || 40)
+          : options;
+        const off = offset ? ` + INTERVAL ${offset * step} ${unit}` : '';
+        return `(${dateBin(column, unit, step)}${off})`;
+      }
     }
   };
 }
 
-export function bins(min, max, options) {
-  let { steps = 25, minstep = 0, nice = true } = options;
-
-  if (nice !== false) {
-    // use span to determine step size
-    const span = max - min;
-    const maxb = steps;
-    const logb = Math.LN10;
-    const level = Math.ceil(Math.log(maxb) / logb);
-    let step = Math.max(
-      minstep,
-      Math.pow(10, Math.round(Math.log(span) / logb) - level)
-    );
-
-    // increase step size if too many bins
-    while (Math.ceil(span / step) > maxb) { step *= 10; }
-
-    // decrease step size if allowed
-    const div = [5, 2];
-    let v;
-    for (let i = 0, n = div.length; i < n; ++i) {
-      v = step / div[i];
-      if (v >= minstep && span / v <= maxb) step = v;
-    }
-
-    v = Math.log(step);
-    const precision = v >= 0 ? 0 : ~~(-v / logb) + 1;
-    const eps = Math.pow(10, -precision - 1);
-    v = Math.floor(min / step + eps) * step;
-    min = min < v ? v - step : v;
-    max = Math.ceil(max / step) * step;
-    steps = Math.round((max - min) / step);
-  }
-
-  return { min, max, steps };
+function hasTimeScale(mark, channel) {
+  const scale = mark.plot.getAttribute(`${channel}Scale`);
+  return scale === 'utc' || scale === 'time';
 }

package/src/transforms/time-interval.js

@@ -0,0 +1,53 @@
+import { bisector } from 'd3';
+import { binStep } from './bin-step.js';
+
+const YEAR = 'year';
+const MONTH = 'month';
+const DAY = 'day';
+const HOUR = 'hour';
+const MINUTE = 'minute';
+const SECOND = 'second';
+const MILLISECOND = 'millisecond';
+
+const durationSecond = 1000;
+const durationMinute = durationSecond * 60;
+const durationHour = durationMinute * 60;
+const durationDay = durationHour * 24;
+const durationWeek = durationDay * 7;
+const durationMonth = durationDay * 30;
+const durationYear = durationDay * 365;
+
+/** @type {[string, number, number][]} */
+const intervals = [
+  [SECOND,  1,      durationSecond],
+  [SECOND,  5,  5 * durationSecond],
+  [SECOND, 15, 15 * durationSecond],
+  [SECOND, 30, 30 * durationSecond],
+  [MINUTE,  1,      durationMinute],
+  [MINUTE,  5,  5 * durationMinute],
+  [MINUTE, 15, 15 * durationMinute],
+  [MINUTE, 30, 30 * durationMinute],
+  [  HOUR,  1,      durationHour  ],
+  [  HOUR,  3,  3 * durationHour  ],
+  [  HOUR,  6,  6 * durationHour  ],
+  [  HOUR, 12, 12 * durationHour  ],
+  [   DAY,  1,      durationDay   ],
+  [   DAY,  7,      durationWeek  ],
+  [ MONTH,  1,      durationMonth ],
+  [ MONTH,  3,  3 * durationMonth ],
+  [  YEAR,  1,      durationYear  ]
+];
+
+export function timeInterval(min, max, steps) {
+  const span = max - min;
+  const target = span / steps;
+  let i = bisector(i => i[2]).right(intervals, target);
+  if (i === intervals.length) {
+    return { interval: YEAR, step: binStep(span / durationYear, steps) };
+  } else if (i) {
+    i = intervals[target / intervals[i - 1][2] < intervals[i][2] / target ? i - 1 : i];
+    return { interval: i[0], step: i[1] };
+  } else {
+    return { interval: MILLISECOND, step: binStep(span, steps, 1) };
+  }
+}