@uwdata/mosaic-plot 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "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-core": "^0.6.1",
     "@uwdata/mosaic-sql": "^0.6.0",
     "d3": "^7.8.5",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "51517b28e916e355f4ce0dc6e98aef3a1db3f7b2"
+  "gitHead": "9e788e6dc5241fa1c54967a25fd9599f97da1a41"
 }

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';
@@ -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/util/arrow.js

@@ -7,6 +7,17 @@ export function isArrowTable(values) {
   return typeof values?.getChild === 'function';
 }
 
+export function convertArrowType(type) {
+  switch (type.typeId) {
+    case INTEGER:
+    case FLOAT:
+    case DECIMAL:
+      return Float64Array;
+    default:
+      return Array;
+  }
+}
+
 export function convertArrow(type) {
   const { typeId } = type;
 
@@ -23,3 +34,22 @@ export function convertArrow(type) {
   // otherwise use Arrow JS defaults
   return v => v;
 }
+
+export function convertArrowColumn(column) {
+  const { type } = column;
+  const { typeId } = type;
+
+  // map bignum to number
+  if (typeId === INTEGER && type.bitWidth >= 64) {
+    const size = column.length;
+    const array = new Float64Array(size);
+    for (let row = 0; row < size; ++row) {
+      const v = column.get(row);
+      array[row] = v == null ? NaN : Number(v);
+    }
+    return array;
+  }
+
+  // otherwise use Arrow JS defaults
+  return column.toArray();
+}

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/grid.js

@@ -1,17 +1,9 @@
 import { InternSet, ascending } from 'd3';
-import { DECIMAL, FLOAT, INTEGER, isArrowTable } from './arrow.js';
+import { convertArrowColumn, convertArrowType, isArrowTable } from './arrow.js';
 
 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;
-    }
+    return convertArrowType(values.getChild(name).type);
   } else {
     return typeof values[0][name] === 'number' ? Float64Array : Array;
   }
@@ -22,27 +14,13 @@ export function grid1d(n, values) {
   return valuesToGrid(new Type(n), values);
 }
 
-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') {
   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 +33,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 +70,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);

package/src/marks/util/interpolate.js

