@uwdata/mosaic-plot 0.5.0

package/src/marks/util/extent.js

@@ -0,0 +1,56 @@
+import { scaleLinear } from 'd3';
+import { Fixed, Transient } from '../../symbols.js';
+
+export const xext = { x: ['min', 'max'] };
+export const yext = { y: ['min', 'max'] };
+export const xyext = { ...xext, ...yext };
+
+export function plotExtent(mark, filter, channel, domainAttr, niceAttr) {
+  const { plot, stats } = mark;
+  const domain = plot.getAttribute(domainAttr);
+  const nice = plot.getAttribute(niceAttr);
+
+  if (Array.isArray(domain) && !domain[Transient]) {
+    return domain;
+  } else {
+    const { field } = mark.channelField(channel);
+    const { column } = field;
+    const { min, max } = stats[column];
+    const dom = filteredExtent(filter, column) || (nice
+      ? scaleLinear().domain([min, max]).nice().domain()
+      : [min, max]);
+    if (domain !== Fixed) dom[Transient] = true;
+    plot.setAttribute(domainAttr, dom, { silent: true });
+    return dom;
+  }
+}
+
+export function extentX(mark, filter) {
+  return plotExtent(mark, filter, 'x', 'xDomain', 'xNice');
+}
+
+export function extentY(mark, filter) {
+  return plotExtent(mark, filter, 'y', 'yDomain', 'yNice');
+}
+
+export function filteredExtent(filter, column) {
+  if (!filter) return;
+
+  let lo;
+  let hi;
+  const visitor = (type, clause) => {
+    if (type === 'BETWEEN' && clause.field.column === column) {
+      const { range } = clause;
+      if (range && (lo == null || range[0] < lo)) lo = range[0];
+      if (range && (hi == null || range[1] > hi)) hi = range[1];
+    }
+  };
+
+  if (Array.isArray(filter)) {
+    filter.forEach(p => p.visit?.(visitor));
+  } else if (filter.visit) {
+    filter.visit(visitor);
+  }
+
+  return lo != null && hi != null && lo !== hi ? [lo, hi] : undefined;
+}

package/src/marks/util/grid.js

@@ -0,0 +1,57 @@
+import { isArrowTable } from './is-arrow-table.js';
+
+export function grid1d(n, values) {
+  return valuesToGrid(new Float64Array(n), values);
+}
+
+export function grid2d(m, n, values, groupby = []) {
+  return groupby.length
+    ? Object.values(groupedValuesToGrids(m * n, values, groupby))
+    : [{ grid: valuesToGrid(new Float64Array(m * n), values) }];
+}
+
+function valuesToGrid(grid, values) {
+  if (isArrowTable(values)) {
+    // optimize access for Arrow tables
+    const numRows = values.numRows;
+    if (numRows === 0) return grid;
+    const index = values.getChild('index').toArray();
+    const value = values.getChild('value').toArray();
+    for (let row = 0; row < numRows; ++row) {
+      grid[index[row]] = value[row];
+    }
+  } else {
+    // fallback to iterable data
+    for (const row of values) {
+      grid[row.index] = row.value;
+    }
+  }
+  return grid;
+}
+
+function groupedValuesToGrids(size, values, groupby) {
+  const grids = {};
+  const getGrid = key => {
+    const cell = grids[key] || (grids[key] = { key, grid: new Float64Array(size) });
+    return cell.grid;
+  };
+  if (isArrowTable(values)) {
+    // optimize access for Arrow tables
+    const numRows = values.numRows;
+    if (numRows === 0) return grids;
+    const index = values.getChild('index').toArray();
+    const value = values.getChild('value').toArray();
+    const groups = groupby.map(name => values.getChild(name));
+    for (let row = 0; row < numRows; ++row) {
+      const key = groups.map(vec => vec.get(row));
+      getGrid(key)[index[row]] = value[row];
+    }
+  } else {
+    // fallback to iterable data
+    for (const row of values) {
+      const key = groupby.map(col => row[col]);
+      getGrid(key)[row.index] = row.value;
+    }
+  }
+  return grids;
+}

package/src/marks/util/handle-param.js

@@ -0,0 +1,14 @@
+import { isParam } from '@uwdata/mosaic-core';
+
+export function handleParam(client, key, param, update) {
+  if (isParam(param)) {
+    update = update || (() => client.requestUpdate());
+    param.addEventListener('value', value => {
+      client[key] = value;
+      return update();
+    });
+    client[key] = param.value;
+  } else {
+    client[key] = param;
+  }
+}

