@uwdata/mosaic-plot 0.6.0 → 0.7.0

package/src/marks/util/interpolate.js

@@ -0,0 +1,205 @@
+import { Delaunay, randomLcg } from 'd3';
+
+// Derived from Observable Plot’s interpolatorBarycentric:
+// https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/marks/raster.js#L283-L334
+
+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
+    );
+  };
+}
+
+// Derived from Observable Plot’s interpolateNearest:
+// https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/marks/raster.js#L410-L428
+
+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;
+}
+
+// Derived from Observable Plot’s interpolatorRandomWalk:
+// https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/marks/raster.js#L430-L462
+
+// 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/marks/util/is-color.js

@@ -1,5 +1,8 @@
 import { color } from 'd3';
 
+// Derived from Observable Plot’s isColor:
+// https://github.com/observablehq/plot/blob/a063b226fec284c5b0e973701fdbbb244ef9ac2c/src/options.js#L462-L477
+
 // Mostly relies on d3-color, with a few extra color keywords. Currently this
 // strictly requires that the value be a string; we might want to apply string
 // coercion here, though note that d3-color instances would need to support

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

@@ -1,4 +1,4 @@
-import { convertArrow, isArrowTable } from './arrow.js';
+import { convertArrowValue, isArrowTable } from '@uwdata/mosaic-core';
 
 export function toDataArray(data) {
   return isArrowTable(data) ? arrowToObjects(data) : data;
@@ -34,7 +34,7 @@ export function arrowToObjects(data) {
     for (let j = 0; j < numCols; ++j) {
       const child = batch.getChildAt(j);
       const { name, type } = schema.fields[j];
-      const valueOf = convertArrow(type);
+      const valueOf = convertArrowValue(type);
 
       // for each row in the current batch...
       for (let o = k, i = 0; i < numRows; ++i, ++o) {

package/src/plot-renderer.js

@@ -9,8 +9,6 @@ const OPTIONS_ONLY_MARKS = new Set([
   'graticule'
 ]);
 
-
-
 // construct Plot output
 // see https://github.com/observablehq/plot
 export async function plotRenderer(plot) {
@@ -76,17 +74,17 @@ function setSymbolAttributes(plot, svg, attributes, symbols) {
 
 function inferLabels(spec, plot) {
   const { marks } = plot;
-  inferLabel('x', spec, marks, ['x', 'x1', 'x2']);
-  inferLabel('y', spec, marks, ['y', 'y1', 'y2']);
+  inferLabel('x', spec, marks);
+  inferLabel('y', spec, marks);
   inferLabel('fx', spec, marks);
   inferLabel('fy', spec, marks);
 }
 
-function inferLabel(key, spec, marks, channels = [key]) {
+function inferLabel(key, spec, marks) {
   const scale = spec[key] || {};
   if (scale.axis === null || scale.label !== undefined) return; // nothing to do
 
-  const fields = marks.map(mark => mark.channelField(channels)?.field);
+  const fields = marks.map(mark => mark.channelField(key)?.field);
   if (fields.every(x => x == null)) return; // no columns found
 
   // check for consistent columns / labels
@@ -100,7 +98,7 @@ function inferLabel(key, spec, marks, channels = [key]) {
     } else if (candCol === undefined && candLabel === undefined) {
       candCol = column;
       candLabel = label;
-      type = getType(marks[i].data, channels) || 'number';
+      type = getType(marks[i].data, key) || 'number';
     } else if (candLabel !== label) {
       candLabel = undefined;
     } else if (candCol !== column) {
@@ -149,13 +147,11 @@ function annotateMarks(svg, indices) {
   }
 }
 
-function getType(data, channels) {
+function getType(data, channel) {
   for (const row of data) {
-    for (let j = 0; j < channels.length; ++j) {
-      const v = row[channels[j]];
-      if (v != null) {
-        return v instanceof Date ? 'date' : typeof v;
-      }
+    const v = row[channel] ?? row[channel+'1'] ?? row[channel+'2'];
+    if (v != null) {
+      return v instanceof Date ? 'date' : typeof v;
     }
   }
 }

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) {

package/src/transforms/bin.js

@@ -24,12 +24,12 @@ function binField(mark, channel, column, options) {
   return {
     column,
     label: column,
-    get stats() { return ['min', 'max']; },
+    get stats() { return { column, stats: ['min', 'max'] }; },
     get columns() { return [column]; },
     get basis() { return column; },
     toString() {
       const { apply, sqlApply, sqlInvert } = channelScale(mark, channel);
-      const { min, max } = mark.stats[column];
+      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})`;

package/src/marks/util/arrow.js

@@ -1,25 +0,0 @@
-export const INTEGER = 2;
-export const FLOAT = 3;
-export const DECIMAL = 7;
-export const TIMESTAMP = 10;
-
-export function isArrowTable(values) {
-  return typeof values?.getChild === 'function';
-}
-
-export function convertArrow(type) {
-  const { typeId } = type;
-
-  // map timestamp numbers to date objects
-  if (typeId === TIMESTAMP) {
-    return v => v == null ? v : new Date(v);
-  }
-
-  // map bignum to number
-  if (typeId === INTEGER && type.bitWidth >= 64) {
-    return v => v == null ? v : Number(v);
-  }
-
-  // otherwise use Arrow JS defaults
-  return v => v;
-}