@uwdata/mosaic-plot 0.10.0 → 0.12.0

package/src/interactors/util/intersect.js

@@ -0,0 +1,267 @@
+import { parsePath } from './parse-path.js';
+
+/**
+ * Return SVG elements that intersect the provided spatial extent.
+ * @param {SVGSVGElement} svg Parent SVG element to search within.
+ * @param {SVGElement} el SVG container element to search for points.
+ * @param {[[number, number], [number, number]]} extent Rectangular brush
+ *  extent within which to select elements. The extent is represented as
+ *  upper-left and bottom-right (x, y) coordinates.
+ * @returns {Element[]} A list of intersecting SVG elements.
+ */
+export function intersect(svg, el, extent) {
+  // svg origin in viewport coordinates
+  const { x, y } = svg.getBoundingClientRect();
+  const identity = svg.createSVGMatrix();
+
+  // collect elements that intersect the extent
+  const list = [];
+  for (const child of el.children) {
+    if (child.tagName === 'g') {
+      // handle faceted mark
+      const matrix = getTransformMatrix(child) ?? identity;
+      for (const grandchild of child.children) {
+        if (intersects(extent, x, y, grandchild, matrix)) {
+          list.push(grandchild);
+        }
+      }
+    } else if (intersects(extent, x, y, child, identity)) {
+      list.push(child);
+    }
+  }
+  return list;
+}
+
+function intersects(sel, ox, oy, el, matrix) {
+  let [[l, t], [r, b]] = sel;
+
+  // facet groups involve translation only
+  const { e: tx, f: ty } = matrix;
+
+  // getBoundingClientRect uses viewport coordinates
+  // so we first translate to SVG coordinates
+  const c = el.getBoundingClientRect();
+  const cl = c.left - ox;
+  const cr = c.right - ox;
+  const ct = c.top - oy;
+  const cb = c.bottom - oy;
+
+  if (cl >= l && cr <= r && ct >= t && cb <= b) {
+    // if selection encloses item bounds, we're done
+    return true;
+  } else if (cl <= r && cr >= l && ct <= b && cb >= t) {
+    // if selection intersects item bounds, test further
+    let tag = el.tagName;
+
+    // if a hyperlink, use enclosed element
+    if (tag === 'a') {
+      el = el.children[0];
+      tag = el.tagName;
+    }
+
+    // handle marks that rely solely on bbox intersection
+    if (tag === 'rect' || tag === 'text' || tag === 'image') {
+      return true;
+    }
+
+    // translate selection relative to enclosing group
+    l -= tx;
+    t -= ty;
+    r -= tx;
+    b -= ty;
+
+    switch (tag) {
+      case 'circle':
+        return intersectCircle(l, t, r, b, $(el.cx), $(el.cy), $(el.r));
+      case 'line':
+        return intersectLine(l, t, r, b, $(el.x1), $(el.y1), $(el.x2), $(el.y2));
+      case 'path':
+        return intersectPath(l, t, r, b, el);
+    }
+  }
+  return false;
+}
+
+function $(attr) {
+  return attr.baseVal.value;
+}
+
+function getTransformMatrix(el) {
+  const transform = el.transform.baseVal;
+  const n = transform.length;
+  let m = transform[0]?.matrix;
+  for (let i = 1; i < n; ++i) {
+    m = m.multiply(transform[i].matrix);
+  }
+  return m;
+}
+
+function intersectCircle(l, t, r, b, cx, cy, cr) {
+  const h = l <= cx && cx <= r;
+  const v = t <= cy && cy <= b;
+  if (h && v) return true; // center is enclosed
+
+  const dx = Math.min(Math.abs(l - cx), Math.abs(r - cx));
+  if (v && dx <= cr) return true;
+
+  const dy = Math.min(Math.abs(t - cy), Math.abs(b - cy));
+  return (h && dy <= cr) || (dx * dx + dy * dy <= cr * cr);
+}
+
+function intersectLine(l, t, r, b, x1, y1, x2, y2) {
+  const xmin = Math.max(Math.min(x1, x2), l);
+  const xmax = Math.min(Math.max(x1, x2), r);
+  if (xmin > xmax) return false;
+  let yl1 = y1;
+  let yl2 = y2;
+  const dx = x2 - x1;
+  if (Math.abs(dx) > 1e-8) {
+    const a = (y2 - y1) / dx;
+    const b = y1 - a * x1;
+    yl1 = a * xmin + b;
+    yl2 = a * xmax + b;
+  }
+  const ymin = Math.max(Math.min(yl1, yl2), t);
+  const ymax = Math.min(Math.max(yl1, yl2), b);
+  return ymin <= ymax;
+}
+
+export function intersectPath(l, t, r, b, el) {
+  // parse path and cache result for reuse
+  const cmds = el.__path__ || (el.__path__ = parsePath(el.getAttribute('d')));
+
+  let anchorX = 0;
+  let anchorY = 0;
+  let x = 0;
+  let y = 0;
+  let hit = false;
+  let poly = [0, 0];
+  let n = 2;
+
+  const matrix = getTransformMatrix(el);
+
+  const setAnchor = (ax, ay) => {
+    poly.length = n = 2;
+    poly[0] = x = anchorX = ax;
+    poly[1] = y = anchorY = ay;
+  };
+
+  const anchor = matrix
+    ? (x, y) => setAnchor(multiplyX(matrix, x, y), multiplyY(matrix, x, y))
+    : (x, y) => setAnchor(x, y);
+
+  const test = (x2, y2) => {
+    poly[n] = x2;
+    poly[n+1] = y2;
+    n += 2;
+    return intersectLine(l, t, r, b, poly[n-4], poly[n-3], x2, y2);
+  }
+
+  const lineTo = matrix
+    ? (x2, y2) => {
+        hit = test(
+          multiplyX(matrix, x = x2, y = y2),
+          multiplyY(matrix, x2, y2)
+        );
+      }
+    : (x2, y2) => { hit = test(x = x2, y = y2); };
+
+  for (let i = 0; i < cmds.length; ++i) {
+    const cmd = cmds[i];
+    switch (cmd[0]) {
+      case 'M': anchor(cmd[1], cmd[2]); break;
+      case 'm': anchor(x + cmd[1], y + cmd[2]); break;
+      case 'L':
+      case 'T': lineTo(cmd[1], cmd[2]); break;
+      case 'H': lineTo(cmd[1], y); break;
+      case 'V': lineTo(x, cmd[1]); break;
+      case 'l':
+      case 't': lineTo(x + cmd[1], y + cmd[2]); break;
+      case 'h': lineTo(x + cmd[1], y); break;
+      case 'v': lineTo(x, y + cmd[1]); break;
+
+      // approximate bezier curve as line for now
+      case 'C': lineTo(cmd[5], cmd[6]); break;
+      case 'c': lineTo(x + cmd[5], y + cmd[6]); break;
+      case 'S':
+      case 'Q': lineTo(cmd[3], cmd[4]); break;
+      case 's':
+      case 'q': lineTo(x + cmd[3], y + cmd[4]); break;
+
+      // we don't expect to see arcs other than geo point circles
+      // but just in case, approximate via straight line for now
+      case 'A': lineTo(cmd[6], cmd[7]); break;
+      case 'a':
+        if (isCircle(cmds, i)) {
+          // special case for geo point circle
+          return intersectCircle(l, t, r, b, x, y - cmd[2], cmd[2]);
+        } else {
+          lineTo(x + cmd[6], x + cmd[7]);
+        }
+        break;
+
+      case 'z':
+      case 'Z':
+        lineTo(anchorX, anchorY);
+        if (pointInPolygon(l, t, poly) > 0) return true;
+        anchor(anchorX, anchorY);
+        break;
+      default:
+        // bail for now
+        console.warn('SVG path command not supported: ', cmd[0]);
+        return false;
+    }
+    if (hit) return true;
+  }
+  return false;
+}
+
+function multiplyX(m, x, y) {
+  return m.a * x + m.c * y + m.e;
+}
+
+function multiplyY(m, x, y) {
+  return m.b * x + m.d * y + m.f;
+}
+
+function isCircle(cmds, i) {
+  const a = cmds[i];
+  const b = cmds[i+1];
+  return b && b[0] === 'a'
+    && cmds[i+2]?.[0] === 'z'
+    && a[1] === a[2]
+    && b[1] === b[2]
+    && a[1] === b[1]
+    && a[7] === -b[7];
+}
+
+/**
+ * Point in polygon test, based on Dan Sunday's winding number algorithm.
+ * https://web.archive.org/web/20130126163405/http://geomalgorithms.com/a03-_inclusion.html
+ * @param {number} x The x-coordinate to test for inclusion
+ * @param {number} y The y-coordinate to test for inclusion
+ * @param {number[]} poly Polygon vertices as a flat array of numbers
+ * @returns {number} The winding number. Non-zero values indicate inclusion.
+ */
+function pointInPolygon(x, y, poly) {
+  let wn = 0;
+  const n = poly.length - 2;
+
+  for (let i = 0; i < n; i += 2) {
+    if (poly[i + 1] <= y) {
+      // an upward crossing and (x,y) left of edge
+      if (poly[i + 3] > y && isLeft(x, y, poly, i) > 0)
+         ++wn; // valid up intersect
+    }
+    // a downward crossing and (x,y) right of edge
+    else if (poly[i + 3] <= y && isLeft(x, y, poly[i]) < 0) {
+      --wn; // valid down intersect
+    }
+  }
+
+  return wn;
+}
+
+function isLeft(x, y, p, i) {
+  return (p[i+2] - p[i]) * (y - p[i+1]) - (x - p[i]) * (p[i+3] - p[i+1]);
+}

