@uwdata/mosaic-plot 0.12.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -12,27 +12,24 @@
   "license": "BSD-3-Clause",
   "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "jsdelivr": "dist/mosaic-plot.min.js",
-  "unpkg": "dist/mosaic-plot.min.js",
+  "exports": {
+    "default": "./src/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uwdata/mosaic.git"
   },
   "scripts": {
-    "prebuild": "rimraf dist && mkdir dist",
-    "build": "node ../../esbuild.js mosaic-plot",
     "lint": "eslint src test",
     "test": "vitest run",
-    "prepublishOnly": "npm run test && npm run lint && npm run build"
+    "prepublishOnly": "npm run test && npm run lint"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.16",
-    "@uwdata/mosaic-core": "^0.12.1",
-    "@uwdata/mosaic-sql": "^0.12.1",
+    "@observablehq/plot": "^0.6.17",
+    "@uwdata/mosaic-core": "^0.13.0",
+    "@uwdata/mosaic-sql": "^0.13.0",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "fe3a7c34352da54ec36a1ebf557846f46a649782"
+  "gitHead": "b5a0e03e200c0f04c46562a288f084ffc9f6ad55"
 }

package/src/interactors/Interval1D.js

@@ -6,6 +6,10 @@ import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Interval1D {
   constructor(mark, {
     channel,

package/src/interactors/Interval2D.js

@@ -6,6 +6,10 @@ import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Interval2D {
   constructor(mark, {
     selection,

package/src/interactors/Nearest.js

@@ -2,6 +2,10 @@ import { clausePoint, clausePoints, isSelection } from '@uwdata/mosaic-core';
 import { select, pointer, min } from 'd3';
 import { getField } from './util/get-field.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Nearest {
   constructor(mark, {
     selection,
@@ -71,12 +75,14 @@ export class Nearest {
 
     // trigger activation updates
     svg.addEventListener('pointerenter', evt => {
-      if (!evt.buttons) {
-        const v = this.channels.map(() => 0);
-        selection.activate(this.clause(v));
-      }
+      if (!evt.buttons) this.activate();
     });
   }
+
+  activate() {
+    const v = this.channels.map(() => 0);
+    this.selection.activate(this.clause(v));
+  }
 }
 
 /**

package/src/interactors/PanZoom.js

@@ -4,6 +4,10 @@ import { getField } from './util/get-field.js';
 
 const asc = (a, b) => a - b;
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class PanZoom {
   constructor(mark, {
     x = new Selection(),
@@ -59,7 +63,7 @@ export class PanZoom {
     this.svg = svg;
     if (this.initialized) return; else this.initialized = true;
 
-    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
+    const { panx, pany, mark: { plot: { element } } } = this;
 
     this.xscale = svg.scale('x');
     this.yscale = svg.scale('y');
@@ -85,19 +89,22 @@ export class PanZoom {
       let enter = false;
       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));
-        }
-        if (pany) {
-          const { yscale, yfield } = this;
-          ysel.activate(this.clause(yscale.domain, yfield, yscale));
-        }
+        if (!evt.buttons) this.activate(); // don't activate if mouse down
       });
       element.addEventListener('pointerleave', () => enter = false);
     }
   }
+
+  activate() {
+    if (this.panx) {
+      const { xscale, xfield } = this;
+      this.xsel.activate(this.clause(xscale.domain, xfield, xscale));
+    }
+    if (this.pany) {
+      const { yscale, yfield } = this;
+      this.ysel.activate(this.clause(yscale.domain, yfield, yscale));
+    }
+  }
 }
 
 function extent(ext, defaultTrue, defaultFalse) {

package/src/interactors/Region.js

@@ -8,6 +8,10 @@ import { sanitizeStyles } from './util/sanitize-styles.js';
 import { neqSome } from './util/neq.js';
 import { getDatum } from './util/get-datum.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Region {
   constructor(mark, {
     channels,

package/src/interactors/Toggle.js

@@ -2,6 +2,10 @@ import { clausePoints } from '@uwdata/mosaic-core';
 import { getDatum } from './util/get-datum.js';
 import { neq, neqSome } from './util/neq.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Toggle {
   /**
    * @param {*} mark The mark to interact with.
@@ -12,8 +16,8 @@ export class Toggle {
     channels,
     peers = true
   }) {
-    this.value = null;
     this.mark = mark;
+    this.value = null;
     this.selection = selection;
     this.peers = peers;
     const fields = this.fields = [];
@@ -75,10 +79,13 @@ export class Toggle {
     });
 
     svg.addEventListener('pointerenter', evt => {
-      if (evt.buttons) return;
-      this.selection.activate(this.clause([this.fields.map(() => 0)]));
+      if (!evt.buttons) this.activate();
     });
   }
+
+  activate() {
+    this.selection.activate(this.clause([this.fields.map(() => 0)]));
+  }
 }
 
 function isTargetElement(groups, node) {

package/src/marks/ConnectedMark.js

@@ -39,7 +39,7 @@ export class ConnectedMark extends Mark {
         .filter(c => c !== as && c !== value);
       return m4(q, expr, as, value, cols);
     } else {
-      return q.orderby(field);
+      return q.orderby(as);
     }
   }
 }

package/src/marks/Density1DMark.js

@@ -1,5 +1,6 @@
 import { toDataColumns } from '@uwdata/mosaic-core';
 import { binLinear1d, isBetween } from '@uwdata/mosaic-sql';
+import { max, sum } from 'd3';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
 import { dericheConfig, dericheConv1d } from './util/density.js';
@@ -8,9 +9,17 @@ import { grid1d } from './util/grid.js';
 import { handleParam } from './util/handle-param.js';
 import { Mark, channelOption, markQuery } from './Mark.js';
 
+const GROUPBY = { fill: 1, stroke: 1, z: 1 };
+
 export class Density1DMark extends Mark {
   constructor(type, source, options) {
-    const { bins = 1024, bandwidth = 20, ...channels } = options;
+    const {
+      bins = 1024,
+      bandwidth = 20,
+      normalize = false,
+      stack = false,
+      ...channels
+    } = options;
     const dim = type.endsWith('X') ? 'y' : 'x';
 
     super(type, source, channels, dim === 'x' ? xext : yext);
@@ -24,7 +33,17 @@ export class Density1DMark extends Mark {
     /** @type {number} */
     this.bandwidth = handleParam(bandwidth, value => {
       this.bandwidth = value;
-      return this.grid ? this.convolve().update() : null;
+      return this.grids ? this.convolve().update() : null;
+    });
+
+    /** @type {string | boolean} */
+    this.normalize = handleParam(normalize, value => {
+      return (this.normalize = value, this.convolve().update());
+    });
+
+    /** @type {boolean} */
+    this.stack = handleParam(stack, value => {
+      return (this.stack = value, this.update());
     });
   }
 
@@ -42,48 +61,76 @@ export class Density1DMark extends Mark {
     const q = markQuery(channels, this.sourceTable(), [dim])
       .where(filter.concat(isBetween(bx, extent)));
     const v = this.channelField('weight') ? 'weight' : null;
-    return binLinear1d(q, x, v);
+    const g = this.groupby = channels.flatMap(c => {
+      return (GROUPBY[c.channel] && c.field) ? c.as : [];
+    });
+    return binLinear1d(q, x, v, g);
   }
 
   queryResult(data) {
-    const { columns: { index, density } } = toDataColumns(data);
-    this.grid = grid1d(this.bins, index, density);
+    const c = toDataColumns(data).columns;
+    this.grids = grid1d(this.bins, c.index, c.density, c, this.groupby);
     return this.convolve();
   }
 
   convolve() {
-    const { bins, bandwidth, dim, grid, plot, extent: [lo, hi] } = this;
+    const {
+      bins, bandwidth, normalize, dim, grids, groupby, plot, extent: [lo, hi]
+    } = this;
+
+    const cols = grids.columns;
+    const numGrids = grids.numRows;
 
-    // perform smoothing
-    const neg = grid.some(v => v < 0);
+    const b = this.channelField(dim).as;
+    const v = dim === 'x' ? 'y' : 'x';
     const size = dim === 'x' ? plot.innerWidth() : plot.innerHeight();
+    const neg = cols._grid.some(grid => grid.some(v => v < 0));
     const config = dericheConfig(bandwidth * (bins - 1) / size, neg);
-    const result = dericheConv1d(config, grid, bins);
 
-    // map smoothed grid values to sample data points
-    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) {
-      _b[i] = b0 + i * delta;
-      _v[i] = result[i] * scale;
+    const numRows = bins * numGrids;
+    const _b = new Float64Array(numRows);
+    const _v = new Float64Array(numRows);
+    const _g = groupby.reduce((m, name) => (m[name] = Array(numRows), m), {});
+
+    for (let k = 0, g = 0; g < numGrids; ++g) {
+      // fill in groupby values
+      groupby.forEach(name => _g[name].fill(cols[name][g], k, k + bins));
+
+      // perform smoothing, map smoothed grid values to sample data points
+      const grid = cols._grid[g];
+      const result = dericheConv1d(config, grid, bins);
+      const scale = 1 / norm(grid, result, delta, normalize);
+      for (let i = 0; i < bins; ++i, ++k) {
+        _b[k] = b0 + i * delta;
+        _v[k] = result[i] * scale;
+      }
     }
-    this.data = { numRows: bins, columns: { [b]: _b, [v]: _v } };
 
+    this.data = { numRows, columns: { [b]: _b, [v]: _v, ..._g } };
     return this;
   }
 
   plotSpecs() {
-    const { type, data: { numRows: length, columns }, channels, dim } = this;
-    const options = dim === 'x' ? { y: columns.y } : { x: columns.x };
+    const { type, data: { numRows: length, columns }, channels, dim, stack } = this;
+
+    // control if Plot's implicit stack transform is applied
+    // no stacking is done if x2/y2 are used instead of x/y
+    const _ = type.startsWith('area') && !stack ? '2' : '';
+    const options = dim === 'x' ? { [`y${_}`]: columns.y } : { [`x${_}`]: columns.x };
+
     for (const c of channels) {
       options[c.channel] = channelOption(c, columns);
     }
     return [{ type, data: { length }, options }];
   }
 }
+
+function norm(grid, smoothed, delta, type) {
+  const value = type === true || type === 'sum' ? sum(grid)
+    : type === 'max' ? max(smoothed)
+    : delta;
+  return value || 1;
+}

package/src/marks/Mark.js

@@ -1,5 +1,5 @@
 import { isParam, MosaicClient, toDataColumns } from '@uwdata/mosaic-core';
-import { Query, SelectQuery, collectParams, column, isAggregateExpression, isColumnRef, isNode, isParamLike } from '@uwdata/mosaic-sql';
+import { Query, SelectQuery, collectParams, column, isAggregateExpression, isColumnParam, isColumnRef, isNode, isParamLike } from '@uwdata/mosaic-sql';
 import { isColor } from './util/is-color.js';
 import { isConstantOption } from './util/is-constant-option.js';
 import { isSymbol } from './util/is-symbol.js';
@@ -15,7 +15,7 @@ const isFieldObject = (channel, field) => {
 const fieldEntry = (channel, field) => ({
   channel,
   field,
-  as: isColumnRef(field) ? field.column : channel
+  as: isColumnRef(field) && !isColumnParam(field) ? field.column : channel
 });
 const valueEntry = (channel, value) => ({ channel, value });
 
@@ -136,7 +136,11 @@ export class Mark extends MosaicClient {
     }
 
     const table = this.sourceTable();
-    return Array.from(fields, ([c, s]) => ({ table, column: c, stats: s }));
+    return Array.from(fields, ([c, s]) => ({
+      table,
+      column: c,
+      stats: Array.from(s)
+    }));
   }
 
   fieldInfo(info) {
@@ -226,7 +230,7 @@ export function markQuery(channels, table, skip = []) {
     if (skip.includes(channel)) continue;
 
     if (channel === 'orderby') {
-      q.orderby(c.value);
+      q.orderby(c.value ?? field);
     } else if (field) {
       if (isAggregateExpression(field)) {
         aggr = true;

package/src/marks/util/grid.js

@@ -24,15 +24,44 @@ export function array(size, proto = []) {
  * @param {number} size The grid size.
  * @param {Arrayish} index The grid indices for sample points.
  * @param {Arrayish} value The sample point values.
- * @returns {Arrayish} The generated value grid.
+ * @param {Record<string,Arrayish>} columns Named column arrays with groupby values.
+ * @param {string[]} groupby The names of columns to group by.
+ * @returns {{
+ *  numRows: number;
+ *  columns: { [key:string]: Arrayish }
+ * }} Named column arrays of generated grid values.
  */
-export function grid1d(size, index, value) {
-  const G = array(size, value);
-  const n = value.length;
-  for (let i = 0; i < n; ++i) {
-    G[index[i]] = value[i];
+export function grid1d(size, index, value, columns, groupby) {
+  const numRows = index.length;
+  const result = {};
+  const cells = [];
+
+  // if grouped, generate per-row group indices
+  if (groupby?.length) {
+    const group = new Int32Array(numRows);
+    const gvalues = groupby.map(name => columns[name]);
+    const cellMap = {};
+    for (let row = 0; row < numRows; ++row) {
+      const key = gvalues.map(group => group[row]);
+      group[row] = cellMap[key] ??= cells.push(key) - 1;
+    }
+    for (let i = 0; i < groupby.length; ++i) {
+      result[groupby[i]] = cells.map(cell => cell[i]);
+    }
+    const G = result._grid = cells.map(() => array(size, value));
+    for (let row = 0; row < numRows; ++row) {
+      G[group[row]][index[row]] = value[row];
+    }
+  } else {
+    cells.push([]); // single group
+    const [G] = result._grid = [array(size, value)]
+    for (let row = 0; row < numRows; ++row) {
+      G[index[row]] = value[row];
+    }
   }
-  return G;
+
+  // @ts-ignore
+  return { numRows: cells.length, columns: result };
 }
 
 /**

package/src/marks/util/is-constant-option.js

@@ -1,5 +1,7 @@
 const constantOptions = new Set([
+  'offset',
   'order',
+  'reverse',
   'sort',
   'label',
   'anchor',

package/src/plot.js

@@ -10,19 +10,30 @@ const DEFAULT_ATTRIBUTES = {
 };
 
 export class Plot {
+  /**
+   * @param {HTMLElement} [element]
+   */
   constructor(element) {
+    /** @type {Record<string, any>} */
     this.attributes = { ...DEFAULT_ATTRIBUTES };
     this.listeners = null;
     this.interactors = [];
+    /** @type {{ legend: import('./legend.js').Legend, include: boolean }[]} */
     this.legends = [];
+    /** @type {import('./marks/Mark.js').Mark[]} */
     this.marks = [];
+    /** @type {Set<import('./marks/Mark.js').Mark> | null} */
     this.markset = null;
+    /** @type {Map<import('@uwdata/mosaic-core').Param, import('./marks/Mark.js').Mark[]>} */
+    this.params = new Map;
+    /** @type {ReturnType<synchronizer>} */
+    this.synch = synchronizer();
+
+    /** @type {HTMLElement} */
     this.element = element || document.createElement('div');
     this.element.setAttribute('class', 'plot');
     this.element.style.display = 'flex';
-    this.element.value = this;
-    this.params = new Map;
-    this.synch = synchronizer();
+    Object.assign(this.element, { value: this });
   }
 
   margins() {

package/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({});