@uwdata/mosaic-plot 0.7.1 → 0.9.0

package/src/legend.js

@@ -1,48 +1,48 @@
+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.defineProperty(this.element, 'value', { 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;
   }
 
   update() {
     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 { 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;
       node.style.opacity = selected ? 1 : 0.2;
@@ -50,17 +50,138 @@ 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],
+      peers: false
+    });
+    selection.addEventListener('value', () => legend.update());
+  } else {
+    legend.handler = new Interval1D(mark, {
+      selection,
+      channel,
+      brush: { fill: 'none', stroke: 'currentColor' },
+      peers: false
+    });
+  }
+
+  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 }];
   }
 }
 

package/src/marks/Density2DMark.js

@@ -26,46 +26,61 @@ export class Density2DMark extends Grid2DMark {
     const deltaY = (y1 - y0) / (ny - pad);
     const offset = pad ? 0 : 0.5;
     this.data = points(
-      this.kde, bins, x0, y0, deltaX, deltaY,
+      this.grids, bins, x0, y0, deltaX, deltaY,
       scaleX.invert, scaleY.invert, offset
     );
     return this;
   }
 
   plotSpecs() {
-    const { type, channels, densityMap, data } = this;
+    const { type, channels, densityMap, data: { numRows: length, columns } } = this;
     const options = {};
     for (const c of channels) {
       const { channel } = c;
       options[channel] = (channel === 'x' || channel === 'y')
-        ? channel // use generated x/y data fields
-        : channelOption(c);
+        ? columns[channel] // use generated x/y data fields
+        : channelOption(c, columns);
     }
     for (const channel in densityMap) {
       if (densityMap[channel]) {
-        options[channel] = 'density';
+        options[channel] = columns.density;
       }
     }
-    return [{ type, data, options }];
+    return [{ type, data: { length }, options }];
   }
 }
 
-function points(kde, bins, x0, y0, deltaX, deltaY, invertX, invertY, offset) {
+function points(data, bins, x0, y0, deltaX, deltaY, invertX, invertY, offset) {
   const scale = 1 / (deltaX * deltaY);
   const [nx, ny] = bins;
-  const data = [];
-  for (const cell of kde) {
-    const grid = cell.density;
+  const batch = nx * ny;
+  const numRows = batch * data.numRows;
+
+  const x = new Float64Array(numRows);
+  const y = new Float64Array(numRows);
+  const density = new Float64Array(numRows);
+  const columns = { x, y, density };
+  const { density: grids, ...rest } = data.columns;
+  for (const name in rest) {
+    columns[name] = new rest[name].constructor(numRows);
+  }
+
+  let r = 0;
+  for (let row = 0; row < data.numRows; ++row) {
+    // copy repeated values in batch
+    for (const name in rest) {
+      columns[name].fill(rest[name][row], r, r + batch);
+    }
+    // copy individual grid values
+    const grid = grids[row];
     for (let k = 0, j = 0; j < ny; ++j) {
-      for (let i = 0; i < nx; ++i, ++k) {
-        data.push({
-          ...cell,
-          x: invertX(x0 + (i + offset) * deltaX),
-          y: invertY(y0 + (j + offset) * deltaY),
-          density: grid[k] * scale
-        });
+      for (let i = 0; i < nx; ++i, ++r, ++k) {
+        x[r] = invertX(x0 + (i + offset) * deltaX);
+        y[r] = invertY(y0 + (j + offset) * deltaY);
+        density[r] = grid[k] * scale;
       }
     }
   }
-  return data;
+
+  return { numRows, columns };
 }

package/src/marks/ErrorBarMark.js

@@ -0,0 +1,50 @@
+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';
+import { toDataColumns } from './util/to-data-columns.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/GeoMark.js

@@ -18,16 +18,15 @@ export class GeoMark extends Mark {
   }
 
   queryResult(data) {
-    super.queryResult(data);
+    super.queryResult(data); // map to columns, set this.data
 
-    // parse GeoJSON strings to JSON objects
+    // look for an explicit geometry field
     const geom = this.channelField('geometry')?.as;
-    if (geom && this.data) {
-      this.data.forEach(data => {
-        if (typeof data[geom] === 'string') {
-          data[geom] = JSON.parse(data[geom]);
-        }
-      });
+    if (geom) {
+      const { columns } = this.data;
+      if (typeof columns[geom][0] === 'string') {
+        columns[geom] = columns[geom].map(s => JSON.parse(s));
+      }
     }
 
     return this;