package/src/interactors/util/neq.js

@@ -0,0 +1,14 @@
+export function neqSome(a, b) {
+  return (a == null || b == null)
+    ? (a != null || b != null)
+    : (a.length !== b.length || a.some((x, i) => neq(x, b[i])));
+}
+
+export function neq(a, b) {
+  const n = a.length;
+  if (b.length !== n) return true;
+  for (let i = 0; i < n; ++i) {
+    if (a[i] !== b[i]) return true;
+  }
+  return false;
+}

package/src/interactors/util/parse-path.js

@@ -0,0 +1,79 @@
+const paramCounts = { m:2, l:2, h:1, v:1, z:0, c:6, s:4, q:4, t:2, a:7 };
+const commandPattern = /[mlhvzcsqta]([^mlhvzcsqta]+|$)/gi;
+const numberPattern = /^[+-]?(([0-9]*\.[0-9]+)|([0-9]+\.)|([0-9]+))([eE][+-]?[0-9]+)?/;
+const spacePattern = /^((\s+,?\s*)|(,\s*))/;
+const flagPattern = /^[01]/;
+
+const errmsg = attr => `Invalid SVG path, incorrect parameter ${attr}`;
+
+/**
+ * Parse an SVG path into a list of drawing commands.
+ * @param {string} path The SVG path string to parse
+ * @returns {[string, ...number][]} A list of drawing commands.
+ *  Each command has a single letter as the first entry. All subsequent
+ *  entries are numeric parameter values.
+ */
+export function parsePath(path) {
+  const commands = [];
+  const matches = path.match(commandPattern) || [];
+
+  matches.forEach(str => {
+    let cmd = str[0];
+    const type = cmd.toLowerCase();
+
+    // parse parameters
+    const paramCount = paramCounts[type];
+    const params = parseParams(type, paramCount, str.slice(1).trim());
+    const count = params.length;
+
+    // error checking based on parameter count
+    if (count < paramCount || (count && count % paramCount !== 0)) {
+      throw new Error(errmsg('count'));
+    }
+
+    // register the command
+    commands.push([cmd, ...params.slice(0, paramCount)]);
+
+    // exit now if we're done, also handles zero-param 'z'
+    if (count === paramCount) {
+      return;
+    }
+
+    // handle implicit line-to
+    if (type === 'm') {
+      cmd = (cmd === 'M') ? 'L' : 'l';
+    }
+
+    // repeat command when given extended param list
+    for (let i = paramCount; i < count; i += paramCount) {
+      commands.push([cmd, ...params.slice(i, i + paramCount)]);
+    }
+  });
+
+  return commands;
+}
+
+function parseParams(type, paramCount, segment) {
+  const params = [];
+
+  for (let index = 0; paramCount && index < segment.length; ) {
+    for (let i = 0; i < paramCount; ++i) {
+      const pattern = type === 'a' && (i === 3 || i === 4) ? flagPattern : numberPattern;
+      const match = segment.slice(index).match(pattern);
+
+      if (match === null) {
+        throw new Error(errmsg('type'));
+      }
+
+      index += match[0].length;
+      params.push(+match[0]);
+
+      const ws = segment.slice(index).match(spacePattern);
+      if (ws !== null) {
+        index += ws[0].length;
+      }
+    }
+  }
+
+  return params;
+}

