@uwdata/mosaic-plot 0.7.1 → 0.9.0

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/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

@@ -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,8 +152,102 @@ 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);
   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/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 };
+  }
+}