@uwdata/mosaic-plot 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -10,7 +10,7 @@
     "mosaic"
   ],
   "license": "BSD-3-Clause",
-  "author": "Jeffrey Heer (http://idl.cs.washington.edu)",
+  "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -28,11 +28,11 @@
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.14",
-    "@uwdata/mosaic-core": "^0.8.0",
-    "@uwdata/mosaic-sql": "^0.8.0",
+    "@observablehq/plot": "^0.6.15",
+    "@uwdata/mosaic-core": "^0.10.0",
+    "@uwdata/mosaic-sql": "^0.10.0",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "a24b4c9f7dfa1c38c6af96ec17e075326c1af9b0"
+  "gitHead": "94fc4f0d4efc622001f6afd6714d1e9dda745be2"
 }

package/src/index.js

@@ -8,6 +8,7 @@ export { ContourMark } from './marks/ContourMark.js';
 export { DenseLineMark } from './marks/DenseLineMark.js';
 export { Density1DMark } from './marks/Density1DMark.js';
 export { Density2DMark } from './marks/Density2DMark.js';
+export { ErrorBarMark } from './marks/ErrorBarMark.js';
 export { GeoMark } from './marks/GeoMark.js';
 export { Grid2DMark } from './marks/Grid2DMark.js';
 export { HexbinMark } from './marks/HexbinMark.js';

package/src/interactors/Highlight.js