package/src/marks/ConnectedMark.js

@@ -1,4 +1,4 @@
-import { Query, argmax, argmin, max, min, sql } from '@uwdata/mosaic-sql';
+import { m4 } from '@uwdata/mosaic-sql';
 import { binExpr } from './util/bin-expr.js';
 import { filteredExtent } from './util/extent.js';
 import { Mark } from './Mark.js';
@@ -6,7 +6,7 @@ import { Mark } from './Mark.js';
 export class ConnectedMark extends Mark {
   constructor(type, source, encodings) {
     const dim = type.endsWith('X') ? 'y' : type.endsWith('Y') ? 'x' : null;
-    const req = dim ? { [dim]: ['min', 'max'] } : undefined;
+    const req = dim ? { [dim]: ['count', 'min', 'max'] } : undefined;
     super(type, source, encodings, req);
     this.dim = dim;
   }
@@ -18,23 +18,24 @@ export class ConnectedMark extends Mark {
    */
   query(filter = []) {
     const { plot, dim, source } = this;
-    const { optimize = true } = source.options || {};
+    let optimize = source.options?.optimize;
     const q = super.query(filter);
     if (!dim) return q;
 
     const ortho = dim === 'x' ? 'y' : 'x';
     const value = this.channelField(ortho, { exact: true })?.as;
-    const { field, as, type, min, max } = this.channelField(dim);
+    const { field, as, type, count, min, max } = this.channelField(dim);
     const isContinuous = type === 'date' || type === 'number';
 
+    const size = dim === 'x' ? plot.innerWidth() : plot.innerHeight();
+    optimize ??= (count / size) > 10; // threshold for applying M4
+
     if (optimize && isContinuous && value) {
-      // TODO: handle stacked data!
-      const size = dim === 'x' ? plot.innerWidth() : plot.innerHeight();
+      // TODO: handle stacked data
       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)
+      const cols = q._select
+        .map(c => c.alias)
         .filter(c => c !== as && c !== value);
       return m4(q, expr, as, value, cols);
     } else {
@@ -42,27 +43,3 @@ export class ConnectedMark extends Mark {
     }
   }
 }
-
-/**
- * M4 is an optimization for value-preserving time-series aggregation
- * (http://www.vldb.org/pvldb/vol7/p797-jugel.pdf). This implementation uses
- * an efficient version with a single scan and the aggregate function
- * argmin and argmax, following https://arxiv.org/pdf/2306.03714.pdf.
- */
-function m4(input, bin, x, y, cols = []) {
-  const pixel = sql`FLOOR(${bin})::INTEGER`;
-
-  const q = (sel) => Query
-    .from(input)
-    .select(sel)
-    .groupby(pixel, cols);
-
-  return Query
-    .union(
-      q([{ [x]: min(x), [y]: argmin(y, x) }, ...cols]),
-      q([{ [x]: max(x), [y]: argmax(y, x) }, ...cols]),
-      q([{ [x]: argmin(x, y), [y]: min(y) }, ...cols]),
-      q([{ [x]: argmax(x, y), [y]: max(y) }, ...cols])
-    )
-    .orderby(cols, x);
-}

package/src/marks/DenseLineMark.js

@@ -1,4 +1,4 @@
-import { Query, and, count, isNull, isBetween, sql, sum } from '@uwdata/mosaic-sql';
+import { Query, and, lineDensity } from '@uwdata/mosaic-sql';
 import { binExpr } from './util/bin-expr.js';
 import { extentX, extentY } from './util/extent.js';
 import { handleParam } from './util/handle-param.js';
@@ -16,13 +16,13 @@ export class DenseLineMark extends RasterMark {
   }
 
   query(filter = []) {
-    const { channels, normalize, source, pad } = this;
+    const { channels, normalize, 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)
+      .from(this.sourceTable())
       .where(stripXY(this, filter));
 
     this.aggr = ['density'];
@@ -52,101 +52,21 @@ function stripXY(mark, filter) {
   if (Array.isArray(filter) && !filter.length) return filter;
 
   // get column expressions for x and y encoding channels
-  const { column: xc } = mark.channelField('x');
-  const { column: yc } = mark.channelField('y');
+  const xc = mark.channelField('x').column;
+  const yc = mark.channelField('y').column;
 
   // test if a range predicate filters the x or y channels
   const test = p => {
-    const col = `${p.field}`;
-    return p.op !== 'BETWEEN' || col !== xc && col !== yc;
+    const col = `${p.expr}`;
+    return p.type !== 'BETWEEN' || (col !== xc && col !== yc);
   };
 
   // filter boolean 'and' operations
   const filterAnd = p => p.op === 'AND'
-    ? and(p.children.filter(c => test(c)))
+    ? and(p.clauses.filter(c => test(c)))
     : p;
 
   return Array.isArray(filter)
     ? filter.filter(p => test(p)).map(p => filterAnd(p))
     : filterAnd(filter);
 }
-
-function lineDensity(
-  q, x, y, z, xn, yn,
-  groupby = [], normalize = true
-) {
-  // select x, y points binned to the grid
-  q.select({
-    x: sql`FLOOR(${x})::INTEGER`,
-    y: sql`FLOOR(${y})::INTEGER`
-  });
-
-  // select line segment end point pairs
-  const groups = groupby.concat(z);
-  const pairPart = groups.length ? `PARTITION BY ${groups.join(', ')} ` : '';
-  const pairs = Query
-    .from(q)
-    .select(groups, {
-      x0: 'x',
-      y0: 'y',
-      dx: sql`(lead(x) OVER sw - x)`,
-      dy: sql`(lead(y) OVER sw - y)`
-    })
-    .window({ sw: sql`${pairPart}ORDER BY x ASC` })
-    .qualify(and(
-      sql`(x0 < ${xn} OR x0 + dx < ${xn})`,
-      sql`(y0 < ${yn} OR y0 + dy < ${yn})`,
-      sql`(x0 > 0 OR x0 + dx > 0)`,
-      sql`(y0 > 0 OR y0 + dy > 0)`
-    ));
-
-  // indices to join against for rasterization
-  // generate the maximum number of indices needed
-  const num = Query
-    .select({ x: sql`GREATEST(MAX(ABS(dx)), MAX(ABS(dy)))` })
-    .from('pairs');
-  const indices = Query.select({ i: sql`UNNEST(range((${num})))::INTEGER` });
-
-  // rasterize line segments
-  const raster = Query.unionAll(
-    Query
-      .select(groups, {
-        x: sql`x0 + i`,
-        y: sql`y0 + ROUND(i * dy / dx::FLOAT)::INTEGER`
-      })
-      .from('pairs', 'indices')
-      .where(sql`ABS(dy) <= ABS(dx) AND i < ABS(dx)`),
-    Query
-      .select(groups, {
-        x: sql`x0 + ROUND(SIGN(dy) * i * dx / dy::FLOAT)::INTEGER`,
-        y: sql`y0 + SIGN(dy) * i`
-      })
-      .from('pairs', 'indices')
-      .where(sql`ABS(dy) > ABS(dx) AND i < ABS(dy)`),
-    Query
-      .select(groups, { x: 'x0', y: 'y0' })
-      .from('pairs')
-      .where(isNull('dx'))
-  );
-
-  // filter raster, normalize columns for each series
-  const pointPart = ['x'].concat(groups).join(', ');
-  const points = Query
-    .from('raster')
-    .select(groups, 'x', 'y',
-      normalize
-        ? { w: sql`1.0 / COUNT(*) OVER (PARTITION BY ${pointPart})` }
-        : null
-    )
-    .where(and(isBetween('x', [0, xn], true), isBetween('y', [0, yn], true)));
-
-  // sum normalized, rasterized series into output grids
-  return Query
-    .with({ pairs, indices, raster, points })
-    .from('points')
-    .select(groupby, {
-      index: sql`x + y * ${xn}::INTEGER`,
-      density: normalize ? sum('w') : count()
-    })
-    .groupby('index', groupby);
-}

package/src/marks/Density1DMark.js

@@ -1,5 +1,5 @@
 import { toDataColumns } from '@uwdata/mosaic-core';
-import { Query, gt, isBetween, sql, sum } from '@uwdata/mosaic-sql';
+import { binLinear1d, isBetween } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
 import { dericheConfig, dericheConv1d } from './util/density.js';
@@ -28,7 +28,7 @@ export class Density1DMark extends Mark {
     });
   }
 