package/src/marks/util/is-arrow-table.js

@@ -0,0 +1,3 @@
+export function isArrowTable(values) {
+  return typeof values?.getChild === 'function';
+}

package/src/marks/util/is-color.js

@@ -0,0 +1,18 @@
+import { color } from 'd3';
+
+// Mostly relies on d3-color, with a few extra color keywords. Currently this
+// strictly requires that the value be a string; we might want to apply string
+// coercion here, though note that d3-color instances would need to support
+// valueOf to work correctly with InternMap.
+// https://www.w3.org/TR/SVG11/painting.html#SpecifyingPaint
+export function isColor(value) {
+  if (typeof value !== "string") return false;
+  value = value.toLowerCase().trim();
+  return (
+    value === "none" ||
+    value === "currentcolor" ||
+    (value.startsWith("url(") && value.endsWith(")")) || // <funciri>, e.g. pattern or gradient
+    (value.startsWith("var(") && value.endsWith(")")) || // CSS variable
+    color(value) !== null
+  );
+}

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

@@ -0,0 +1,41 @@
+const constantOptions = new Set([
+  'order',
+  'sort',
+  'label',
+  'anchor',
+  'curve',
+  'tension',
+  'marker',
+  'markerStart',
+  'markerMid',
+  'markerEnd',
+  'textAnchor',
+  'lineAnchor',
+  'lineHeight',
+  'textOverflow',
+  'monospace',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'frameAnchor',
+  'strokeLinejoin',
+  'strokeLinecap',
+  'strokeMiterlimit',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'mixBlendMode',
+  'shapeRendering',
+  'imageRendering',
+  'preserveAspectRatio',
+  'interpolate',
+  'crossOrigin',
+  'paintOrder',
+  'pointerEvents',
+  'target'
+]);
+
+export function isConstantOption(value) {
+  return constantOptions.has(value);
+}

package/src/marks/util/is-symbol.js

@@ -0,0 +1,20 @@
+const symbols = new Set([
+  'asterisk',
+  'circle',
+  'cross',
+  'diamond',
+  'diamond2',
+  'hexagon',
+  'plus',
+  'square',
+  'square2',
+  'star',
+  'times',
+  'triangle',
+  'triangle2',
+  'wye'
+]);
+
+export function isSymbol(value) {
+  return symbols.has(`${value}`.toLowerCase());
+}

package/src/marks/util/raster.js

@@ -0,0 +1,44 @@
+import { rgb } from 'd3';
+
+export function raster(grid, data, w, h, scale, scheme) {
+  const n = (scheme.length >> 2) - 1;
+  for (let j = 0, k = 0; j < h; ++j) {
+    for (let i = 0, row = (h - j - 1) * w; i < w; ++i, k += 4) {
+      const c = (n * scale(grid[i + row])) << 2;
+      data[k + 0] = scheme[c + 0];
+      data[k + 1] = scheme[c + 1];
+      data[k + 2] = scheme[c + 2];
+      data[k + 3] = scheme[c + 3];
+    }
+  }
+}
+
+export function palette(size, interp) {
+  const p = new Uint8ClampedArray(4 * size);
+  const n = size - 1;
+  for (let i = 0; i <= n; ++i) {
+    const v = interp(i / n);
+    const { r, g, b, opacity = 1 } = typeof v === 'string' ? rgb(v) : v;
+    const k = i << 2;
+    p[k + 0] = r;
+    p[k + 1] = g;
+    p[k + 2] = b;
+    p[k + 3] = (255 * opacity) | 0;
+  }
+  return p;
+}
+
+export function createCanvas(w, h) {
+  if (typeof document !== 'undefined') {
+    const c = document.createElement('canvas');
+    c.setAttribute('width', w);
+    c.setAttribute('height', h);
+    return c;
+  }
+  throw new Error('Can not create a canvas instance.');
+}
+
+export function opacityMap(color = 'black') {
+  const { r, g, b } = rgb(color);
+  return opacity => ({ r, g, b, opacity });
+}

package/src/marks/util/stats.js