@@ -69,7 +69,8 @@ export class Highlight {
     for (let i = 0; i < nodes.length; ++i) {
       const node = nodes[i];
       const base = values[i];
-      const t = test(node.__data__);
+      const data = node.__data__;
+      const t = test(Array.isArray(data) ? data[0] : data);
       // TODO? handle inherited values / remove attributes
       for (let j = 0; j < channels.length; ++j) {
         const [attr, value] = channels[j];
@@ -91,9 +92,11 @@ async function predicateFunction(mark, selection) {
 
   const s = { __: and(pred) };
   const q = mark.query(filter);
-  const p = q.groupby().length ? q.select(s) : q.$select(s);
+  (q.queries || [q]).forEach(q => {
+    q.groupby().length ? q.select(s) : q.$select(s);
+  });
 
-  const data = await mark.coordinator.query(p);
+  const data = await mark.coordinator.query(q);
   const v = data.getChild?.('__');
   return !(data.numRows || data.length) ? (() => false)
     : v ? (i => v.get(i))

package/src/interactors/Interval1D.js

@@ -1,5 +1,5 @@
-import { select, min, max } from 'd3';
-import { isBetween } from '@uwdata/mosaic-sql';
+import { clauseInterval } from '@uwdata/mosaic-core';
+import { ascending, min, max, select } from 'd3';
 import { brushX, brushY } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { getField } from './util/get-field.js';
@@ -52,13 +52,12 @@ export class Interval1D {
 
   clause(value) {
     const { mark, pixelSize, field, scale } = this;
-    return {
+    return clauseInterval(field, value, {
       source: this,
-      schema: { type: 'interval', pixelSize, scales: [scale] },
       clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
+      scale,
+      pixelSize
+    });
   }
 
   init(svg, root) {
@@ -69,6 +68,7 @@ export class Interval1D {
     const ry = svg.scale('y').range;
     brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
 
+    const range = this.value?.map(this.scale.apply).sort(ascending);
     const facets = select(svg).selectAll('g[aria-label="facet"]');
     root = facets.size() ? facets : select(root ?? svg);
     this.g = root
@@ -76,7 +76,7 @@ export class Interval1D {
       .attr('class', `interval-${channel}`)
       .each(patchScreenCTM)
       .call(brush)
-      .call(brush.moveSilent, this.value?.map(this.scale.apply));
+      .call(brush.moveSilent, range);
 
     if (style) {
       const brushes = this.g.selectAll('rect.selection');

package/src/interactors/Interval2D.js

@@ -1,5 +1,5 @@
-import { select, min, max } from 'd3';
-import { and, isBetween } from '@uwdata/mosaic-sql';
+import { clauseIntervals } from '@uwdata/mosaic-core';
+import { ascending, min, max, select } from 'd3';
 import { brush } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { getField } from './util/get-field.js';
@@ -7,8 +7,6 @@ import { invert } from './util/invert.js';
 import { patchScreenCTM } from './util/patchScreenCTM.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
-const asc = (a, b) => a - b;
-
 export class Interval2D {
   constructor(mark, {
     selection,
@@ -44,8 +42,8 @@ export class Interval2D {
     let yr = undefined;
     if (extent) {
       const [a, b] = extent;
-      xr = [a[0], b[0]].map(v => invert(v, xscale, pixelSize)).sort(asc);
-      yr = [a[1], b[1]].map(v => invert(v, yscale, pixelSize)).sort(asc);
+      xr = [a[0], b[0]].map(v => invert(v, xscale, pixelSize)).sort(ascending);
+      yr = [a[1], b[1]].map(v => invert(v, yscale, pixelSize)).sort(ascending);
     }
 
     if (!closeTo(xr, value?.[0]) || !closeTo(yr, value?.[1])) {
@@ -57,15 +55,12 @@ export class Interval2D {
 
   clause(value) {
     const { mark, pixelSize, xfield, yfield, xscale, yscale } = this;
-    return {
+    return clauseIntervals([xfield, yfield], value, {
       source: this,
-      schema: { type: 'interval', pixelSize, scales: [xscale, yscale] },
       clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate: value
-        ? and(isBetween(xfield, value[0]), isBetween(yfield, value[1]))
-        : null
-    };
+      scales: [xscale, yscale],
+      pixelSize
+    });
   }
 
   init(svg) {
@@ -92,8 +87,8 @@ export class Interval2D {
     }
 
     if (this.value) {
-      const [x1, x2] = this.value[0].map(xscale.apply).sort(asc);
-      const [y1, y2] = this.value[1].map(yscale.apply).sort(asc);
+      const [x1, x2] = this.value[0].map(xscale.apply).sort(ascending);
+      const [y1, y2] = this.value[1].map(yscale.apply).sort(ascending);
       this.g.call(brush.moveSilent, [[x1, y1], [x2, y2]]);
     }
 

package/src/interactors/Nearest.js

@@ -1,66 +1,112 @@
-import { isSelection } from '@uwdata/mosaic-core';
-import { eq, literal } from '@uwdata/mosaic-sql';
+import { clausePoints, isSelection } from '@uwdata/mosaic-core';
 import { select, pointer } from 'd3';
 import { getField } from './util/get-field.js';
 
 export class Nearest {
   constructor(mark, {
     selection,
-    channel,
-    field
+    pointer,
+    channels,
+    fields,
+    maxRadius = 40
   }) {
     this.mark = mark;
     this.selection = selection;
     this.clients = new Set().add(mark);
-    this.channel = channel;
-    this.field = field || getField(mark, [channel]);
+    this.pointer = pointer;
+    this.channels = channels || (
+      pointer === 'x' ? ['x'] : pointer === 'y' ? ['y'] : ['x', 'y']
+    );
+    this.fields = fields || this.channels.map(c => getField(mark, [c]));
+    this.maxRadius = maxRadius;
+    this.valueIndex = -1;
   }
 
   clause(value) {
-    const { clients, field } = this;
-    const predicate = value ? eq(field, literal(value)) : null;
-    return {
+    const { clients, fields } = this;
+    return clausePoints(fields, value ? [value] : value, {
       source: this,
-      schema: { type: 'point' },
-      clients,
-      value,
-      predicate
-    };
+      clients
+    });
   }
 
   init(svg) {
     const that = this;
-    const { mark, channel, selection } = this;
-    const { data } = mark;
-    const key = mark.channelField(channel).as;
+    const { mark, channels, selection, maxRadius } = this;
+    const { data: { columns } } = mark;
+    const keys = channels.map(c => mark.channelField(c).as);
+    const param = !isSelection(selection);
 
     const facets = select(svg).selectAll('g[aria-label="facet"]');
     const root = facets.size() ? facets : select(svg);
-    const scale = svg.scale(channel);
-    const param = !isSelection(selection);
 
-    root.on('pointerdown pointermove', function(evt) {
-      const [x, y] = pointer(evt, this);
-      const z = findNearest(data.columns[key], scale.invert(channel === 'x' ? x : y));
-      selection.update(param ? z : that.clause(z));
+    // extract x, y coordinates for data values and determine scale factors
+    const xscale = svg.scale('x').apply;
+    const yscale = svg.scale('y').apply;
+    const X = Array.from(columns[mark.channelField('x').as], xscale);
+    const Y = Array.from(columns[mark.channelField('y').as], yscale);
+    const sx = this.pointer === 'y' ? 0.01 : 1;
+    const sy = this.pointer === 'x' ? 0.01 : 1;
+
+    // find value nearest to pointer and update param or selection
+    // we don't pass undefined values to params, but do allow empty selections
+    root.on('pointerenter pointerdown pointermove', function(evt) {
+      const [px, py] = pointer(evt, this);
+      const i = findNearest(X, Y, px, py, sx, sy, maxRadius);
+      if (i !== this.valueIndex) {
+        this.valueIndex = i;
+        const v = i < 0 ? undefined : keys.map(k => columns[k][i]);
+        if (param) {
+          if (i > -1) selection.update(v.length > 1 ? v : v[0]);
+        } else {
+          selection.update(that.clause(v));
+        }
+      }
     });
 
+    // if not a selection, we're done
     if (param) return;
+
+    // clear selection upon pointer exit
+    root.on('pointerleave', () => {
+      selection.update(that.clause(undefined));
+    });
+
+    // trigger activation updates
     svg.addEventListener('pointerenter', evt => {
-      if (!evt.buttons) this.selection.activate(this.clause(0));
+      if (!evt.buttons) {
+        const v = this.channels.map(() => 0);
+        selection.activate(this.clause(v));
+      }
     });
   }
 }
 
-function findNearest(values, value) {
-  let dist = Infinity;
-  let nearest;
-
-  for (let i = 0; i < values.length; ++i) {
-    const delta = Math.abs(values[i] - value);
-    if (delta < dist) {
-      dist = delta;
-      nearest = values[i];
+/**
+ * Find the nearest data point to the pointer. The nearest point
+ * is found via Euclidean distance, but with scale factors *sx* and
+ * *sy* applied to the x and y distances. For example, to prioritize
+ * selection along the x-axis, use *sx* = 1, *sy* = 0.01.
+ * @param {number[]} x Array of data point x coordinate values.
+ * @param {number[]} y Array of data point y coordinate values.
+ * @param {number} px The x coordinate of the pointer.
+ * @param {number} py The y coordinate of the pointer.
+ * @param {number} sx A scale factor for x coordinate spans.
+ * @param {number} sy A scale factor for y coordinate spans.
+ * @param {number} maxRadius The maximum pointer distance for selection.
+ * @returns {number} An integer index into the data array corresponding
+ *  to the nearest data point, or -1 if no nearest point is found.
+ */
+function findNearest(x, y, px, py, sx, sy, maxRadius) {
+  let dist = maxRadius * maxRadius;
+  let nearest = -1;
+  for (let i = 0; i < x.length; ++i) {
+    const dx = sx * (x[i] - px);
+    const dy = sy * (y[i] - py);
+    const dd = dx * dx + dy * dy;
+    if (dd <= dist) {
+      dist = dd;
+      nearest = i;
     }
   }
   return nearest;

package/src/interactors/PanZoom.js

@@ -1,6 +1,5 @@
+import { Selection, clauseInterval } from '@uwdata/mosaic-core';
 import { select, zoom, ZoomTransform } from 'd3';
-import { Selection } from '@uwdata/mosaic-core';
-import { isBetween } from '@uwdata/mosaic-sql';
 import { getField } from './util/get-field.js';
 
 const asc = (a, b) => a - b;
@@ -49,13 +48,11 @@ export class PanZoom {
   }
 
   clause(value, field, scale) {
-    return {
+    return clauseInterval(field, value, {
       source: this,
-      schema: { type: 'interval', scales: [scale] },
       clients: this.mark.plot.markSet,
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
+      scale
+    });
   }
 
   init(svg) {

package/src/interactors/Toggle.js

@@ -1,4 +1,4 @@
-import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
+import { clausePoints } from '@uwdata/mosaic-core';
 
 export class Toggle {
   /**
@@ -14,49 +14,40 @@ export class Toggle {
     this.mark = mark;
     this.selection = selection;
     this.peers = peers;
-    this.channels = channels.map(c => {
+    const fields = this.fields = [];
+    const as = this.as = [];
+    channels.forEach(c => {
       const q = c === 'color' ? ['color', 'fill', 'stroke']
         : c === 'x' ? ['x', 'x1', 'x2']
         : c === 'y' ? ['y', 'y1', 'y2']
         : [c];
       for (let i = 0; i < q.length; ++i) {
         const f = mark.channelField(q[i], { exact: true });
-        if (f) return {
-          field: f.field?.basis || f.field,
-          as: f.as
-        };
+        if (f) {
+          fields.push(f.field?.basis || f.field);
+          as.push(f.as);
+          return;
+        }
       }
       throw new Error(`Missing channel: ${c}`);
     });
   }
 
   clause(value) {
-    const { channels, mark } = this;
-    let predicate = null;
-
-    if (value) {
-      const clauses = value.map(vals => {
-        const list = vals.map((v, i) => {
-          return isNotDistinct(channels[i].field, literal(v));
-        });
-        return list.length > 1 ? and(list) : list[0];
-      });
-      predicate = clauses.length > 1 ? or(clauses) : clauses[0];
-    }
-
-    return {
+    const { fields, mark } = this;
+    return clausePoints(fields, value, {
       source: this,
-      schema: { type: 'point' },
-      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate
-    };
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark)
+    });
   }
 
   init(svg, selector, accessor) {
-    const { mark, channels, selection } = this;
+    const { mark, as, selection } = this;
     const { data: { columns = {} } = {} } = mark;
-    accessor ??= target => channels.map(c => columns[c.as][target.__data__]);
+    accessor ??= target => as.map(name => {
+      const data = target.__data__;
+      return columns[name][Array.isArray(data) ? data[0] : data];
+    });
     selector ??= `[data-index="${mark.index}"]`;
     const groups = new Set(svg.querySelectorAll(selector));
 
@@ -85,7 +76,7 @@ export class Toggle {
 
     svg.addEventListener('pointerenter', evt => {
       if (evt.buttons) return;
-      this.selection.activate(this.clause([this.channels.map(() => 0)]));
+      this.selection.activate(this.clause([this.fields.map(() => 0)]));
     });
   }
 }

package/src/legend.js

@@ -10,7 +10,7 @@ export class Legend {
   constructor(channel, options) {
     const { as, field, ...rest } = options;
     this.channel = channel;
-    this.options = { label: null, ...rest };
+    this.options = rest;
     this.type = null;
     this.handler = null;
     this.selection = as;
@@ -19,7 +19,7 @@ export class Legend {
 
     this.element = document.createElement('div');
     this.element.setAttribute('class', 'legend');
-    Object.assign(this.element, { value: this });
+    Object.defineProperty(this.element, 'value', { value: this });
   }
 
   setPlot(plot) {
@@ -35,8 +35,13 @@ export class Legend {
 
   update() {
     if (!this.legend) return;
-    const { value } = this.selection;
-    const curr = value && value.length ? new Set(value.map(v => v[0])) : null;
+    const { selection, handler } = this;
+    const { single, value } = selection;
+
+    // extract currently selected values
+    const vals = single ? value : selection.valueFor(handler);
+    const curr = vals && vals.length ? new Set(vals.map(v => v[0])) : null;
+
     const nodes = this.legend.querySelectorAll(TOGGLE_SELECTOR);
     for (const node of nodes) {
       const selected = curr ? curr.has(node.__data__) : true;
@@ -46,10 +51,15 @@ export class Legend {
 }
 
 function createLegend(legend, svg) {
-  const { channel, options, selection } = legend;
+  const { channel, plot, selection } = legend;
   const scale = svg.scale(channel);
   const type = scale.type === 'ordinal' ? SWATCH : RAMP;
 
+  const options = {
+    label: plot.getAttribute(`${channel}Label`) ?? null,
+    ...legend.options
+  };
+
   // labels for swatch legends are not yet supported by Plot
   // track here: https://github.com/observablehq/plot/issues/834
   // for consistent layout, adjust sizing when there is no label
@@ -103,11 +113,19 @@ function getInteractor(legend, type) {
   // otherwise instantiate an appropriate interactor
   const mark = interactorMark(legend);
   if (type === SWATCH) {
-    legend.handler = new Toggle(mark, { selection, channels: [channel] });
+    legend.handler = new Toggle(mark, {
+      selection,
+      channels: [channel],
+      peers: false
+    });
     selection.addEventListener('value', () => legend.update());
   } else {
-    const brush = { fill: 'none', stroke: 'currentColor' };
-    legend.handler = new Interval1D(mark, { selection, channel, brush });
+    legend.handler = new Interval1D(mark, {
+      selection,
+      channel,
+      brush: { fill: 'none', stroke: 'currentColor' },
+      peers: false
+    });
   }
 
   return legend.handler;

package/src/marks/Density1DMark.js

@@ -1,3 +1,4 @@
+import { toDataColumns } from '@uwdata/mosaic-core';
 import { Query, gt, isBetween, sql, sum } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
@@ -6,7 +7,6 @@ import { extentX, extentY, xext, yext } from './util/extent.js';
 import { grid1d } from './util/grid.js';
 import { handleParam } from './util/handle-param.js';
 import { Mark, channelOption, markQuery } from './Mark.js';
-import { toDataColumns } from './util/to-data-columns.js';
 
 export class Density1DMark extends Mark {
   constructor(type, source, options) {

package/src/marks/ErrorBarMark.js

@@ -0,0 +1,50 @@
+import { toDataColumns } from '@uwdata/mosaic-core';
+import { avg, count, stddev } from '@uwdata/mosaic-sql';
+import { erfinv } from './util/stats.js';
+import { Mark, markPlotSpec, markQuery } from './Mark.js';
+import { handleParam } from './util/handle-param.js';
+
+export class ErrorBarMark extends Mark {
+  constructor(type, source, options) {
+    const dim = type.endsWith('X') ? 'y' : 'x';
+    const { ci = 0.95, ...channels } = options;
+    super(type, source, channels);
+    this.dim = dim;
+    this.field = this.channelField(dim).field;
+    this.channels = this.channels.filter(c => c.channel !== dim);
+
+    /** @type {number} */
+    this.ci = handleParam(ci, value => {
+      return (this.ci = value, this.update());
+    });
+  }
+
+  query(filter = []) {
+    const { channels, field, source: { table } } = this;
+    const fields = channels.concat([
+      { field: avg(field), as: '__avg__' },
+      { field: count(field), as: '__n__', },
+      { field: stddev(field), as: '__sd__' }
+    ]);
+    return markQuery(fields, table).where(filter);
+  }
+
+  queryResult(data) {
+    this.data = toDataColumns(data);
+    return this;
+  }
+
+  plotSpecs() {
+    const { type, dim, detail, data, ci, channels } = this;
+
+    // compute confidence interval channels
+    const p = Math.SQRT2 * erfinv(ci);
+    const { columns: { __avg__: u, __sd__: s, __n__: n } } = data;
+    const options = {
+      [`${dim}1`]: u.map((u, i) => u - p * s[i] / Math.sqrt(n[i])),
+      [`${dim}2`]: u.map((u, i) => u + p * s[i] / Math.sqrt(n[i]))
+    };
+
+    return markPlotSpec(type, detail, channels, data, options);
+  }
+}

package/src/marks/Grid2DMark.js

@@ -1,4 +1,5 @@
 import { interpolatorBarycentric, interpolateNearest, interpolatorRandomWalk } from '@observablehq/plot';
+import { toDataColumns } from '@uwdata/mosaic-core';
 import { Query, count, isBetween, lt, lte, neq, sql, sum } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
@@ -6,7 +7,6 @@ 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 { toDataColumns } from './util/to-data-columns.js';
 import { Mark } from './Mark.js';
 
 export const DENSITY = 'density';
@@ -61,7 +61,7 @@ export class Grid2DMark extends Mark {
 
   /**
    * @param {import('../plot.js').Plot} plot The plot.
-   * @param {number} index 
+   * @param {number} index
    */
   setPlot(plot, index) {
     const update = () => { if (this.hasFieldInfo()) this.requestUpdate(); };