@uwdata/mosaic-plot 0.7.1 → 0.8.0

package/src/plot-attributes.js

@@ -14,7 +14,6 @@ export const attributeMap = new Map([
   ['grid', 'grid'],
   ['label', 'label'],
   ['padding', 'padding'],
-  ['round', 'round'],
   ['xScale', 'x.type'],
   ['xDomain', 'x.domain'],
   ['xRange', 'x.range'],
@@ -39,10 +38,12 @@ export const attributeMap = new Map([
   ['xLine', 'x.line'],
   ['xLabel', 'x.label'],
   ['xLabelAnchor', 'x.labelAnchor'],
+  ['xLabelArrow', 'x.labelArrow'],
   ['xLabelOffset', 'x.labelOffset'],
   ['xFontVariant', 'x.fontVariant'],
   ['xAriaLabel', 'x.ariaLabel'],
   ['xAriaDescription', 'x.ariaDescription'],
+  ['xPercent', 'x.percent'],
   ['xReverse', 'x.reverse'],
   ['xZero', 'x.zero'],
   ['xBase', 'x.base'],
@@ -72,10 +73,12 @@ export const attributeMap = new Map([
   ['yLine', 'y.line'],
   ['yLabel', 'y.label'],
   ['yLabelAnchor', 'y.labelAnchor'],
+  ['yLabelArrow', 'y.labelArrow'],
   ['yLabelOffset', 'y.labelOffset'],
   ['yFontVariant', 'y.fontVariant'],
   ['yAriaLabel', 'y.ariaLabel'],
   ['yAriaDescription', 'y.ariaDescription'],
+  ['yPercent', 'y.percent'],
   ['yReverse', 'y.reverse'],
   ['yZero', 'y.zero'],
   ['yBase', 'y.base'],
@@ -90,7 +93,6 @@ export const attributeMap = new Map([
   ['facetLabel', 'facet.label'],
   ['fxDomain', 'fx.domain'],
   ['fxRange', 'fx.range'],
-  ['fxNice', 'fx.nice'],
   ['fxInset', 'fx.inset'],
   ['fxInsetLeft', 'fx.insetLeft'],
   ['fxInsetRight', 'fx.insetRight'],
@@ -117,7 +119,6 @@ export const attributeMap = new Map([
   ['fxReverse', 'fx.reverse'],
   ['fyDomain', 'fy.domain'],
   ['fyRange', 'fy.range'],
-  ['fyNice', 'fy.mice'],
   ['fyInset', 'fy,inset'],
   ['fyInsetTop', 'fy.insetTop'],
   ['fyInsetBottom', 'fy.insetBottom'],
@@ -153,6 +154,7 @@ export const attributeMap = new Map([
   ['colorPivot', 'color.pivot'],
   ['colorSymmetric', 'color.symmetric'],
   ['colorLabel', 'color.label'],
+  ['colorPercent', 'color.percent'],
   ['colorReverse', 'color.reverse'],
   ['colorZero', 'color.zero'],
   ['colorTickFormat', 'color.tickFormat'],
@@ -165,17 +167,22 @@ export const attributeMap = new Map([
   ['opacityClamp', 'opacity.clamp'],
   ['opacityNice', 'opacity.nice'],
   ['opacityLabel', 'opacity.label'],
+  ['opacityPercent', 'opacity.percent'],
   ['opacityReverse', 'opacity.reverse'],
   ['opacityZero', 'opacity.zero'],
   ['opacityTickFormat', 'opacity.tickFormat'],
   ['opacityBase', 'opacity.base'],
   ['opacityExponent', 'opacity.exponent'],
   ['opacityConstant', 'opacity.constant'],
+  ['symbolScale', 'symbol.type'],
+  ['symbolDomain', 'symbol.domain'],
+  ['symbolRange', 'symbol.range'],
   ['rScale', 'r.type'],
   ['rDomain', 'r.domain'],
   ['rRange', 'r.range'],
   ['rClamp', 'r.clamp'],
   ['rNice', 'r.nice'],
+  ['rPercent', 'r.percent'],
   ['rZero', 'r.zero'],
   ['rBase', 'r.base'],
   ['rExponent', 'r.exponent'],
@@ -185,6 +192,7 @@ export const attributeMap = new Map([
   ['lengthRange', 'length.range'],
   ['lengthClamp', 'length.clamp'],
   ['lengthNice', 'length.nice'],
+  ['lengthPercent', 'length.percent'],
   ['lengthZero', 'length.zero'],
   ['lengthBase', 'length.base'],
   ['lengthExponent', 'length.exponent'],

package/src/plot-renderer.js

@@ -1,6 +1,7 @@
 import * as Plot from '@observablehq/plot';
 import { setAttributes } from './plot-attributes.js';
 import { Fixed } from './symbols.js';
+import { isArrowTable } from '@uwdata/mosaic-core';
 
 const OPTIONS_ONLY_MARKS = new Set([
   'frame',
@@ -25,6 +26,22 @@ export async function plotRenderer(plot) {
     for (const { type, data, options } of mark.plotSpecs()) {
       if (OPTIONS_ONLY_MARKS.has(type)) {
         spec.marks.push(Plot[type](options));
+      } else if (isArrowTable(data)) {
+        // optimized calls to Plot for Arrow:
+        // https://github.com/observablehq/plot/issues/191#issuecomment-2010986851
+        const opts = Object.fromEntries(
+          Object.entries(options).map(([k, v]) => {
+            let val = v;
+            if (typeof v === 'string') {
+              val = data.getChild(v) ?? v;
+            } else if (typeof v === 'object') {
+              const value = data.getChild(v.value);
+              val = value ? {value} : v;
+            }
+            return [k, val]
+          })
+        );
+        spec.marks.push(Plot[type]({length: data.numRows}, opts));
       } else {
         spec.marks.push(Plot[type](data, options));
       }
@@ -148,10 +165,13 @@ function annotateMarks(svg, indices) {
 }
 
 function getType(data, channel) {
-  for (const row of data) {
-    const v = row[channel] ?? row[channel+'1'] ?? row[channel+'2'];
-    if (v != null) {
-      return v instanceof Date ? 'date' : typeof v;
+  const { columns } = data;
+  const col = columns[channel] ?? columns[channel+'1'] ?? columns[channel+'2'];
+  if (col) {
+    for (const v of col) {
+      if (v != null) {
+        return v instanceof Date ? 'date' : typeof v;
+      }
     }
   }
 }

package/src/plot.js

@@ -72,10 +72,20 @@ export class Plot {
     this.synch.resolve();
   }
 
+  /**
+   * @param {string} name The attribute to return.
+   * @returns {*} The value of the attribute.
+   */
   getAttribute(name) {
     return this.attributes[name];
   }
 
+  /**
+   * @param {string} name The name of the attribute to set.
+   * @param {*} value The value to set.
+   * @param {{silent: boolean}} [options] Options for setting the attribute.
+   * @returns {boolean} whether the value changed.
+   */
   setAttribute(name, value, options) {
     if (distinct(this.attributes[name], value)) {
       if (value === undefined) {
@@ -91,6 +101,11 @@ export class Plot {
     return false;
   }
 
+  /**
+   * @param {string} name The attribute name.
+   * @param {*} callback The function to call when the attribute changes.
+   * @returns {this}
+   */
   addAttributeListener(name, callback) {
     const map = this.listeners || (this.listeners = new Map);
     if (!map.has(name)) map.set(name, new Set);
@@ -98,6 +113,11 @@ export class Plot {
     return this;
   }
 
+  /**
+   * @param {string} name The attribute name.
+   * @param {*} callback The function to call when the attribute changes.
+   * @returns {void}
+   */
   removeAttributeListener(name, callback) {
     return this.listeners?.get(name)?.delete(callback);
   }

package/src/marks/util/interpolate.js

@@ -1,205 +0,0 @@
-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/to-data-array.js

@@ -1,50 +0,0 @@
-import { convertArrowValue, isArrowTable } from '@uwdata/mosaic-core';
-
-export function toDataArray(data) {
-  return isArrowTable(data) ? arrowToObjects(data) : data;
-}
-
-/**
- * Convert Apache Arrow tables to an array of vanilla JS objects.
- * The internal conversions performed by the Arrow JS lib may not
- * always produce values properly interpreted by Observable Plot.
- * In addition, the Arrow JS lib uses Proxy objects to create
- * row (tuple) objects, which can introduce some perf overhead.
- * This method provides custom conversions of data that we can hand
- * to Observable Plot. Internally, Plot will copy input data values
- * into an array-based columnar organizations. If in the future Plot
- * provides an efficient path to directly pass in columnar-data, we
- * can revisit this method.
- */
-export function arrowToObjects(data) {
-  const { batches, numRows: length } = data;
-
-  // return an empty array for empty tables
-  if (!length) return [];
-
-  // pre-allocate output objects
-  const objects = Array.from({ length }, () => ({}));
-
-  // for each row batch...
-  for (let k = 0, b = 0; b < batches.length; ++b) {
-    const batch = batches[b];
-    const { schema, numRows, numCols } = batch;
-
-    // for each column...
-    for (let j = 0; j < numCols; ++j) {
-      const child = batch.getChildAt(j);
-      const { name, type } = schema.fields[j];
-      const valueOf = convertArrowValue(type);
-
-      // for each row in the current batch...
-      for (let o = k, i = 0; i < numRows; ++i, ++o) {
-        // extract/convert value from arrow, copy to output object
-        objects[o][name] = valueOf(child.get(i));
-      }
-    }
-
-    k += numRows;
-  }
-
-  return objects;
-}