@@ -0,0 +1,133 @@
+// https://github.com/jstat/jstat
+//
+// Copyright (c) 2013 jStat
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+export function ibetainv(p, a, b) {
+  var EPS = 1e-8;
+  var a1 = a - 1;
+  var b1 = b - 1;
+  var j = 0;
+  var lna, lnb, pp, t, u, err, x, al, h, w, afac;
+  if (p <= 0) return 0;
+  if (p >= 1) return 1;
+  if (a >= 1 && b >= 1) {
+    pp = p < 0.5 ? p : 1 - p;
+    t = Math.sqrt(-2 * Math.log(pp));
+    x = (2.30753 + t * 0.27061) / (1 + t * (0.99229 + t * 0.04481)) - t;
+    if (p < 0.5) x = -x;
+    al = (x * x - 3) / 6;
+    h = 2 / (1 / (2 * a - 1) + 1 / (2 * b - 1));
+    w = (x * Math.sqrt(al + h)) / h - (1 / (2 * b - 1) - 1 / (2 * a - 1)) * (al + 5 / 6 - 2 / (3 * h));
+    x = a / (a + b * Math.exp(2 * w));
+  } else {
+    lna = Math.log(a / (a + b));
+    lnb = Math.log(b / (a + b));
+    t = Math.exp(a * lna) / a;
+    u = Math.exp(b * lnb) / b;
+    w = t + u;
+    if (p < t / w) x = Math.pow(a * w * p, 1 / a);
+    else x = 1 - Math.pow(b * w * (1 - p), 1 / b);
+  }
+  afac = -gammaln(a) - gammaln(b) + gammaln(a + b);
+  for (; j < 10; j++) {
+    if (x === 0 || x === 1) return x;
+    err = ibeta(x, a, b) - p;
+    t = Math.exp(a1 * Math.log(x) + b1 * Math.log(1 - x) + afac);
+    u = err / t;
+    x -= t = u / (1 - 0.5 * Math.min(1, u * (a1 / x - b1 / (1 - x))));
+    if (x <= 0) x = 0.5 * (x + t);
+    if (x >= 1) x = 0.5 * (x + t + 1);
+    if (Math.abs(t) < EPS * x && j > 0) break;
+  }
+  return x;
+}
+
+export function ibeta(x, a, b) {
+  // Factors in front of the continued fraction.
+  var bt =
+    x === 0 || x === 1 ? 0 : Math.exp(gammaln(a + b) - gammaln(a) - gammaln(b) + a * Math.log(x) + b * Math.log(1 - x));
+  if (x < 0 || x > 1) return false;
+  if (x < (a + 1) / (a + b + 2))
+    // Use continued fraction directly.
+    return (bt * betacf(x, a, b)) / a;
+  // else use continued fraction after making the symmetry transformation.
+  return 1 - (bt * betacf(1 - x, b, a)) / b;
+}
+
+export function betacf(x, a, b) {
+  var fpmin = 1e-30;
+  var m = 1;
+  var qab = a + b;
+  var qap = a + 1;
+  var qam = a - 1;
+  var c = 1;
+  var d = 1 - (qab * x) / qap;
+  var m2, aa, del, h;
+
+  // These q's will be used in factors that occur in the coefficients
+  if (Math.abs(d) < fpmin) d = fpmin;
+  d = 1 / d;
+  h = d;
+
+  for (; m <= 100; m++) {
+    m2 = 2 * m;
+    aa = (m * (b - m) * x) / ((qam + m2) * (a + m2));
+    // One step (the even one) of the recurrence
+    d = 1 + aa * d;
+    if (Math.abs(d) < fpmin) d = fpmin;
+    c = 1 + aa / c;
+    if (Math.abs(c) < fpmin) c = fpmin;
+    d = 1 / d;
+    h *= d * c;
+    aa = (-(a + m) * (qab + m) * x) / ((a + m2) * (qap + m2));
+    // Next step of the recurrence (the odd one)
+    d = 1 + aa * d;
+    if (Math.abs(d) < fpmin) d = fpmin;
+    c = 1 + aa / c;
+    if (Math.abs(c) < fpmin) c = fpmin;
+    d = 1 / d;
+    del = d * c;
+    h *= del;
+    if (Math.abs(del - 1.0) < 3e-7) break;
+  }
+
+  return h;
+}
+
+export function gammaln(x) {
+  var j = 0;
+  var cof = [
+    76.18009172947146, -86.5053203294167, 24.01409824083091, -1.231739572450155, 0.1208650973866179e-2,
+    -0.5395239384953e-5
+  ];
+  var ser = 1.000000000190015;
+  var xx, y, tmp;
+  tmp = (y = xx = x) + 5.5;
+  tmp -= (xx + 0.5) * Math.log(tmp);
+  for (; j < 6; j++) ser += cof[j] / ++y;
+  return Math.log((2.506628274631 * ser) / xx) - tmp;
+}
+
+export function qt(p, dof) {
+  var x = ibetainv(2 * Math.min(p, 1 - p), 0.5 * dof, 0.5);
+  x = Math.sqrt((dof * (1 - x)) / x);
+  return p > 0.5 ? x : -x;
+}