-  get filterIndexable() {
+  get filterStable() {
     const name = this.dim === 'x' ? 'xDomain' : 'yDomain';
     const dom = this.plot.getAttribute(name);
     return dom && !dom[Transient];
@@ -36,10 +36,10 @@ export class Density1DMark extends Mark {
 
   query(filter = []) {
     if (this.hasOwnData()) throw new Error('Density1DMark requires a data source');
-    const { bins, channels, dim, source: { table } } = this;
+    const { bins, channels, dim } = this;
     const extent = this.extent = (dim === 'x' ? extentX : extentY)(this, filter);
     const [x, bx] = binExpr(this, dim, bins, extent);
-    const q = markQuery(channels, table, [dim])
+    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);
@@ -87,25 +87,3 @@ export class Density1DMark extends Mark {
     return [{ type, data: { length }, options }];
   }
 }
-
-function binLinear1d(q, p, density) {
-  const w = density ? `* ${density}` : '';
-
-  const u = q.clone().select({
-    p,
-    i: sql`FLOOR(p)::INTEGER`,
-    w: sql`(FLOOR(p) + 1 - p)${w}`
-  });
-
-  const v = q.clone().select({
-    p,
-    i: sql`FLOOR(p)::INTEGER + 1`,
-    w: sql`(p - FLOOR(p))${w}`
-  });
-
-  return Query
-    .from(Query.unionAll(u, v))
-    .select({ index: 'i', density: sum('w') })
-    .groupby('index')
-    .having(gt('density', 0));
-}

package/src/marks/ErrorBarMark.js

@@ -1,5 +1,5 @@
 import { toDataColumns } from '@uwdata/mosaic-core';
-import { avg, count, stddev } from '@uwdata/mosaic-sql';
+import { avg, count, div, sqrt, 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';
@@ -20,13 +20,12 @@ export class ErrorBarMark extends Mark {
   }
 
   query(filter = []) {
-    const { channels, field, source: { table } } = this;
+    const { channels, field } = this;
     const fields = channels.concat([
       { field: avg(field), as: '__avg__' },
-      { field: count(field), as: '__n__', },
-      { field: stddev(field), as: '__sd__' }
+      { field: div(stddev(field), sqrt(count(field))), as: '__se__', }
     ]);
-    return markQuery(fields, table).where(filter);
+    return markQuery(fields, this.sourceTable()).where(filter);
   }
 
   queryResult(data) {
@@ -39,10 +38,10 @@ export class ErrorBarMark extends Mark {
 
     // compute confidence interval channels
     const p = Math.SQRT2 * erfinv(ci);
-    const { columns: { __avg__: u, __sd__: s, __n__: n } } = data;
+    const { columns: { __avg__: u, __se__: s } } = 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]))
+      [`${dim}1`]: u.map((u, i) => u - p * s[i]),
+      [`${dim}2`]: u.map((u, i) => u + p * s[i])
     };
 
     return markPlotSpec(type, detail, channels, data, options);