@uwdata/mosaic-plot 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -23,16 +23,16 @@
   "scripts": {
     "prebuild": "rimraf dist && mkdir dist",
     "build": "node ../../esbuild.js mosaic-plot",
-    "lint": "eslint src test --ext .js",
+    "lint": "eslint src test",
     "test": "mocha 'test/**/*-test.js'",
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.13",
-    "@uwdata/mosaic-core": "^0.7.0",
-    "@uwdata/mosaic-sql": "^0.7.0",
-    "d3": "^7.8.5",
+    "@observablehq/plot": "^0.6.14",
+    "@uwdata/mosaic-core": "^0.8.0",
+    "@uwdata/mosaic-sql": "^0.8.0",
+    "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "4680b922f15579b7b527f31507ed71a12230ec35"
+  "gitHead": "a24b4c9f7dfa1c38c6af96ec17e075326c1af9b0"
 }

package/src/interactors/Interval1D.js

@@ -11,7 +11,7 @@ export class Interval1D {
   constructor(mark, {
     channel,
     selection,
-    field,
+    field = undefined,
     pixelSize = 1,
     peers = true,
     brush: style
@@ -61,7 +61,7 @@ export class Interval1D {
     };
   }
 
-  init(svg) {
+  init(svg, root) {
     const { brush, channel, style } = this;
     this.scale = svg.scale(channel);
 
@@ -70,7 +70,7 @@ export class Interval1D {
     brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
 
     const facets = select(svg).selectAll('g[aria-label="facet"]');
-    const root = facets.size() ? facets : select(svg);
+    root = facets.size() ? facets : select(root ?? svg);
     this.g = root
       .append('g')
       .attr('class', `interval-${channel}`)
@@ -85,6 +85,8 @@ export class Interval1D {
       }
     }
 
-    svg.addEventListener('pointerenter', () => this.activate());
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) this.activate();
+    });
   }
 }

package/src/interactors/Interval2D.js

@@ -97,6 +97,8 @@ export class Interval2D {
       this.g.call(brush.moveSilent, [[x1, y1], [x2, y2]]);
     }
 
-    svg.addEventListener('pointerenter', () => this.activate());
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) this.activate();
+    });
   }
 }

package/src/interactors/Nearest.js

@@ -41,26 +41,27 @@ export class Nearest {
 
     root.on('pointerdown pointermove', function(evt) {
       const [x, y] = pointer(evt, this);
-      const z = findNearest(data, key, scale.invert(channel === 'x' ? x : y));
+      const z = findNearest(data.columns[key], scale.invert(channel === 'x' ? x : y));
       selection.update(param ? z : that.clause(z));
     });
 
     if (param) return;
-    svg.addEventListener('pointerenter', () => {
-      this.selection.activate(this.clause(0));
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) this.selection.activate(this.clause(0));
     });
   }
 }
 
