@uwdata/mosaic-plot 0.8.0 → 0.10.0

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';
@@ -91,7 +90,7 @@ export class Mark extends MosaicClient {
 
   /**
    * @param {import('../plot.js').Plot} plot The plot.
-   * @param {number} index 
+   * @param {number} index
    */
   setPlot(plot, index) {
     this.plot = plot;
@@ -181,24 +180,8 @@ export class Mark extends MosaicClient {
    * @returns {object[]}
    */
   plotSpecs() {
-    const { type, detail, channels } = this;
-    // @ts-ignore
-    const { numRows: length, values, columns } = this.data || {};
-
-    // populate plot specification options
-    const options = {};
-    const side = {};
-    for (const c of channels) {
-      const obj = detail.has(c.channel) ? side : options;
-      obj[c.channel] = channelOption(c, columns);
-    }
-    if (detail.size) options.channels = side;
-
-    // if provided raw source values (not objects) pass as-is
-    // otherwise we pass columnar data directy in the options
-    const data = values ?? (this.data ? { length } : null);
-    const spec = [{ type, data, options }];
-    return spec;
+    const { type, data, detail, channels } = this;
+    return markPlotSpec(type, detail, channels, data);
   }
 }
 
@@ -258,3 +241,27 @@ export function markQuery(channels, table, skip = []) {
 
   return q;
 }
+
+
+/**
+ * Generate an array of Plot mark specifications.
+ * @returns {object[]}
+ */
+export function markPlotSpec(type, detail, channels, data, options = {}) {
+  // @ts-ignore
+  const { numRows: length, values, columns } = data ?? {};
+
+  // populate plot specification options
+  const side = {};
+  for (const c of channels) {
+    const obj = detail.has(c.channel) ? side : options;
+    obj[c.channel] = channelOption(c, columns);
+  }
+  if (detail.size) options.channels = side;
+
+  // if provided raw source values (not objects) pass as-is
+  // otherwise we pass columnar data directy in the options
+  const specData = values ?? (data ? { length } : null);
+  const spec = [{ type, data: specData, options }];
+  return spec;
+}

package/src/marks/RasterMark.js

@@ -2,6 +2,7 @@ import { ascending } from 'd3';
 import { scale } from '@observablehq/plot';
 import { gridDomainContinuous, gridDomainDiscrete } from './util/grid.js';
 import { isColor } from './util/is-color.js';
+import { indices, permute } from './util/permute.js';
 import { alphaScheme, alphaConstant, colorConstant, colorCategory, colorScheme, createCanvas } from './util/raster.js';
 import { DENSITY, Grid2DMark } from './Grid2DMark.js';
 import { Fixed, Transient } from '../symbols.js';
@@ -46,13 +47,18 @@ export class RasterMark extends Grid2DMark {
     const alphaData = columns[alphaProp] ?? [];
     const colorData = columns[colorProp] ?? [];
 
+    // determine raster order
+    const idx = numRows > 1 && colorProp && this.groupby?.includes(colorProp)
+      ? permute(colorData, this.plot.getAttribute('colorDomain'))
+      : indices(numRows);
+
     // generate rasters
     this.data = {
       numRows,
       columns: {
         src: Array.from({ length: numRows }, (_, i) => {
-          color?.(img.data, w, h, colorData[i]);
-          alpha?.(img.data, w, h, alphaData[i]);
+          color?.(img.data, w, h, colorData[idx[i]]);
+          alpha?.(img.data, w, h, alphaData[idx[i]]);
           ctx.putImageData(img, 0, 0);
           return canvas.toDataURL();
         })
@@ -196,7 +202,7 @@ function colorScale(mark, prop) {
   const domainFixed = domainAttr === Fixed;
   const domainTransient = domainAttr?.[Transient];
   const domain = (!domainFixed && !domainTransient && domainAttr) || (
-    flat ? data.sort(ascending)
+    flat ? data.slice().sort(ascending)
       : discrete ? gridDomainDiscrete(data)
       : gridDomainContinuous(data)
   );

package/src/marks/RasterTileMark.js

@@ -2,6 +2,7 @@ import { coordinator } from '@uwdata/mosaic-core';
 import { Query, count, isBetween, lt, lte, neq, sql, sum } from '@uwdata/mosaic-sql';
 import { binExpr } from './util/bin-expr.js';
 import { extentX, extentY } from './util/extent.js';
+import { indices, permute } from './util/permute.js';
 import { createCanvas } from './util/raster.js';
 import { Grid2DMark } from './Grid2DMark.js';
 import { rasterEncoding } from './RasterMark.js';
@@ -181,13 +182,18 @@ export class RasterTileMark extends Grid2DMark {
     const alphaData = columns[alphaProp] ?? [];
     const colorData = columns[colorProp] ?? [];
 
+    // determine raster order
+    const idx = numRows > 1 && colorProp && this.groupby?.includes(colorProp)
+      ? permute(colorData, this.plot.getAttribute('colorDomain'))
+      : indices(numRows);
+
     // generate rasters
     this.data = {
       numRows,
       columns: {
         src: Array.from({ length: numRows }, (_, i) => {
-          color?.(img.data, w, h, colorData[i]);
-          alpha?.(img.data, w, h, alphaData[i]);
+          color?.(img.data, w, h, colorData[idx[i]]);
+          alpha?.(img.data, w, h, alphaData[idx[i]]);
           ctx.putImageData(img, 0, 0);
           return canvas.toDataURL();
         })

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/is-constant-option.js

@@ -33,7 +33,8 @@ const constantOptions = new Set([
   'crossOrigin',
   'paintOrder',
   'pointerEvents',
-  'target'
+  'target',
+  'select'
 ]);
 
 export function isConstantOption(value) {

package/src/marks/util/permute.js

@@ -0,0 +1,10 @@
+export function indices(length) {
+  return Array.from({ length }, (_, i) => i);
+}
+
+export function permute(data, order) {
+  const ord = order.reduce((acc, val, i) => (acc[val] = i, acc), {});
+  const idx = indices(data.length);
+  idx.sort((a, b) => ord[data[a]] - ord[data[b]]);
+  return idx;
+}

package/src/marks/util/stats.js

@@ -163,3 +163,91 @@ export function qt(p, dof) {
   x = Math.sqrt((dof * (1 - x)) / x);
   return p > 0.5 ? x : -x;
 }
+
+/**
+ * Approximate inverse error function.
+ * @param {number} x
+ * @returns {number}
+ */
+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
+
+  // beware that the logarithm argument must be
+  // computed as (1.0 - x) * (1.0 + x),
+  // it must NOT be simplified as 1.0 - x * x as this
+  // would induce rounding errors near the boundaries +/-1
+  let w = - Math.log((1 - x) * (1 + x));
+  let p;
+
+  if (w < 6.25) {
+    w -= 3.125;
+    p =  -3.6444120640178196996e-21;
+    p =   -1.685059138182016589e-19 + p * w;
+    p =   1.2858480715256400167e-18 + p * w;
+    p =    1.115787767802518096e-17 + p * w;
+    p =   -1.333171662854620906e-16 + p * w;
+    p =   2.0972767875968561637e-17 + p * w;
+    p =   6.6376381343583238325e-15 + p * w;
+    p =  -4.0545662729752068639e-14 + p * w;
+    p =  -8.1519341976054721522e-14 + p * w;
+    p =   2.6335093153082322977e-12 + p * w;
+    p =  -1.2975133253453532498e-11 + p * w;
+    p =  -5.4154120542946279317e-11 + p * w;
+    p =    1.051212273321532285e-09 + p * w;
+    p =  -4.1126339803469836976e-09 + p * w;
+    p =  -2.9070369957882005086e-08 + p * w;
+    p =   4.2347877827932403518e-07 + p * w;
+    p =  -1.3654692000834678645e-06 + p * w;
+    p =  -1.3882523362786468719e-05 + p * w;
+    p =    0.0001867342080340571352 + p * w;
+    p =  -0.00074070253416626697512 + p * w;
+    p =   -0.0060336708714301490533 + p * w;
+    p =      0.24015818242558961693 + p * w;
+    p =       1.6536545626831027356 + p * w;
+  } else if (w < 16.0) {
+    w = Math.sqrt(w) - 3.25;
+    p =   2.2137376921775787049e-09;
+    p =   9.0756561938885390979e-08 + p * w;
+    p =  -2.7517406297064545428e-07 + p * w;
+    p =   1.8239629214389227755e-08 + p * w;
+    p =   1.5027403968909827627e-06 + p * w;
+    p =   -4.013867526981545969e-06 + p * w;
+    p =   2.9234449089955446044e-06 + p * w;
+    p =   1.2475304481671778723e-05 + p * w;
+    p =  -4.7318229009055733981e-05 + p * w;
+    p =   6.8284851459573175448e-05 + p * w;
+    p =   2.4031110387097893999e-05 + p * w;
+    p =   -0.0003550375203628474796 + p * w;
+    p =   0.00095328937973738049703 + p * w;
+    p =   -0.0016882755560235047313 + p * w;
+    p =    0.0024914420961078508066 + p * w;
+    p =   -0.0037512085075692412107 + p * w;
+    p =     0.005370914553590063617 + p * w;
+    p =       1.0052589676941592334 + p * w;
+    p =       3.0838856104922207635 + p * w;
+  } else if (Number.isFinite(w)) {
+    w = Math.sqrt(w) - 5.0;
+    p =  -2.7109920616438573243e-11;
+    p =  -2.5556418169965252055e-10 + p * w;
+    p =   1.5076572693500548083e-09 + p * w;
+    p =  -3.7894654401267369937e-09 + p * w;
+    p =   7.6157012080783393804e-09 + p * w;
+    p =  -1.4960026627149240478e-08 + p * w;
+    p =   2.9147953450901080826e-08 + p * w;
+    p =  -6.7711997758452339498e-08 + p * w;
+    p =   2.2900482228026654717e-07 + p * w;
+    p =  -9.9298272942317002539e-07 + p * w;
+    p =   4.5260625972231537039e-06 + p * w;
+    p =  -1.9681778105531670567e-05 + p * w;
+    p =   7.5995277030017761139e-05 + p * w;
+    p =  -0.00021503011930044477347 + p * w;
+    p =  -0.00013871931833623122026 + p * w;
+    p =       1.0103004648645343977 + p * w;
+    p =       4.8499064014085844221 + p * w;
+  } else {
+    p = Infinity;
+  }
+  return p * 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-renderer.js

@@ -1,7 +1,6 @@
 import * as Plot from '@observablehq/plot';
 import { setAttributes } from './plot-attributes.js';
 import { Fixed } from './symbols.js';
-import { isArrowTable } from '@uwdata/mosaic-core';
 
 const OPTIONS_ONLY_MARKS = new Set([
   'frame',
@@ -10,6 +9,19 @@ const OPTIONS_ONLY_MARKS = new Set([
   'graticule'
 ]);
 
+// @ts-ignore
+const SELECT_TRANSFORMS = new Map([
+  ['first', Plot.selectFirst],
+  ['last', Plot.selectLast],
+  ['maxX', Plot.selectMaxX],
+  ['maxY', Plot.selectMaxY],
+  ['minX', Plot.selectMinX],
+  ['minY', Plot.selectMinY],
+  ['nearest', Plot.pointer],
+  ['nearestX', Plot.pointerX],
+  ['nearestXY', Plot.pointerY]
+]);
+
 // construct Plot output
 // see https://github.com/observablehq/plot
 export async function plotRenderer(plot) {
@@ -24,27 +36,13 @@ export async function plotRenderer(plot) {
   const indices = [];
   for (const mark of marks) {
     for (const { type, data, options } of mark.plotSpecs()) {
-      if (OPTIONS_ONLY_MARKS.has(type)) {
-        spec.marks.push(Plot[type](options));
-      } else if (isArrowTable(data)) {
-        // optimized calls to Plot for Arrow:
-        // https://github.com/observablehq/plot/issues/191#issuecomment-2010986851
-        const opts = Object.fromEntries(
-          Object.entries(options).map(([k, v]) => {
-            let val = v;
-            if (typeof v === 'string') {
-              val = data.getChild(v) ?? v;
-            } else if (typeof v === 'object') {
-              const value = data.getChild(v.value);
-              val = value ? {value} : v;
-            }
-            return [k, val]
-          })
-        );
-        spec.marks.push(Plot[type]({length: data.numRows}, opts));
-      } else {
-        spec.marks.push(Plot[type](data, options));
-      }
+      // prepare mark options
+      const { select, ...rest } = options;
+      const opt = SELECT_TRANSFORMS.get(select)?.(rest) ?? rest;
+      const arg = OPTIONS_ONLY_MARKS.has(type) ? [opt] : [data, opt];
+
+      // instantiate Plot mark and add to spec
+      spec.marks.push(Plot[type](...arg));
       indices.push(mark.index);
     }
   }
@@ -165,6 +163,7 @@ function annotateMarks(svg, indices) {
 }
 
 function getType(data, channel) {
+  if (!data) return;
   const { columns } = data;
   const col = columns[channel] ?? columns[channel+'1'] ?? columns[channel+'2'];
   if (col) {

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;
@@ -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,11 +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']);
+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 })
@@ -24,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';
 }