package/src/marks/util/to-data-array.js

@@ -0,0 +1,70 @@
+import { isArrowTable } from './is-arrow-table.js';
+
+const INTEGER = 2;
+const TIMESTAMP = 10;
+
+export function toDataArray(data) {
+  return isArrowTable(data) ? arrowToObjects(data) : data;
+}
+
+/**
+ * Convert Apache Arrow tables to an array of vanilla JS objects.
+ * The internal conversions performed by the Arrow JS lib may not
+ * always produce values properly interpreted by Observable Plot.
+ * In addition, the Arrow JS lib uses Proxy objects to create
+ * row (tuple) objects, which can introduce some perf overhead.
+ * This method provides custom conversions of data that we can hand
+ * to Observable Plot. Internally, Plot will copy input data values
+ * into an array-based columnar organizations. If in the future Plot
+ * provides an efficient path to directly pass in columnar-data, we
+ * can revisit this method.
+ */
+export function arrowToObjects(data) {
+  const { batches, numRows: length } = data;
+
+  // return an empty array for empty tables
+  if (!length) return [];
+
+  // pre-allocate output objects
+  const objects = Array.from({ length }, () => ({}));
+
+  // for each row batch...
+  for (let k = 0, b = 0; b < batches.length; ++b) {
+    const batch = batches[b];
+    const { schema, numRows, numCols } = batch;
+
+    // for each column...
+    for (let j = 0; j < numCols; ++j) {
+      const child = batch.getChildAt(j);
+      const { name, type } = schema.fields[j];
+      const valueOf = convert(type);
+
+      // for each row in the current batch...
+      for (let o = k, i = 0; i < numRows; ++i, ++o) {
+        // extract/convert value from arrow, copy to output object
+        objects[o][name] = valueOf(child.get(i));
+      }
+    }
+
+    k += numRows;
+  }
+
+  return objects;
+}
+
+function convert(type) {
+  const { typeId } = type;
+
+  // map timestamp numbers to date objects
+  if (typeId === TIMESTAMP) {
+    return v => v == null ? v : new Date(v);
+  }
+
+  // map bignum to number
+  if (typeId === INTEGER && type.bitWidth >= 64) {
+    return v => v == null ? v : Number(v);
+  }
+
+  // otherwise use Arrow JS defaults
+  return v => v;
+}

package/src/plot-attributes.js