-function findNearest(data, key, value) {
+function findNearest(values, value) {
   let dist = Infinity;
-  let v;
-  data.forEach(d => {
-    const delta = Math.abs(d[key] - value);
+  let nearest;
+
+  for (let i = 0; i < values.length; ++i) {
+    const delta = Math.abs(values[i] - value);
     if (delta < dist) {
       dist = delta;
-      v = d[key];
+      nearest = values[i];
     }
-  });
-  return v;
+  }
+  return nearest;
 }

package/src/interactors/PanZoom.js

@@ -86,8 +86,9 @@ export class PanZoom {
 
     if (panx || pany) {
       let enter = false;
-      element.addEventListener('mouseenter', () => {
+      element.addEventListener('pointerenter', evt => {
         if (enter) return; else enter = true;
+        if (evt.buttons) return; // don't activate if mouse down
         if (panx) {
           const { xscale, xfield } = this;
           xsel.activate(this.clause(xscale.domain, xfield, xscale));
@@ -97,7 +98,7 @@ export class PanZoom {
           ysel.activate(this.clause(yscale.domain, yfield, yscale));
         }
       });
-      element.addEventListener('mouseleave', () => enter = false);
+      element.addEventListener('pointerleave', () => enter = false);
     }
   }
 }

package/src/interactors/Toggle.js

@@ -1,6 +1,10 @@
 import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
 
 export class Toggle {
+  /**
+   * @param {*} mark The mark to interact with.
+   * @param {*} options The interactor options.
+   */
   constructor(mark, {
     selection,
     channels,
@@ -11,12 +15,12 @@ export class Toggle {
     this.selection = selection;
     this.peers = peers;
     this.channels = channels.map(c => {
-      const q = c === 'color' ? ['fill', 'stroke']
+      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]);
+        const f = mark.channelField(q[i], { exact: true });
         if (f) return {
           field: f.field?.basis || f.field,
           as: f.as
@@ -51,13 +55,9 @@ export class Toggle {
 
   init(svg, selector, accessor) {
     const { mark, channels, selection } = this;
-    const { data } = mark;
-    accessor = accessor || (target => {
-      const datum = data[target.__data__];
-      return channels.map(c => datum[c.as]);
-    });
-
-    selector = selector || `[data-index="${mark.index}"]`;
+    const { data: { columns = {} } = {} } = mark;
+    accessor ??= target => channels.map(c => columns[c.as][target.__data__]);
+    selector ??= `[data-index="${mark.index}"]`;
     const groups = new Set(svg.querySelectorAll(selector));
 
     svg.addEventListener('pointerdown', evt => {
@@ -67,7 +67,7 @@ export class Toggle {
 
       if (isTargetElement(groups, target)) {
         const point = accessor(target);
-        if (evt.shiftKey && state?.length) {
+        if ((evt.shiftKey || evt.metaKey) && state?.length) {
           value = state.filter(s => neq(s, point));
           if (value.length === state.length) value.push(point);
         } else if (state?.length === 1 && !neq(state[0], point)) {
@@ -83,7 +83,8 @@ export class Toggle {
       }
     });
 
-    svg.addEventListener('pointerenter', () => {
+    svg.addEventListener('pointerenter', evt => {
+      if (evt.buttons) return;
       this.selection.activate(this.clause([this.channels.map(() => 0)]));
     });
   }

package/src/interactors/util/patchScreenCTM.js

@@ -4,6 +4,8 @@
  * even after the node is removed from the DOM.
  */
 export function patchScreenCTM() {
+  /** @type {SVGGraphicsElement} */
+  // @ts-ignore
   const node = this;
   const getScreenCTM = node.getScreenCTM;
   let memo;

package/src/legend.js

@@ -1,40 +1,35 @@
+import { scale } from '@observablehq/plot';
+import { Interval1D } from './interactors/Interval1D.js';
 import { Toggle } from './interactors/Toggle.js';
 
+const TOGGLE_SELECTOR = ':scope > div, :scope > span';
+const SWATCH = 'swatch';
+const RAMP = 'ramp';
+
 export class Legend {
   constructor(channel, options) {
-    const { as, ...rest } = options;
+    const { as, field, ...rest } = options;
     this.channel = channel;
     this.options = { label: null, ...rest };
+    this.type = null;
+    this.handler = null;
     this.selection = as;
+    this.field = field;
+    this.legend = null;
 
     this.element = document.createElement('div');
     this.element.setAttribute('class', 'legend');
-    this.element.value = this;
+    Object.assign(this.element, { value: this });
   }
 
   setPlot(plot) {
-    const { channel, selection } = this;
-    const mark = findMark(plot, channel);
-    if (this.selection && mark) {
-      this.handler = new Toggle(mark, { selection, channels: [channel] });
-      this.selection.addEventListener('value', () => this.update());
-    }
+    this.plot = plot;
   }
 
   init(svg) {
-    const { channel, options, handler } = this;
-    const scale = svg.scale(channel);
-    const opt = scale.type === 'ordinal'
-      ? options
-      : { marginTop: 1, tickSize: 2, height: 28, ...options };
-    this.legend = svg.legend(channel, opt);
-
-    if (handler) {
-      handler.init(this.legend, ':scope > div', el => [el.__data__]);
-      this.update();
-    }
-
-    this.element.replaceChildren(this.legend);
+    // createLegend sets this.legend, may set this.handler
+    const el = createLegend(this, svg);
+    this.element.replaceChildren(el);
     return this.element;
   }
 
@@ -42,7 +37,7 @@ export class Legend {
     if (!this.legend) return;
     const { value } = this.selection;
     const curr = value && value.length ? new Set(value.map(v => v[0])) : null;
-    const nodes = this.legend.querySelectorAll(':scope > div');
+    const nodes = this.legend.querySelectorAll(TOGGLE_SELECTOR);
     for (const node of nodes) {
       const selected = curr ? curr.has(node.__data__) : true;
       node.style.opacity = selected ? 1 : 0.2;
@@ -50,17 +45,130 @@ export class Legend {
   }
 }
 
-function findMark({ marks }, channel) {
+function createLegend(legend, svg) {
+  const { channel, options, selection } = legend;
+  const scale = svg.scale(channel);
+  const type = scale.type === 'ordinal' ? SWATCH : RAMP;
+
+  // 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
+  const opt = type === SWATCH ? options
+    : options.label ? { tickSize: 2, ...options }
+    : { tickSize: 2, marginTop: 1, height: 29, ...options };
+
+  // instantiate new legend element, bind to Legend class
+  const el = svg.legend(channel, opt);
+  legend.legend = el;
+
+  // if this is an interactive legend, add a scale lookup function
+  // this allows interval interactors to access encoding information
+  let interactive = !!selection;
+  if (interactive && type === RAMP) {
+    const width = opt.width ?? 240; // 240 is default ramp length
+    const spatial = spatialScale(scale, width);
+    if (spatial) {
+      el.scale = function(type) {
+        return type === 'x' ? { range: [0, width] }
+          : type === 'y' ? { range: [-10, 0] }
+          : type === channel ? spatial
+          : undefined;
+      };
+    } else {
+      // spatial scale construction failed, disable interaction
+      interactive = false;
+    }
+  }
+
+  // initialize interactors to use updated legend element
+  if (interactive) {
+    const handler = getInteractor(legend, type);
+    if (type === SWATCH) {
+      handler.init(el, TOGGLE_SELECTOR, el => [el.__data__]);
+      legend.update();
+    } else {
+      handler.init(el, el.querySelector('g:last-of-type'));
+    }
+  }
+
+  return el;
+}
+
+function getInteractor(legend, type) {
+  const { channel, handler, selection } = legend;
+
+  // exit early if already instantiated
+  if (handler) return handler;
+
+  // otherwise instantiate an appropriate interactor
+  const mark = interactorMark(legend);
+  if (type === SWATCH) {
+    legend.handler = new Toggle(mark, { selection, channels: [channel] });
+    selection.addEventListener('value', () => legend.update());
+  } else {
+    const brush = { fill: 'none', stroke: 'currentColor' };
+    legend.handler = new Interval1D(mark, { selection, channel, brush });
+  }
+
+  return legend.handler;
+}
+
+// generate a faux mark to pass to an interactor
+function interactorMark(legend) {
+  const { channel, plot } = legend;
+  const field = legend.field ?? findField(plot.marks, channel) ?? 'value';
+  if (field) {
+    const f = { field };
+    return { plot, channelField: c => channel === c ? f : undefined };
+  }
+}
+
+// search marks for a backing data field for the legend
+function findField(marks, channel) {
   const channels = channel === 'color' ? ['fill', 'stroke']
     : channel === 'opacity' ? ['opacity', 'fillOpacity', 'strokeOpacity']
     : null;
   if (channels == null) return null;
   for (let i = marks.length - 1; i > -1; --i) {
-    for (const channel of channels) {
-      if (marks[i].channelField(channel, { exact: true })) {
-        return marks[i];
-      }
+    for (const c of channels) {
+      const field = marks[i].channelField(c, { exact: true });
+      if (field) return field.field;
     }
   }
   return null;
 }
+
+// generate a spatial scale to brush within color or opacity ramps
+function spatialScale(sourceScale, width) {
+  // separate out reusable parts of the scale definition
+  // eslint-disable-next-line no-unused-vars
+  const { apply, invert, interpolate, ...rest } = sourceScale;
+
+  // extract basic source scale type
+  let src = sourceScale.type;
+  if (src.startsWith('diverging-')) src = src.slice(11);
+
+  // determine spatial scale type
+  let type;
+  switch (src) {
+    case 'log':
+    case 'pow':
+    case 'sqrt':
+    case 'symlog':
+      type = src;
+      break;
+    case 'threshold':
+    case 'quantize':
+    case 'quantile':
+      // these scales do not expose an invert method
+      // the legends use color ramps with discrete swatches
+      // in the future we could try to support toggle-style
+      // interactions that map to threshold range selections
+      console.warn(`Legends do not yet support ${src} scales.`);
+      return null;
+    default:
+      type = 'linear';
+  }
+
+  return scale({ x: { ...rest, type, range: [0, width] } });
+}

package/src/marks/ConnectedMark.js

@@ -11,6 +11,11 @@ export class ConnectedMark extends Mark {
     this.dim = dim;
   }
 
+  /**
+   * Return a query specifying the data needed by this Mark client.
+   * @param {*} [filter] The filtering criteria to apply in the query.
+   * @returns {*} The client query
+   */
   query(filter = []) {
     const { plot, dim, source } = this;
     const { optimize = true } = source.options || {};
@@ -28,6 +33,7 @@ export class ConnectedMark extends Mark {
       const [lo, hi] = filteredExtent(filter, field) || [min, max];
       const [expr] = binExpr(this, dim, size, [lo, hi], 1, as);
       const cols = q.select()
+        // @ts-ignore
         .map(c => c.as)
         .filter(c => c !== as && c !== value);
       return m4(q, expr, as, value, cols);

package/src/marks/ContourMark.js

@@ -13,8 +13,11 @@ export class ContourMark extends Grid2DMark {
       pixelSize: 2,
       ...channels
     });
-    handleParam(this, 'thresholds', thresholds, () => {
-      return this.grids ? this.contours().update() : null
+
+    /** @type {number|number[]} */
+    this.thresholds = handleParam(thresholds, value => {
+      this.thresholds = value;
+      return this.grids ? this.contours().update() : null;
     });
   }
 
@@ -23,12 +26,16 @@ export class ContourMark extends Grid2DMark {
   }
 
   contours() {
-    const { bins, densityMap, kde, thresholds, plot } = this;
+    const { bins, densityMap, grids, thresholds, plot } = this;
+    const { numRows, columns } = grids;
 
-    let tz = thresholds;
-    if (!Array.isArray(tz)) {
-      const [, hi] = gridDomainContinuous(kde, 'density');
-      tz = Array.from({length: tz - 1}, (_, i) => (hi * (i + 1)) / tz);
+    let t = thresholds;
+    let tz;
+    if (Array.isArray(t)) {
+      tz = t;
+    } else {
+      const [, hi] = gridDomainContinuous(columns.density);
+      tz = Array.from({length: t - 1}, (_, i) => (hi * (i + 1)) / t);
     }
 
     if (densityMap.fill || densityMap.stroke) {
@@ -51,18 +58,27 @@ export class ContourMark extends Grid2DMark {
     const contour = contours().size(bins);
 
     // generate contours
-    this.data = kde.flatMap(cell => tz.map(t => {
-      return Object.assign(
-        transform(contour.contour(cell.density, t), x, y),
-        { ...cell, density: t }
-      );
-    }));
+    const data = this.contourData = Array(numRows * tz.length);
+    const { density, ...groupby } = columns;
+    const groups = Object.entries(groupby);
+    for (let i = 0, k = 0; i < numRows; ++i) {
+      const grid = density[i];
+      const rest = groups.reduce((o, [name, col]) => (o[name] = col[i], o), {});
+      for (let j = 0; j < tz.length; ++j, ++k) {
+        // annotate contour geojson with cell groupby fields
+        // d3-contour already adds a threshold "value" property
+        data[k] = Object.assign(
+          transform(contour.contour(grid, tz[j]), x, y),
+          rest
+        );
+      }
+    }
 
     return this;
   }
 
   plotSpecs() {
-    const { type, channels, densityMap, data } = this;
+    const { type, channels, densityMap, contourData: data } = this;
     const options = {};
     for (const c of channels) {
       const { channel } = c;
@@ -70,8 +86,12 @@ export class ContourMark extends Grid2DMark {
         options[channel] = channelOption(c);
       }
     }
-    if (densityMap.fill) options.fill = 'density';
-    if (densityMap.stroke) options.stroke = 'density';
+    // d3-contour adds a threshold "value" property
+    // here we ensure requested density values are encoded
+    for (const channel in densityMap) {
+      if (!densityMap[channel]) continue;
+      options[channel] = channelOption({ channel, as: 'value' });
+    }
     return [{ type, data, options }];
   }
 }

package/src/marks/DenseLineMark.js

@@ -8,14 +8,18 @@ export class DenseLineMark extends RasterMark {
   constructor(source, options) {
     const { normalize = true, ...rest } = options;
     super(source, rest);
-    handleParam(this, 'normalize', normalize);
+
+    /** @type {boolean} */
+    this.normalize = handleParam(normalize, value => {
+      return (this.normalize = value, this.requestUpdate());
+    });
   }
 
   query(filter = []) {
-    const { channels, normalize, source, binPad } = this;
-    const [nx, ny] = this.bins = this.binDimensions(this);
-    const [x] = binExpr(this, 'x', nx, extentX(this, filter), binPad);
-    const [y] = binExpr(this, 'y', ny, extentY(this, filter), binPad);
+    const { channels, normalize, source, pad } = this;
+    const [nx, ny] = this.bins = this.binDimensions();
+    const [x] = binExpr(this, 'x', nx, extentX(this, filter), pad);
+    const [y] = binExpr(this, 'y', ny, extentY(this, filter), pad);
 
     const q = Query
       .from(source.table)

package/src/marks/Density1DMark.js

@@ -6,6 +6,7 @@ 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) {
@@ -15,9 +16,15 @@ export class Density1DMark extends Mark {
     super(type, source, channels, dim === 'x' ? xext : yext);
     this.dim = dim;
 
-    handleParam(this, 'bins', bins);
-    handleParam(this, 'bandwidth', bandwidth, () => {
-      return this.grid ? this.convolve().update() : null
+    /** @type {number} */
+    this.bins = handleParam(bins, value => {
+      return (this.bins = value, this.requestUpdate());
+    });
+
+    /** @type {number} */
+    this.bandwidth = handleParam(bandwidth, value => {
+      this.bandwidth = value;
+      return this.grid ? this.convolve().update() : null;
     });
   }
 
@@ -39,7 +46,8 @@ export class Density1DMark extends Mark {
   }
 
   queryResult(data) {
-    this.grid = grid1d(this.bins, data);
+    const { columns: { index, density } } = toDataColumns(data);
+    this.grid = grid1d(this.bins, index, density);
     return this.convolve();
   }
 
@@ -53,29 +61,30 @@ export class Density1DMark extends Mark {
     const result = dericheConv1d(config, grid, bins);
 
     // map smoothed grid values to sample data points
-    const points = this.data = [];
     const v = dim === 'x' ? 'y' : 'x';
     const b = this.channelField(dim).as;
     const b0 = +lo;
     const delta = (hi - b0) / (bins - 1);
     const scale = 1 / delta;
+
+    const _b = new Float64Array(bins);
+    const _v = new Float64Array(bins);
     for (let i = 0; i < bins; ++i) {
-      points.push({
-        [b]: b0 + i * delta,
-        [v]: result[i] * scale
-      });
+      _b[i] = b0 + i * delta;
+      _v[i] = result[i] * scale;
     }
+    this.data = { numRows: bins, columns: { [b]: _b, [v]: _v } };
 
     return this;
   }
 
   plotSpecs() {
-    const { type, data, channels, dim } = this;
-    const options = dim === 'x' ? { y: 'y' } : { x: 'x' };
+    const { type, data: { numRows: length, columns }, channels, dim } = this;
+    const options = dim === 'x' ? { y: columns.y } : { x: columns.x };
     for (const c of channels) {
-      options[c.channel] = channelOption(c);
+      options[c.channel] = channelOption(c, columns);
     }
-    return [{ type, data, options }];
+    return [{ type, data: { length }, options }];
   }
 }