@uwdata/mosaic-plot 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -29,10 +29,10 @@
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.13",
-    "@uwdata/mosaic-core": "^0.6.0",
-    "@uwdata/mosaic-sql": "^0.6.0",
+    "@uwdata/mosaic-core": "^0.7.0",
+    "@uwdata/mosaic-sql": "^0.7.0",
     "d3": "^7.8.5",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "51517b28e916e355f4ce0dc6e98aef3a1db3f7b2"
+  "gitHead": "4680b922f15579b7b527f31507ed71a12230ec35"
 }

package/src/interactors/Interval1D.js

@@ -21,7 +21,7 @@ export class Interval1D {
     this.pixelSize = pixelSize || 1;
     this.selection = selection;
     this.peers = peers;
-    this.field = field || getField(mark, [channel, channel+'1', channel+'2']);
+    this.field = field || getField(mark, channel);
     this.style = style && sanitizeStyles(style);
     this.brush = channel === 'y' ? brushY() : brushX();
     this.brush.on('brush end', ({ selection }) => this.publish(selection));

package/src/interactors/Interval2D.js

@@ -22,8 +22,8 @@ export class Interval2D {
     this.pixelSize = pixelSize || 1;
     this.selection = selection;
     this.peers = peers;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
+    this.xfield = xfield || getField(mark, 'x');
+    this.yfield = yfield || getField(mark, 'y');
     this.style = style && sanitizeStyles(style);
     this.brush = brush();
     this.brush.on('brush end', ({ selection }) => this.publish(selection));

package/src/interactors/PanZoom.js

@@ -18,8 +18,8 @@ export class PanZoom {
     this.mark = mark;
     this.xsel = x;
     this.ysel = y;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
+    this.xfield = xfield || getField(mark, 'x');
+    this.yfield = yfield || getField(mark, 'y');
     this.zoom = extent(zoom, [0, Infinity], [1, 1]);
     this.panx = this.xsel && panx;
     this.pany = this.ysel && pany;

package/src/interactors/util/get-field.js

@@ -1,4 +1,4 @@
-export function getField(mark, channels) {
-  const field = mark.channelField(channels)?.field;
+export function getField(mark, channel) {
+  const field = mark.channelField(channel)?.field;
   return field?.basis || field;
 }

package/src/legend.js

@@ -56,8 +56,10 @@ function findMark({ marks }, channel) {
     : null;
   if (channels == null) return null;
   for (let i = marks.length - 1; i > -1; --i) {
-    if (marks[i].channelField(channels)) {
-      return marks[i];
+    for (const channel of channels) {
+      if (marks[i].channelField(channel, { exact: true })) {
+        return marks[i];
+      }
     }
   }
   return null;

package/src/marks/ConnectedMark.js

@@ -6,29 +6,26 @@ import { Mark } from './Mark.js';
 export class ConnectedMark extends Mark {
   constructor(type, source, encodings) {
     const dim = type.endsWith('X') ? 'y' : type.endsWith('Y') ? 'x' : null;
-    const req = { [dim]: ['min', 'max'] };
+    const req = dim ? { [dim]: ['min', 'max'] } : undefined;
     super(type, source, encodings, req);
     this.dim = dim;
   }
 
   query(filter = []) {
-    const { plot, dim, source, stats } = this;
+    const { plot, dim, source } = this;
     const { optimize = true } = source.options || {};
     const q = super.query(filter);
     if (!dim) return q;
 
     const ortho = dim === 'x' ? 'y' : 'x';
-    const value = this.channelField(ortho)?.as;
-    const { field, as } = this.channelField(dim);
-    const { type } = stats[field.column];
+    const value = this.channelField(ortho, { exact: true })?.as;
+    const { field, as, type, min, max } = this.channelField(dim);
     const isContinuous = type === 'date' || type === 'number';
 
     if (optimize && isContinuous && value) {
       // TODO: handle stacked data!
-      const { column } = field;
-      const { max, min } = stats[column];
       const size = dim === 'x' ? plot.innerWidth() : plot.innerHeight();
-      const [lo, hi] = filteredExtent(filter, column) || [min, max];
+      const [lo, hi] = filteredExtent(filter, field) || [min, max];
       const [expr] = binExpr(this, dim, size, [lo, hi], 1, as);
       const cols = q.select()
         .map(c => c.as)

package/src/marks/DenseLineMark.js

@@ -47,10 +47,17 @@ export class DenseLineMark extends RasterMark {
 function stripXY(mark, filter) {
   if (Array.isArray(filter) && !filter.length) return filter;
 
-  const xc = mark.channelField('x').field.column;
-  const yc = mark.channelField('y').field.column;
-  const test = p => p.op !== 'BETWEEN'
-    || p.field.column !== xc && p.field.column !== yc;
+  // get column expressions for x and y encoding channels
+  const { column: xc } = mark.channelField('x');
+  const { column: yc } = mark.channelField('y');
+
+  // test if a range predicate filters the x or y channels
+  const test = p => {
+    const col = `${p.field}`;
+    return p.op !== 'BETWEEN' || col !== xc && col !== yc;
+  };
+
+  // filter boolean 'and' operations
   const filterAnd = p => p.op === 'AND'
     ? and(p.children.filter(c => test(c)))
     : p;

package/src/marks/Grid2DMark.js

@@ -5,6 +5,9 @@ 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 {
+  interpolateNearest, interpolatorBarycentric, interpolatorRandomWalk
+} from './util/interpolate.js';
 import { Mark } from './Mark.js';
 
 export const DENSITY = 'density';
@@ -36,7 +39,7 @@ export class Grid2DMark extends Mark {
   }
 
   setPlot(plot, index) {
-    const update = () => { if (this.stats) this.requestUpdate(); };
+    const update = () => { if (this.hasFieldInfo()) this.requestUpdate(); };
     plot.addAttributeListener('domainX', update);
     plot.addAttributeListener('domainY', update);
     return super.setPlot(plot, index);
@@ -121,8 +124,9 @@ export class Grid2DMark extends Mark {
   }
 
   queryResult(data) {
-    const [nx, ny] = this.bins;
-    this.grids = grid2d(nx, ny, data, this.aggr, this.groupby);
+    const [w, h] = this.bins;
+    const interp = maybeInterpolate(this.interpolate);
+    this.grids = grid2d(w, h, data, this.aggr, this.groupby, interp);
     return this.convolve();
   }
 
@@ -179,6 +183,22 @@ function createDensityMap(channels) {
   return densityMap;
 }
 
+function maybeInterpolate(interpolate = 'none') {
+  if (typeof interpolate === 'function') return interpolate;
+  switch (`${interpolate}`.toLowerCase()) {
+    case 'none':
+    case 'linear':
+      return undefined; // no special interpolation need
+    case 'nearest':
+      return interpolateNearest;
+    case 'barycentric':
+      return interpolatorBarycentric();
+    case 'random-walk':
+      return interpolatorRandomWalk();
+  }
+  throw new Error(`invalid interpolate: ${interpolate}`);
+}
+
 function bin2d(q, xp, yp, aggs, xn, groupby) {
   return q
     .select({

package/src/marks/Mark.js

@@ -19,6 +19,8 @@ const fieldEntry = (channel, field) => ({
 });
 const valueEntry = (channel, value) => ({ channel, value });
 
+// checks if a data source is an explicit array of values
+// as opposed to a database table refernece
 export const isDataArray = source => Array.isArray(source);
 
 export class Mark extends MosaicClient {
@@ -94,45 +96,47 @@ export class Mark extends MosaicClient {
     return this.source == null || isDataArray(this.source);
   }
 
+  hasFieldInfo() {
+    return !!this._fieldInfo;
+  }
+
   channel(channel) {
     return this.channels.find(c => c.channel === channel);
   }
 
-  channelField(...channels) {
-    const list = channels.flat();
-    for (const channel of list) {
-      const c = this.channel(channel);
-      if (c?.field) return c;
-    }
-    return null;
+  channelField(channel, { exact } = {}) {
+    const c = exact
+      ? this.channel(channel)
+      : this.channels.find(c => c.channel.startsWith(channel));
+    return c?.field ? c : null;
   }
 
   fields() {
     if (this.hasOwnData()) return null;
-    const { source: { table }, channels, reqs } = this;
 
+    const { source: { table }, channels, reqs } = this;
     const fields = new Map;
     for (const { channel, field } of channels) {
-      const column = field?.column;
-      if (!column) {
-        continue; // no column to lookup
-      } else if (field.stats?.length || reqs[channel]) {
-        if (!fields.has(column)) fields.set(column, new Set);
-        const entry = fields.get(column);
-        reqs[channel]?.forEach(s => entry.add(s));
-        field.stats?.forEach(s => entry.add(s));
-      }
+      if (!field) continue;
+      const stats = field.stats?.stats || [];
+      const key = field.stats?.column ?? field;
+      const entry = fields.get(key) ?? fields.set(key, new Set).get(key);
+      stats.forEach(s => entry.add(s));
+      reqs[channel]?.forEach(s => entry.add(s));
     }
-    return Array.from(fields, ([column, stats]) => {
-      return { table, column, stats: Array.from(stats) };
-    });
+
+    return Array.from(fields, ([c, s]) => ({ table, column: c, stats: s }));
   }
 
   fieldInfo(info) {
-    this.stats = info.reduce(
-      (o, d) => (o[d.column] = d, o),
-      Object.create(null)
-    );
+    const lookup = Object.fromEntries(info.map(x => [x.column, x]));
+    for (const entry of this.channels) {
+      const { field } = entry;
+      if (field) {
+        Object.assign(entry, lookup[field.stats?.column ?? field]);
+      }
+    }
+    this._fieldInfo = true;
     return this;
   }
 
@@ -169,6 +173,13 @@ export class Mark extends MosaicClient {
   }
 }
 
+/**
+ * Helper method for setting a channel option in a Plot specification.
+ * Checks if a constant value or a data field is needed.
+ * Also avoids misinterpretation of data values as color names.
+ * @param {*} c a visual encoding channel spec
+ * @returns the Plot channel option
+ */
 export function channelOption(c) {
   // use a scale override for color channels to sidestep
   // https://github.com/observablehq/plot/issues/1593
@@ -177,6 +188,16 @@ export function channelOption(c) {
     : c.as;
 }
 
+/**
+ * Default query construction for a mark.
+ * Tracks aggregates by checking fields for an aggregate flag.
+ * If aggregates are found, groups by all non-aggregate fields.
+ * @param {*} channels array of visual encoding channel specs.
+ * @param {*} table the table to query.
+ * @param {*} skip an optional array of channels to skip.
+ *  Mark subclasses can skip channels that require special handling.
+ * @returns a Query instance
+ */
 export function markQuery(channels, table, skip = []) {
   const q = Query.from({ source: table });
   const dims = new Set;

package/src/marks/RasterMark.js

@@ -23,7 +23,7 @@ export class RasterMark extends Grid2DMark {
   }
 
   setPlot(plot, index) {
-    const update = () => { if (this.stats) this.rasterize(); };
+    const update = () => { if (this.hasFieldInfo()) this.rasterize(); };
     plot.addAttributeListener('schemeColor', update);
     super.setPlot(plot, index);
   }

package/src/marks/RasterTileMark.js

@@ -18,7 +18,7 @@ export class RasterTileMark extends Grid2DMark {
   }
 
   setPlot(plot, index) {
-    const update = () => { if (this.stats) this.rasterize(); };
+    const update = () => { if (this.hasFieldInfo()) this.rasterize(); };
     plot.addAttributeListener('schemeColor', update);
     super.setPlot(plot, index);
   }

package/src/marks/util/channel-scale.js

@@ -5,8 +5,7 @@ export function channelScale(mark, channel) {
 
   let scaleType = plot.getAttribute(`${channel}Scale`);
   if (!scaleType) {
-    const { field } = mark.channelField(channel, `${channel}1`, `${channel}2`);
-    const { type } = mark.stats[field.column];
+    const { type } = mark.channelField(channel);
     scaleType = type === 'date' ? 'time' : 'linear';
   }
 

package/src/marks/util/density.js

@@ -96,7 +96,7 @@ export function dericheConv2d(cx, cy, grid, [nx, ny]) {
   // allocate buffers
   const yc = new Float64Array(Math.max(nx, ny)); // causal
   const ya = new Float64Array(Math.max(nx, ny)); // anticausal
-  const h = new Float64Array(5);
+  const h = new Float64Array(5); // q + 1
   const d = new Float64Array(grid.length);
 
   // convolve rows
@@ -119,7 +119,7 @@ export function dericheConv1d(
   stride = 1,
   y_causal = new Float64Array(N),
   y_anticausal = new Float64Array(N),
-  h = new Float64Array(5),
+  h = new Float64Array(5), // q + 1
   d = y_causal,
   init = dericheInitZeroPad
 ) {
@@ -153,6 +153,7 @@ export function dericheConv1d(
   }
 
   // initialize the anticausal filter on the right boundary
+  // dest, src, N, stride, b, p, a, q, sum, h
   init(
     y_anticausal, src, N, -stride,
     c.b_anticausal, 4, c.a, 4, c.sum_anticausal, h, c.sigma
@@ -176,7 +177,7 @@ export function dericheConv1d(
 
   // sum the causal and anticausal responses to obtain the final result
   if (c.negative) {
-    // do not threshold if the input grid includes negatively weighted values
+    // do not threshold if the input grid includes negative values
     for (n = 0, i = 0; n < N; ++n, i += stride) {
       d[i] = y_causal[n] + y_anticausal[N - n - 1];
     }
@@ -190,13 +191,16 @@ export function dericheConv1d(
   return d;
 }
 
-export function dericheInitZeroPad(dest, src, N, stride, b, p, a, q, sum, h) {
+export function dericheInitZeroPad(
+  dest, src, N, stride, b, p, a, q,
+  sum, h, sigma, tol = 0.5
+) {
   const stride_N = Math.abs(stride) * N;
   const off = stride < 0 ? stride_N + stride : 0;
   let i, n, m;
 
   // compute the first q taps of the impulse response, h_0, ..., h_{q-1}
-  for (n = 0; n < q; ++n) {
+  for (n = 0; n <= q; ++n) {
     h[n] = (n <= p) ? b[n] : 0;
     for (m = 1; m <= q && m <= n; ++m) {
       h[n] -= a[m] * h[n - m];
@@ -214,12 +218,27 @@ export function dericheInitZeroPad(dest, src, N, stride, b, p, a, q, sum, h) {
     }
   }
 
-  // dest_m = dest_m + h_{n+m} src_{-n}
   const cur = src[off];
-  if (cur > 0) {
+  const max_iter = Math.ceil(sigma * 10);
+  for (n = 0; n < max_iter; ++n) {
+    /* dest_m = dest_m + h_{n+m} src_{-n} */
     for (m = 0; m < q; ++m) {
       dest[m] += h[m] * cur;
     }
+
+    sum -= Math.abs(h[0]);
+    if (sum <= tol) break;
+
+    /* Compute the next impulse response tap, h_{n+q} */
+    h[q] = (n + q <= p) ? b[n + q] : 0;
+    for (m = 1; m <= q; ++m) {
+      h[q] -= a[m] * h[q - m];
+    }
+
+    /* Shift the h array for the next iteration */
+    for (m = 0; m < q; ++m) {
+      h[m] = h[m + 1];
+    }
   }
 
   return;

package/src/marks/util/extent.js

@@ -6,16 +6,14 @@ export const yext = { y: ['min', 'max'] };
 export const xyext = { ...xext, ...yext };
 
 export function plotExtent(mark, filter, channel, domainAttr, niceAttr) {
-  const { plot, stats } = mark;
+  const { plot } = mark;
   const domain = plot.getAttribute(domainAttr);
   const nice = plot.getAttribute(niceAttr);
 
   if (Array.isArray(domain) && !domain[Transient]) {
     return domain;
   } else {
-    const { field } = mark.channelField(channel);
-    const { column } = field;
-    const { min, max } = stats[column];
+    const { column, min, max } = mark.channelField(channel);
     const dom = filteredExtent(filter, column) || (nice
       ? scaleLinear().domain([min, max]).nice().domain()
       : [min, max]);
@@ -39,7 +37,7 @@ export function filteredExtent(filter, column) {
   let lo;
   let hi;
   const visitor = (type, clause) => {
-    if (type === 'BETWEEN' && clause.field.column === column) {
+    if (type === 'BETWEEN' && `${clause.field}` === column) {
       const { range } = clause;
       if (range && (lo == null || range[0] < lo)) lo = range[0];
       if (range && (hi == null || range[1] > hi)) hi = range[1];

package/src/marks/util/grid.js

@@ -1,48 +1,24 @@
 import { InternSet, ascending } from 'd3';
-import { DECIMAL, FLOAT, INTEGER, isArrowTable } from './arrow.js';
+import {
+  convertArrowArrayType,
+  convertArrowColumn,
+  isArrowTable
+} from '@uwdata/mosaic-core';
 
 function arrayType(values, name = 'density') {
-  if (isArrowTable(values)) {
-    const type = values.getChild(name).type;
-    switch (type.typeId) {
-      case INTEGER:
-      case FLOAT:
-      case DECIMAL:
-        return Float64Array;
-      default:
-        return Array;
-    }
-  } else {
-    return typeof values[0][name] === 'number' ? Float64Array : Array;
-  }
-}
-
-export function grid1d(n, values) {
-  const Type = arrayType(values);
-  return valuesToGrid(new Type(n), values);
+  return isArrowTable(values)
+    ? convertArrowArrayType(values.getChild(name).type)
+    : typeof values[0]?.[name] === 'number' ? Float64Array : Array;
 }
 
-export function grid2d(m, n, values, aggr, groupby = []) {
-  if (groupby.length) {
-    // generate grids per group
-    return groupedValuesToGrids(m * n, values, aggr, groupby);
-  } else {
-    const cell = {};
-    aggr.forEach(name => {
-      const Type = arrayType(values, name);
-      cell[name] = valuesToGrid(new Type(m * n), values, name);
-    });
-    return [cell];
-  }
-}
-
-function valuesToGrid(grid, values, name = 'density') {
+export function grid1d(n, values, name = 'density') {
+  const grid = new (arrayType(values))(n);
   if (isArrowTable(values)) {
     // optimize access for Arrow tables
     const numRows = values.numRows;
     if (numRows === 0) return grid;
-    const index = values.getChild('index').toArray();
-    const value = values.getChild(name).toArray();
+    const index = convertArrowColumn(values.getChild('index'));
+    const value = convertArrowColumn(values.getChild(name));
     for (let row = 0; row < numRows; ++row) {
       grid[index[row]] = value[row];
     }
@@ -55,30 +31,35 @@ function valuesToGrid(grid, values, name = 'density') {
   return grid;
 }
 
-function groupedValuesToGrids(size, values, aggr, groupby) {
+export function grid2d(w, h, values, aggr, groupby = [], interpolate) {
+  const size = w * h;
   const Types = aggr.map(name => arrayType(values, name));
   const numAggr = aggr.length;
 
-  const cellMap = {};
-  const getCell = key => {
-    let cell = cellMap[key];
-    if (!cell) {
-      cell = cellMap[key] = {};
-      groupby.forEach((name, i) => cell[name] = key[i]);
-      aggr.forEach((name, i) => cell[name] = new Types[i](size));
-    }
+  // grid data tuples
+  const createCell = (key) => {
+    const cell = {};
+    groupby.forEach((name, i) => cell[name] = key[i]);
+    aggr.forEach((name, i) => cell[name] = new Types[i](size));
     return cell;
   };
+  const cellMap = {};
+  const baseCell = groupby.length ? null : (cellMap[[]] = createCell([]));
+  const getCell = groupby.length
+    ? key => cellMap[key] ?? (cellMap[key] = createCell(key))
+    : () => baseCell;
 
-  if (isArrowTable(values)) {
-    // optimize access for Arrow tables
-    const numRows = values.numRows;
-    if (numRows === 0) return [];
+  // early exit if empty query result
+  const numRows = values.numRows;
+  if (numRows === 0) return Object.values(cellMap);
 
-    const index = values.getChild('index').toArray();
-    const value = aggr.map(name => values.getChild(name).toArray());
-    const groups = groupby.map(name => values.getChild(name));
+  // extract arrays from arrow table
+  const index = convertArrowColumn(values.getChild('index'));
+  const value = aggr.map(name => convertArrowColumn(values.getChild(name)));
+  const groups = groupby.map(name => values.getChild(name));
 
+  if (!interpolate) {
+    // if no interpolation, copy values over
     for (let row = 0; row < numRows; ++row) {
       const key = groups.map(vec => vec.get(row));
       const cell = getCell(key);
@@ -87,14 +68,25 @@ function groupedValuesToGrids(size, values, aggr, groupby) {
       }
     }
   } else {
-    // fallback to iterable data
-    for (const row of values) {
-      const key = groupby.map(col => row[col]);
-      const cell = getCell(key);
-      for (let i = 0; i < numAggr; ++i) {
-        cell[aggr[i]][row.index] = row[aggr[i]];
+    // prepare index arrays, then interpolate grid values
+    const X = index.map(k => k % w);
+    const Y = index.map(k => Math.floor(k / w));
+    if (groupby.length) {
+      for (let row = 0; row < numRows; ++row) {
+        const key = groups.map(vec => vec.get(row));
+        const cell = getCell(key);
+        if (!cell.index) { cell.index = []; }
+        cell.index.push(row);
       }
+    } else {
+      baseCell.index = index.map((_, i) => i);
     }
+    Object.values(cellMap).forEach(cell => {
+      for (let i = 0; i < numAggr; ++i) {
+        interpolate(cell.index, w, h, X, Y, value[i], cell[aggr[i]]);
+      }
+      delete cell.index;
+    })
   }
 
   return Object.values(cellMap);