@@ -0,0 +1,196 @@
+import { Delaunay, randomLcg } from 'd3';
+
+export function interpolatorBarycentric({random = randomLcg(42)} = {}) {
+  return (index, width, height, X, Y, V, W) => {
+    // Interpolate the interior of all triangles with barycentric coordinates
+    const {points, triangles, hull} = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
+    const S = new Uint8Array(width * height); // 1 if pixel has been seen.
+    const mix = mixer(V, random);
+
+    for (let i = 0; i < triangles.length; i += 3) {
+      const ta = triangles[i];
+      const tb = triangles[i + 1];
+      const tc = triangles[i + 2];
+      const Ax = points[2 * ta];
+      const Bx = points[2 * tb];
+      const Cx = points[2 * tc];
+      const Ay = points[2 * ta + 1];
+      const By = points[2 * tb + 1];
+      const Cy = points[2 * tc + 1];
+      const x1 = Math.min(Ax, Bx, Cx);
+      const x2 = Math.max(Ax, Bx, Cx);
+      const y1 = Math.min(Ay, By, Cy);
+      const y2 = Math.max(Ay, By, Cy);
+      const z = (By - Cy) * (Ax - Cx) + (Ay - Cy) * (Cx - Bx);
+      if (!z) continue;
+      const va = V[index[ta]];
+      const vb = V[index[tb]];
+      const vc = V[index[tc]];
+      for (let x = Math.floor(x1); x < x2; ++x) {
+        for (let y = Math.floor(y1); y < y2; ++y) {
+          if (x < 0 || x >= width || y < 0 || y >= height) continue;
+          const xp = x + 0.5; // sample pixel centroids
+          const yp = y + 0.5;
+          const ga = ((By - Cy) * (xp - Cx) + (yp - Cy) * (Cx - Bx)) / z;
+          if (ga < 0) continue;
+          const gb = ((Cy - Ay) * (xp - Cx) + (yp - Cy) * (Ax - Cx)) / z;
+          if (gb < 0) continue;
+          const gc = 1 - ga - gb;
+          if (gc < 0) continue;
+          const i = x + width * y;
+          W[i] = mix(va, ga, vb, gb, vc, gc, x, y);
+          S[i] = 1;
+        }
+      }
+    }
+    extrapolateBarycentric(W, S, X, Y, V, width, height, hull, index, mix);
+    return W;
+  };
+}
+
+// Extrapolate by finding the closest point on the hull.
+function extrapolateBarycentric(W, S, X, Y, V, width, height, hull, index, mix) {
+  X = Float64Array.from(hull, (i) => X[index[i]]);
+  Y = Float64Array.from(hull, (i) => Y[index[i]]);
+  V = Array.from(hull, (i) => V[index[i]]);
+  const n = X.length;
+  const rays = Array.from({length: n}, (_, j) => ray(j, X, Y));
+  let k = 0;
+  for (let y = 0; y < height; ++y) {
+    const yp = y + 0.5;
+    for (let x = 0; x < width; ++x) {
+      const i = x + width * y;
+      if (!S[i]) {
+        const xp = x + 0.5;
+        for (let l = 0; l < n; ++l) {
+          const j = (n + k + (l % 2 ? (l + 1) / 2 : -l / 2)) % n;
+          if (rays[j](xp, yp)) {
+            const t = segmentProject(X.at(j - 1), Y.at(j - 1), X[j], Y[j], xp, yp);
+            W[i] = mix(V.at(j - 1), t, V[j], 1 - t, V[j], 0, x, y);
+            k = j;
+            break;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Projects a point p = [x, y] onto the line segment [p1, p2], returning the
+// projected coordinates p’ as t in [0, 1] with p’ = t p1 + (1 - t) p2.
+function segmentProject(x1, y1, x2, y2, x, y) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const a = dx * (x2 - x) + dy * (y2 - y);
+  const b = dx * (x - x1) + dy * (y - y1);
+  return a > 0 && b > 0 ? a / (a + b) : +(a > b);
+}
+
+function cross(xa, ya, xb, yb) {
+  return xa * yb - xb * ya;
+}
+
+function ray(j, X, Y) {
+  const n = X.length;
+  const xc = X.at(j - 2);
+  const yc = Y.at(j - 2);
+  const xa = X.at(j - 1);
+  const ya = Y.at(j - 1);
+  const xb = X[j];
+  const yb = Y[j];
+  const xd = X.at(j + 1 - n);
+  const yd = Y.at(j + 1 - n);
+  const dxab = xa - xb;
+  const dyab = ya - yb;
+  const dxca = xc - xa;
+  const dyca = yc - ya;
+  const dxbd = xb - xd;
+  const dybd = yb - yd;
+  const hab = Math.hypot(dxab, dyab);
+  const hca = Math.hypot(dxca, dyca);
+  const hbd = Math.hypot(dxbd, dybd);
+  return (x, y) => {
+    const dxa = x - xa;
+    const dya = y - ya;
+    const dxb = x - xb;
+    const dyb = y - yb;
+    return (
+      cross(dxa, dya, dxb, dyb) > -1e-6 &&
+      cross(dxa, dya, dxab, dyab) * hca - cross(dxa, dya, dxca, dyca) * hab > -1e-6 &&
+      cross(dxb, dyb, dxbd, dybd) * hab - cross(dxb, dyb, dxab, dyab) * hbd <= 0
+    );
+  };
+}
+
+export function interpolateNearest(index, width, height, X, Y, V, W) {
+  const delaunay = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
+  // memoization of delaunay.find for the line start (iy) and pixel (ix)
+  let iy, ix;
+  for (let y = 0.5, k = 0; y < height; ++y) {
+    ix = iy;
+    for (let x = 0.5; x < width; ++x, ++k) {
+      ix = delaunay.find(x, y, ix);
+      if (x === 0.5) iy = ix;
+      W[k] = V[index[ix]];
+    }
+  }
+  return W;
+}
+
+// https://observablehq.com/@observablehq/walk-on-spheres-precision
+export function interpolatorRandomWalk({random = randomLcg(42), minDistance = 0.5, maxSteps = 2} = {}) {
+  return (index, width, height, X, Y, V, W) => {
+    const delaunay = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
+    // memoization of delaunay.find for the line start (iy), pixel (ix), and wos step (iw)
+    let iy, ix, iw;
+    for (let y = 0.5, k = 0; y < height; ++y) {
+      ix = iy;
+      for (let x = 0.5; x < width; ++x, ++k) {
+        let cx = x;
+        let cy = y;
+        iw = ix = delaunay.find(cx, cy, ix);
+        if (x === 0.5) iy = ix;
+        let distance; // distance to closest sample
+        let step = 0; // count of steps for this walk
+        while ((distance = Math.hypot(X[index[iw]] - cx, Y[index[iw]] - cy)) > minDistance && step < maxSteps) {
+          const angle = random(x, y, step) * 2 * Math.PI;
+          cx += Math.cos(angle) * distance;
+          cy += Math.sin(angle) * distance;
+          iw = delaunay.find(cx, cy, iw);
+          ++step;
+        }
+        W[k] = V[index[iw]];
+      }
+    }
+    return W;
+  };
+}
+
+function blend(a, ca, b, cb, c, cc) {
+  return ca * a + cb * b + cc * c;
+}
+
+function pick(random) {
+  return (a, ca, b, cb, c, cc, x, y) => {
+    const u = random(x, y);
+    return u < ca ? a : u < ca + cb ? b : c;
+  };
+}
+
+function mixer(F, random) {
+  return isNumeric(F) || isTemporal(F) ? blend : pick(random);
+}
+
+function isNumeric(values) {
+  for (const value of values) {
+    if (value == null) continue;
+    return typeof value === "number";
+  }
+}
+
+function isTemporal(values) {
+  for (const value of values) {
+    if (value == null) continue;
+    return value instanceof Date;
+  }
+}

package/src/plot.js

@@ -39,9 +39,14 @@ export class Plot {
     return this.getAttribute('width') - left - right;
   }
 
-  innerHeight() {
+  innerHeight(defaultValue = 400) {
     const { top, bottom } = this.margins();
-    return this.getAttribute('height') - top - bottom;
+    let h = this.getAttribute('height');
+    if (h == null && defaultValue != null) {
+      h = defaultValue; // TODO could apply more nuanced logic here
+      this.setAttribute('height', h, { silent: true });
+    }
+    return h - top - bottom;
   }
 
   pending(mark) {