@uwdata/mosaic-plot 0.12.0 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -29,10 +29,10 @@
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.16",
-    "@uwdata/mosaic-core": "^0.12.0",
-    "@uwdata/mosaic-sql": "^0.12.0",
+    "@uwdata/mosaic-core": "^0.12.2",
+    "@uwdata/mosaic-sql": "^0.12.2",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "523b1afe2a0880291c92f81e4a7b91829362d285"
+  "gitHead": "0ca741d840b98039255f26a5ceedf10be66f790e"
 }

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/HexbinMark.js

@@ -75,7 +75,10 @@ export class HexbinMark extends Mark {
           float64(x1),
           div(add(mul(add(x, mul(0.5, bitAnd(y, 1))), dx), ox), xr)
         ),
-        [yc.as]: sub(float64(y2), div(add(mul(y, dy), oy), yr)),
+        [yc.as]: sub(
+          float64(y2),
+          div(add(mul(y, dy), oy), yr)
+        ),
         ...cols
       })
       .groupby(x, y, ...dims)
@@ -83,7 +86,7 @@ export class HexbinMark extends Mark {
         // Subquery performs hex binning in screen space and also passes
         // original columns through (the DB should optimize this).
         Query.select({
-            [py]: div(mul(yr, sub(sub(y2, yc.field), oy)), dy),
+            [py]: div(sub(mul(yr, sub(y2, yc.field)), oy), dy),
             [pj]: int32(round(py)),
             [px]: sub(
                 div(sub(mul(xr, sub(xc.field, x1)), ox), dx),

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) {

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',