@@ -0,0 +1,212 @@
+export const attributeMap = new Map([
+  ['style', 'style'],
+  ['width', 'width'],
+  ['height', 'height'],
+  ['margin', 'margin'],
+  ['marginLeft', 'marginLeft'],
+  ['marginRight', 'marginRight'],
+  ['marginTop', 'marginTop'],
+  ['marginBottom', 'marginBottom'],
+  ['align', 'align'],
+  ['aspectRatio', 'aspectRatio'],
+  ['axis', 'axis'],
+  ['inset', 'inset'],
+  ['grid', 'grid'],
+  ['label', 'label'],
+  ['padding', 'padding'],
+  ['round', 'round'],
+  ['xScale', 'x.type'],
+  ['xDomain', 'x.domain'],
+  ['xRange', 'x.range'],
+  ['xNice', 'x.nice'],
+  ['xInset', 'x.inset'],
+  ['xInsetLeft', 'x.insetLeft'],
+  ['xInsetRight', 'x.insetRight'],
+  ['xClamp', 'x.clamp'],
+  ['xRound', 'x.round'],
+  ['xAlign', 'x.align'],
+  ['xPadding', 'x.padding'],
+  ['xPaddingInner', 'x.paddingInner'],
+  ['xPaddingOuter', 'x.paddingOuter'],
+  ['xAxis', 'x.axis'],
+  ['xTicks', 'x.ticks'],
+  ['xTickSize', 'x.tickSize'],
+  ['xTickSpacing', 'x.tickSpacing'],
+  ['xTickPadding', 'x.tickPadding'],
+  ['xTickFormat', 'x.tickFormat'],
+  ['xTickRotate', 'x.tickRotate'],
+  ['xGrid', 'x.grid'],
+  ['xLine', 'x.line'],
+  ['xLabel', 'x.label'],
+  ['xLabelAnchor', 'x.labelAnchor'],
+  ['xLabelOffset', 'x.labelOffset'],
+  ['xFontVariant', 'x.fontVariant'],
+  ['xAriaLabel', 'x.ariaLabel'],
+  ['xAriaDescription', 'x.ariaDescription'],
+  ['xReverse', 'x.reverse'],
+  ['xZero', 'x.zero'],
+  ['yScale', 'y.type'],
+  ['yDomain', 'y.domain'],
+  ['yRange', 'y.range'],
+  ['yNice', 'y.nice'],
+  ['yInset', 'y.inset'],
+  ['yInsetTop', 'y.insetTop'],
+  ['yInsetBottom', 'y.insetBottom'],
+  ['yClamp', 'y.clamp'],
+  ['yRound', 'y.round'],
+  ['yAlign', 'y.align'],
+  ['yPadding', 'y.padding'],
+  ['yPaddingInner', 'y.paddingInner'],
+  ['yPaddingOuter', 'y.paddingOuter'],
+  ['yAxis', 'y.axis'],
+  ['yTicks', 'y.ticks'],
+  ['yTickSize', 'y.tickSize'],
+  ['yTickSpacing', 'y.tickSpacing'],
+  ['yTickPadding', 'y.tickPadding'],
+  ['yTickFormat', 'y.tickFormat'],
+  ['yTickRotate', 'y.tickRotate'],
+  ['yGrid', 'y.grid'],
+  ['yLine', 'y.line'],
+  ['yLabel', 'y.label'],
+  ['yLabelAnchor', 'y.labelAnchor'],
+  ['yLabelOffset', 'y.labelOffset'],
+  ['yFontVariant', 'y.fontVariant'],
+  ['yAriaLabel', 'y.ariaLabel'],
+  ['yAriaDescription', 'y.ariaDescription'],
+  ['yReverse', 'y.reverse'],
+  ['yZero', 'y.zero'],
+  ['facetMargin', 'facet.margin'],
+  ['facetMarginTop', 'facet.marginTop'],
+  ['facetMarginBottom', 'facet.marginBottom'],
+  ['facetMarginLeft', 'facet.marginLeft'],
+  ['facetMarginRight', 'facet.marginRight'],
+  ['facetGrid', 'facet.grid'],
+  ['facetLabel', 'facet.label'],
+  ['fxDomain', 'fx.domain'],
+  ['fxRange', 'fx.range'],
+  ['fxNice', 'fx.nice'],
+  ['fxInset', 'fx.inset'],
+  ['fxInsetLeft', 'fx.insetLeft'],
+  ['fxInsetRight', 'fx.insetRight'],
+  ['fxRound', 'fx.round'],
+  ['fxAlign', 'fx.align'],
+  ['fxPadding', 'fx.padding'],
+  ['fxPaddingInner', 'fx.paddingInner'],
+  ['fxPaddingOuter', 'fx.paddingOuter'],
+  ['fxAxis', 'fx.axis'],
+  ['fxTicks', 'fx.ticks'],
+  ['fxTickSize', 'fx.tickSize'],
+  ['fxTickSpacing', 'fx.tickSpacing'],
+  ['fxTickPadding', 'fx.tickPadding'],
+  ['fxTickFormat', 'fx.tickFormat'],
+  ['fxTickRotate', 'fx.tickRotate'],
+  ['fxGrid', 'fx.grid'],
+  ['fxLine', 'fx.line'],
+  ['fxLabel', 'fx.label'],
+  ['fxLabelAnchor', 'fx.labelAnchor'],
+  ['fxLabelOffset', 'fx.labelOffset'],
+  ['fxFontVariant', 'fx.fontVariant'],
+  ['fxAriaLabel', 'fx.ariaLabel'],
+  ['fxAriaDescription', 'fx.ariaDescription'],
+  ['fxReverse', 'fx.reverse'],
+  ['fyDomain', 'fy.domain'],
+  ['fyRange', 'fy.range'],
+  ['fyNice', 'fy.mice'],
+  ['fyInset', 'fy,inset'],
+  ['fyInsetTop', 'fy.insetTop'],
+  ['fyInsetBottom', 'fy.insetBottom'],
+  ['fyRound', 'fy.round'],
+  ['fyAlign', 'fy.align'],
+  ['fyPadding', 'fy.padding'],
+  ['fyPaddingInner', 'fy.paddingInner'],
+  ['fyPaddingOuter', 'fy.paddingOuter'],
+  ['fyAxis', 'fy.axis'],
+  ['fyTicks', 'fy.ticks'],
+  ['fyTickSize', 'fy.tickSize'],
+  ['fyTickSpacing', 'fy.tickSpacing'],
+  ['fyTickPadding', 'fy.tickPadding'],
+  ['fyTickFormat', 'fy.tickFormat'],
+  ['fyTickRotate', 'fy.tickRotate'],
+  ['fyGrid', 'fy.grid'],
+  ['fyLine', 'fy.line'],
+  ['fyLabel', 'fy.label'],
+  ['fyLabelAnchor', 'fy.labelAnchor'],
+  ['fyLabelOffset', 'fy.labelOffset'],
+  ['fyFontVariant', 'fy.fontVariant'],
+  ['fyAriaLabel', 'fy.ariaLabel'],
+  ['fyAriaDescription', 'fy.ariaDescription'],
+  ['fyReverse', 'fy.reverse'],
+  ['colorScale', 'color.type'],
+  ['colorDomain', 'color.domain'],
+  ['colorRange', 'color.range'],
+  ['colorClamp', 'color.clamp'],
+  ['colorN', 'color.n'],
+  ['colorNice', 'color.nice'],
+  ['colorScheme', 'color.scheme'],
+  ['colorInterpolate', 'color.interpolate'],
+  ['colorPivot', 'color.pivot'],
+  ['colorSymmetric', 'color.symmetric'],
+  ['colorLabel', 'color.label'],
+  ['colorReverse', 'color.reverse'],
+  ['colorZero', 'color.zero'],
+  ['colorTickFormat', 'color.tickFormat'],
+  ['opacityScale', 'opacity.type'],
+  ['opacityDomain', 'opacity.domain'],
+  ['opacityRange', 'opacity.range'],
+  ['opacityClamp', 'opacity.clamp'],
+  ['opacityNice', 'opacity.nice'],
+  ['opacityLabel', 'opacity.label'],
+  ['opacityReverse', 'opacity.reverse'],
+  ['opacityZero', 'opacity.zero'],
+  ['opacityTickFormat', 'opacity.tickFormat'],
+  ['rScale', 'r.type'],
+  ['rDomain', 'r.domain'],
+  ['rRange', 'r.range'],
+  ['rClamp', 'r.clamp'],
+  ['rNice', 'r.nice'],
+  ['rZero', 'r.zero'],
+  ['lengthScale', 'length.type'],
+  ['lengthDomain', 'length.domain'],
+  ['lengthRange', 'length.range'],
+  ['lengthClamp', 'length.clamp'],
+  ['lengthNice', 'length.nice'],
+  ['lengthZero', 'length.zero'],
+  ['projectionType', 'projection.type'],
+  ['projectionParallels', 'projection.parallels'],
+  ['projectionPrecision', 'projection.precision'],
+  ['projectionRotate', 'projection.rotate'],
+  ['projectionDomain', 'projection.domain'],
+  ['projectionInset', 'projection.inset'],
+  ['projectionInsetLeft', 'projection.insetLeft'],
+  ['projectionInsetRight', 'projection.insetRight'],
+  ['projectionInsetTop', 'projection.insetTop'],
+  ['projectionInsetBottom', 'projection.insetBottom'],
+  ['projectionClip', 'projection.clip']
+]);
+
+function setProperty(object, path, value) {
+  for (let i = 0; i < path.length; ++i) {
+    const key = path[i];
+    if (i === path.length - 1) {
+      object[key] = value;
+    } else {
+      object = (object[key] || (object[key] = {}));
+    }
+  }
+}
+
+export function setAttributes(attributes, spec, symbols) {
+  // populate top-level and scale properties
+  for (const key in attributes) {
+    const specKey = attributeMap.get(key);
+    if (specKey == null) {
+      throw new Error(`Unrecognized plot attribute: ${key}`);
+    }
+    const value = attributes[key];
+    if (typeof value === 'symbol') {
+      symbols.push(key);
+    } else if (value !== undefined) {
+      setProperty(spec, specKey.split('.'), value);
+    }
+  }
+}