@uwdata/mosaic-plot 0.7.0 → 0.8.0

package/src/marks/RasterTileMark.js

@@ -10,6 +10,7 @@ export class RasterTileMark extends Grid2DMark {
   constructor(source, options) {
     const { origin = [0, 0], dim = 'xy', ...markOptions } = options;
     super('image', source, markOptions);
+    this.image = null;
 
     // TODO: make part of data source instead of options?
     this.origin = origin;
@@ -34,15 +35,15 @@ export class RasterTileMark extends Grid2DMark {
   }
 
   tileQuery(extent) {
-    const { binType, binPad, channels, densityMap, source } = this;
+    const { interpolate, pad, channels, densityMap, source } = this;
     const [[x0, x1], [y0, y1]] = extent;
     const [nx, ny] = this.bins;
-    const [x, bx] = binExpr(this, 'x', nx, [x0, x1], binPad);
-    const [y, by] = binExpr(this, 'y', ny, [y0, y1], binPad);
+    const [x, bx] = binExpr(this, 'x', nx, [x0, x1], pad);
+    const [y, by] = binExpr(this, 'y', ny, [y0, y1], pad);
 
     // with padded bins, include the entire domain extent
     // if the bins are flush, exclude the extent max
-    const bounds = binPad
+    const bounds = pad
       ? [isBetween(bx, [+x0, +x1]), isBetween(by, [+y0, +y1])]
       : [lte(+x0, bx), lt(bx, +x1), lte(+y0, by), lt(by, +y1)];
 
@@ -83,7 +84,7 @@ export class RasterTileMark extends Grid2DMark {
     }
 
     // generate grid binning query
-    if (binType === 'linear') {
+    if (interpolate === 'linear') {
       if (aggr.length > 1) {
         throw new Error('Linear binning not applicable to multiple aggregates.');
       }
@@ -102,14 +103,14 @@ export class RasterTileMark extends Grid2DMark {
     if (this.prefetch) mc.cancel(this.prefetch);
 
     // get view extent info
-    const { binPad, tileX, tileY, origin: [tx, ty] } = this;
-    const [m, n] = this.bins = this.binDimensions(this);
+    const { pad, tileX, tileY, origin: [tx, ty] } = this;
+    const [m, n] = this.bins = this.binDimensions();
     const [x0, x1] = extentX(this, this._filter);
     const [y0, y1] = extentY(this, this._filter);
     const xspan = x1 - x0;
     const yspan = y1 - y0;
-    const xx = Math.floor((x0 - tx) * (m - binPad) / xspan);
-    const yy = Math.floor((y0 - ty) * (n - binPad) / yspan);
+    const xx = Math.floor((x0 - tx) * (m - pad) / xspan);
+    const yy = Math.floor((y0 - ty) * (n - pad) / yspan);
 
     const tileExtent = (i, j) => [
       [tx + i * xspan, tx + (i + 1) * xspan],
@@ -155,7 +156,11 @@ export class RasterTileMark extends Grid2DMark {
 
     // wait for tile queries to complete, then update
     const tiles = await Promise.all(queries);
-    this.grids = [{ density: processTiles(m, n, xx, yy, coords, tiles) }];
+    const density = processTiles(m, n, xx, yy, coords, tiles);
+    this.grids0 = {
+      numRows: density.length,
+      columns: { density: [density] }
+    };
     this.convolve().update();
   }
 
@@ -164,37 +169,45 @@ export class RasterTileMark extends Grid2DMark {
   }
 
   rasterize() {
-    const { bins, kde } = this;
+    const { bins, grids } = this;
     const [ w, h ] = bins;
+    const { numRows, columns } = grids;
 
     // raster data
     const { canvas, ctx, img } = imageData(this, w, h);
 
     // color + opacity encodings
     const { alpha, alphaProp, color, colorProp } = rasterEncoding(this);
+    const alphaData = columns[alphaProp] ?? [];
+    const colorData = columns[colorProp] ?? [];
 
     // generate rasters
-    this.data = kde.map(cell => {
-      color?.(img.data, w, h, cell[colorProp]);
-      alpha?.(img.data, w, h, cell[alphaProp]);
-      ctx.putImageData(img, 0, 0);
-      return { src: canvas.toDataURL() };
-    });
+    this.data = {
+      numRows,
+      columns: {
+        src: Array.from({ length: numRows }, (_, i) => {
+          color?.(img.data, w, h, colorData[i]);
+          alpha?.(img.data, w, h, alphaData[i]);
+          ctx.putImageData(img, 0, 0);
+          return canvas.toDataURL();
+        })
+      }
+    };
 
     return this;
   }
 
   plotSpecs() {
-    const { type, data, plot } = this;
+    const { type, plot, data: { numRows: length, columns } } = this;
     const options = {
-      src: 'src',
+      src: columns.src,
       width: plot.innerWidth(),
       height: plot.innerHeight(),
       preserveAspectRatio: 'none',
       imageRendering: this.channel('imageRendering')?.value,
       frameAnchor: 'middle'
     };
-    return [{ type, data, options }];
+    return [{ type, data: { length }, options }];
   }
 }
 

package/src/marks/RegressionMark.js

@@ -7,17 +7,24 @@ import {
 import { qt } from './util/stats.js';
 import { Mark, channelOption } from './Mark.js';
 import { handleParam } from './util/handle-param.js';
-import { toDataArray } from './util/to-data-array.js';
+import { toDataColumns } from './util/to-data-columns.js';
 
 export class RegressionMark extends Mark {
   constructor(source, options) {
     const { ci = 0.95, precision = 4, ...channels } = options;
     super('line', source, channels);
-    const update = () => {
-      return this.modelFit ? this.confidenceBand().update() : null
-    };
-    handleParam(this, 'ci', ci, update);
-    handleParam(this, 'precision', precision, update);
+
+    const update = () => this.modelFit ? this.confidenceBand().update() : null;
+
+    /** @type {number} */
+    this.ci = handleParam(ci, value => {
+      return (this.ci = value, update());
+    });
+
+    /** @type {number} */
+    this.precision = handleParam(precision, value => {
+      return (this.precision = value, update());
+    });
   }
 
   query(filter = []) {
@@ -44,10 +51,10 @@ export class RegressionMark extends Mark {
   }
 
   queryResult(data) {
-    this.modelFit = toDataArray(data);
+    this.modelFit = toDataColumns(data);
 
     // regression line
-    this.lineData = this.modelFit.flatMap(m => linePoints(m));
+    this.lineData = linePoints(this.modelFit);
 
     // prepare confidence band
     return this.confidenceBand();
@@ -56,15 +63,17 @@ export class RegressionMark extends Mark {
   confidenceBand() {
     // regression ci area
     const { ci, modelFit, precision, plot } = this;
-    const w = plot.innerWidth();
-    this.areaData = ci ? modelFit.flatMap(m => areaPoints(ci, precision, m, w)) : null;
+    const width = plot.innerWidth();
+    this.areaData = ci ? areaPoints(modelFit, ci, precision, width) : null;
     return this;
   }
 
   plotSpecs() {
     const { lineData, areaData, channels, ci } = this;
-    const lopt = { x: 'x', y: 'y' };
-    const aopt = { x: 'x', y1: 'y1', y2: 'y2', fillOpacity: 0.1 };
+    const lcols = lineData.columns;
+    const acols = ci ? areaData.columns : {};
+    const lopt = { x: lcols.x, y: lcols.y };
+    const aopt = { x: acols.x, y1: acols.y1, y2: acols.y2, fillOpacity: 0.1 };
 
     for (const c of channels) {
       switch (c.channel) {
@@ -72,46 +81,72 @@ export class RegressionMark extends Mark {
         case 'y':
         case 'fill':
           break;
+        case 'tip':
+          aopt.tip = channelOption(c, acols);
+          break;
         case 'stroke':
-          lopt.stroke = aopt.fill = channelOption(c);
+          lopt.stroke = channelOption(c, lcols);
+          aopt.fill = channelOption(c, acols);
           break;
         case 'strokeOpacity':
-          lopt.strokeOpacity = channelOption(c);
+          lopt.strokeOpacity = channelOption(c, lcols);
           break;
         case 'fillOpacity':
-          aopt.fillOpacity = channelOption(c);
+          aopt.fillOpacity = channelOption(c, acols);
           break;
         default:
-          lopt[c.channel] = aopt[c.channel] = channelOption(c);
+          lopt[c.channel] = channelOption(c, lcols);
+          aopt[c.channel] = channelOption(c, acols);
           break;
       }
     }
 
     return [
-      ...(ci ? [{ type: 'areaY', data: areaData, options: aopt }] : []),
-      { type: 'line', data: lineData, options: lopt }
+      ...(ci ? [{ type: 'areaY', data: { length: areaData.numRows }, options: aopt }] : []),
+      { type: 'line', data: { length: lineData.numRows }, options: lopt }
     ];
   }
 }
 
-function linePoints(model) {
+function concat(a, b) {
+  if (a.concat) return a.concat(b);
+  const array = new (a.constructor)(a.length + b.length);
+  array.set(a, 0);
+  array.set(b, a.length);
+  return array;
+}
+
+function linePoints(fit) {
   // eslint-disable-next-line no-unused-vars
-  const { x0, x1, xm, intercept, slope, n, ssx, ssy, ...rest } = model;
-  return [
-    { x: x0, y: intercept + x0 * slope, ...rest },
-    { x: x1, y: intercept + x1 * slope, ...rest }
-  ];
+  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));
+  for (const name in rest) {
+    rest[name] = concat(rest[name], rest[name]);
+  }
+  return { numRows: x.length, columns: { x, y, ...rest } };
 }
 
-function areaPoints(ci, precision, model, width) {
-  const { x0, x1, xm, intercept, slope, n, ssx, ssy, ...rest } = model;
-  const pp = precision * (x1 - x0) / width;
-  const t_sy = qt((1 - ci) / 2, n - 2) * Math.sqrt(ssy / (n - 2));
-  return range(x0, x1 - pp / 2, pp)
-    .concat(x1)
-    .map(x => {
-      const y = intercept + x * slope;
-      const ye = t_sy * Math.sqrt(1 / n + (x - xm) ** 2 / ssx);
-      return { x, y1: y - ye, y2: y + ye, ...rest };
+function areaPoints(fit, ci, precision, width) {
+  const len = fit.numRows;
+  const { x0, x1, xm, intercept, slope, n, ssx, ssy, ...rest } = fit.columns;
+  const other = Object.keys(rest);
+  const columns = { x: [], y1: [], y2: [] };
+  other.forEach(name => columns[name] = []);
+
+  for (let i = 0; i < len; ++i) {
+    const pp = precision * (x1[i] - x0[i]) / width;
+    const t_sy = qt((1 - ci) / 2, n[i] - 2) * Math.sqrt(ssy[i] / (n[i] - 2));
+    range(x0[i], x1[i] - pp / 2, pp).concat(x1[i]).forEach(x => {
+      const y = intercept[i] + x * slope[i];
+      const ye = t_sy * Math.sqrt(1 / n[i] + (x - xm[i]) ** 2 / ssx[i]);
+      columns.x.push(x);
+      columns.y1.push(y - ye);
+      columns.y2.push(y + ye);
+      other.forEach(name => columns[name].push(rest[name][i]));
     });
+  }
+
+  return { numRows: columns.x.length, columns };
 }

package/src/marks/util/grid.js

@@ -1,119 +1,127 @@
 import { InternSet, ascending } from 'd3';
-import {
-  convertArrowArrayType,
-  convertArrowColumn,
-  isArrowTable
-} from '@uwdata/mosaic-core';
 
-function arrayType(values, name = 'density') {
-  return isArrowTable(values)
-    ? convertArrowArrayType(values.getChild(name).type)
-    : typeof values[0]?.[name] === 'number' ? Float64Array : Array;
+/**
+ * @typedef {Array | Int8Array | Uint8Array | Uint8ClampedArray
+ *  | Int16Array | Uint16Array | Int32Array | Uint32Array
+ *  | Float32Array | Float64Array
+ * } Arrayish - an Array or TypedArray
+ */
+
+/**
+ * Generate a new array with designated size and type.
+ * @param {number} size The size of the array
+ * @param {Arrayish} [proto] A prototype object of the desired array type.
+ *  This may be a typed array or standard array (the default).
+ * @returns {Arrayish} The generated array.
+ */
+export function array(size, proto = []) {
+  // @ts-ignore
+  return new proto.constructor(size);
 }
 
-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 = convertArrowColumn(values.getChild('index'));
-    const value = convertArrowColumn(values.getChild(name));
-    for (let row = 0; row < numRows; ++row) {
-      grid[index[row]] = value[row];
-    }
-  } else {
-    // fallback to iterable data
-    for (const row of values) {
-      grid[row.index] = row[name];
-    }
+/**
+ * Create a 1D grid for the given sample values
+ * @param {number} size The grid size.
+ * @param {Arrayish} index The grid indices for sample points.
+ * @param {Arrayish} value The sample point values.
+ * @returns {Arrayish} The generated value grid.
+ */
+export function grid1d(size, index, value) {
+  const G = array(size, value);
+  const n = value.length;
+  for (let i = 0; i < n; ++i) {
+    G[index[i]] = value[i];
   }
-  return grid;
+  return G;
 }
 
-export function grid2d(w, h, values, aggr, groupby = [], interpolate) {
+/**
+ * Create a 2D grid for the given sample values.
+ * Can handle multiple grids and groupby values per output row.
+ * @param {number} w The grid width.
+ * @param {number} h The grid height.
+ * @param {Arrayish} index The grid indices for sample points.
+ *  An index value is an integer of the form (y * w + x).
+ * @param {Record<string,Arrayish>} columns Named column arrays with sample point values.
+ * @param {string[]} aggregates The names of aggregate columns to grid.
+ * @param {string[]} groupby The names of additional columns to group by.
+ * @param {function} [interpolate] A grid interpolation function.
+ *  By default sample values are directly copied to output grid arrays.
+ * @returns {{
+ *  numRows: number;
+ *  columns: { [key:string]: Arrayish }
+ * }} Named column arrays of generated grid values.
+ */
+export function grid2d(w, h, index, columns, aggregates, groupby, interpolate) {
+  const numRows = index.length;
   const size = w * h;
-  const Types = aggr.map(name => arrayType(values, name));
-  const numAggr = aggr.length;
+  const values = aggregates.map(name => columns[name]);
+  const result = {};
+  const cells = [];
+  const group = new Int32Array(numRows);
 
-  // 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;
-
-  // early exit if empty query result
-  const numRows = values.numRows;
-  if (numRows === 0) return Object.values(cellMap);
-
-  // 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
+  // if grouped, generate per-row group indices
+  if (groupby?.length) {
+    const gvalues = groupby.map(name => columns[name]);
+    const cellMap = {};
     for (let row = 0; row < numRows; ++row) {
-      const key = groups.map(vec => vec.get(row));
-      const cell = getCell(key);
-      for (let i = 0; i < numAggr; ++i) {
-        cell[aggr[i]][index[row]] = value[i][row];
-      }
+      const key = gvalues.map(group => group[row]);
+      group[row] = cellMap[key] ??= cells.push(key) - 1;
+    }
+    for (let i = 0; i < groupby.length; ++i) {
+      result[groupby[i]] = cells.map(cell => cell[i]);
     }
   } else {
+    cells.push([]); // single group
+  }
+
+  if (interpolate) {
     // 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);
+    const I = cells.map(() => []);
+    for (let row = 0; row < numRows; ++row) {
+      I[group[row]].push(row);
     }
-    Object.values(cellMap).forEach(cell => {
-      for (let i = 0; i < numAggr; ++i) {
-        interpolate(cell.index, w, h, X, Y, value[i], cell[aggr[i]]);
+    aggregates.forEach((name, i) => {
+      const V = values[i];
+      result[name] = cells.map((_, j) => interpolate(I[j], w, h, X, Y, V));
+    });
+  } else {
+    // no interpolation, copy values directly to grids
+    aggregates.forEach((name, i) => {
+      const V = values[i];
+      const G = result[name] = cells.map(() => array(size, V));
+      for (let row = 0; row < numRows; ++row) {
+        G[group[row]][index[row]] = V[row];
       }
-      delete cell.index;
-    })
+    });
   }
 
-  return Object.values(cellMap);
+  // @ts-ignore
+  return { numRows: cells.length, columns: result };
 }
 
-export function gridDomainContinuous(grids, prop) {
-  let lo = 0, hi = 0;
-  grids.forEach(cell => {
-    const grid = cell[prop];
-    const n = grid.length;
+export function gridDomainContinuous(grids) {
+  let lo = Infinity, hi = -Infinity;
+  grids.forEach(G => {
+    const n = G.length;
     for (let i = 0; i < n; ++i) {
-      const v = grid[i];
+      const v = G[i];
       if (v < lo) lo = v;
       if (v > hi) hi = v;
     }
   });
-  return (lo === 0 && hi === 0) ? [0, 1] : [lo, hi];
+  return (Number.isFinite(lo) && Number.isFinite(hi)) ? [lo, hi] : [0, 1];
 }
 
-export function gridDomainDiscrete(grids, prop) {
-    // TODO: sort options?
+export function gridDomainDiscrete(grids) {
+  // TODO: sort options?
   const values = new InternSet();
-  grids.forEach(cell => {
-    const grid = cell[prop];
-    const n = grid.length;
+  grids.forEach(G => {
+    const n = G.length;
     for (let i = 0; i < n; ++i) {
-      values.add(grid[i]);
+      values.add(G[i]);
     }
   });
   return Array.from(values).sort(ascending);

package/src/marks/util/handle-param.js

@@ -1,14 +1,13 @@
 import { isParam } from '@uwdata/mosaic-core';
 
-export function handleParam(client, key, param, update) {
-  if (isParam(param)) {
-    update = update || (() => client.requestUpdate());
-    param.addEventListener('value', value => {
-      client[key] = value;
-      return update();
-    });
-    client[key] = param.value;
-  } else {
-    client[key] = param;
-  }
+/**
+ * Utility to check if a value is a Param, and if so, bind a listener.
+ * @param {*} value A potentially Param-typed value.
+ * @param {(value: *) => Promise|void} update Update callback
+ * @returns the input value or (if a Param) the current Param value.
+ */
+export function handleParam(value, update) {
+  return isParam(value)
+    ? (value.addEventListener('value', update), value.value)
+    : value;
 }

package/src/marks/util/stats.js

@@ -20,6 +20,13 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+/**
+ * ibetainv function
+ * @param {number} p
+ * @param {number} a
+ * @param {number} b
+ * @returns {number}
+ */
 export function ibetainv(p, a, b) {
   var EPS = 1e-8;
   var a1 = a - 1;
@@ -60,11 +67,18 @@ export function ibetainv(p, a, b) {
   return x;
 }
 
+/**
+ * ibeta function
+ * @param {number} x
+ * @param {number} a
+ * @param {number} b
+ * @returns {number}
+ */
 export function ibeta(x, a, b) {
   // Factors in front of the continued fraction.
   var bt =
     x === 0 || x === 1 ? 0 : Math.exp(gammaln(a + b) - gammaln(a) - gammaln(b) + a * Math.log(x) + b * Math.log(1 - x));
-  if (x < 0 || x > 1) return false;
+  if (x < 0 || x > 1) return 0;
   if (x < (a + 1) / (a + b + 2))
     // Use continued fraction directly.
     return (bt * betacf(x, a, b)) / a;
@@ -72,6 +86,13 @@ export function ibeta(x, a, b) {
   return 1 - (bt * betacf(1 - x, b, a)) / b;
 }
 
+/**
+ * betacf function
+ * @param {number} x
+ * @param {number} a
+ * @param {number} b
+ * @returns {number}
+ */
 export function betacf(x, a, b) {
   var fpmin = 1e-30;
   var m = 1;
@@ -112,6 +133,11 @@ export function betacf(x, a, b) {
   return h;
 }
 
+/**
+ * gammaln function
+ * @param {number} x
+ * @returns {number}
+ */
 export function gammaln(x) {
   var j = 0;
   var cof = [
@@ -126,6 +152,12 @@ export function gammaln(x) {
   return Math.log((2.506628274631 * ser) / xx) - tmp;
 }
 
+/**
+ * qt function
+ * @param {number} p
+ * @param {number} dof
+ * @returns {number}
+ */
 export function qt(p, dof) {
   var x = ibetainv(2 * Math.min(p, 1 - p), 0.5 * dof, 0.5);
   x = Math.sqrt((dof * (1 - x)) / x);

package/src/marks/util/to-data-columns.js

@@ -0,0 +1,71 @@
+import { convertArrowColumn, isArrowTable } from '@uwdata/mosaic-core';
+
+/**
+ * @typedef {Array | Int8Array | Uint8Array | Uint8ClampedArray
+ *  | Int16Array | Uint16Array | Int32Array | Uint32Array
+ *  | Float32Array | Float64Array
+ * } Arrayish - an Array or TypedArray
+ */
+
+/**
+ * @typedef {
+ *  | { numRows: number, columns: Record<string,Arrayish> }
+ *  | { numRows: number, values: Arrayish; }
+ * } DataColumns
+*/
+
+/**
+ * Convert input data to a set of column arrays.
+ * @param {any} data The input data.
+ * @returns {DataColumns} An object with named column arrays.
+ */
+export function toDataColumns(data) {
+  return isArrowTable(data)
+    ? arrowToColumns(data)
+    : arrayToColumns(data);
+}
+
+/**
+ * Convert an Arrow table to a set of column arrays.
+ * @param {import('apache-arrow').Table} data An Apache Arrow Table.
+ * @returns {DataColumns} An object with named column arrays.
+ */
+function arrowToColumns(data) {
+  const { numRows, numCols, schema: { fields } } = data;
+  const columns = {};
+
+  for (let col = 0; col < numCols; ++col) {
+    const name = fields[col].name;
+    if (columns[name]) {
+      console.warn(`Redundant column name "${name}". Skipping...`);
+    } else {
+      columns[name] = convertArrowColumn(data.getChildAt(col));
+    }
+  }
+
+  return { numRows, columns };
+}
+
+/**
+ * Convert an array of values to a set of column arrays.
+ * If the array values are objects, build out named columns.
+ * We use the keys of the first object as the column names.
+ * Otherwise, use a special "values" array.
+ * @param {object[]} data An array of data objects.
+ * @returns {DataColumns} An object with named column arrays.
+ */
+function arrayToColumns(data) {
+  const numRows = data.length;
+  if (typeof data[0] === 'object') {
+    const names = numRows ? Object.keys(data[0]) : [];
+    const columns = {};
+    if (names.length > 0) {
+      names.forEach(name => {
+        columns[name] = data.map(d => d[name]);
+      });
+    }
+    return { numRows, columns };
+  } else {
+    return { numRows, values: data };
+  }
+}