@uwdata/vgplot 0.4.0 → 0.5.0

package/src/marks/util/stats.js

@@ -1,133 +0,0 @@
-// 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

@@ -1,58 +0,0 @@
-import { isArrowTable } from './is-arrow-table.js';
-
-const INTEGER = 2;
-const TIMESTAMP = 10;
-
-export function toDataArray(data) {
-  return isArrowTable(data) ? arrowToObjects(data) : data;
-}
-
-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

@@ -1,211 +0,0 @@
-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'],
-  ['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);
-    }
-  }
-}

package/src/plot-renderer.js

@@ -1,161 +0,0 @@
-import * as Plot from '@observablehq/plot';
-import { setAttributes } from './plot-attributes.js';
-import { Fixed } from './symbols.js';
-
-const OPTIONS_ONLY_MARKS = new Set([
-  'frame',
-  'hexgrid',
-  'sphere',
-  'graticule'
-]);
-
-
-
-// construct Plot output
-// see https://github.com/observablehq/plot
-export async function plotRenderer(plot) {
-  const spec = { marks: [] };
-  const symbols = [];
-  const { attributes, marks } = plot;
-
-  // populate top-level and scale properties
-  setAttributes(attributes, spec, symbols);
-
-  // populate marks
-  const indices = [];
-  for (const mark of marks) {
-    for (const { type, data, options } of mark.plotSpecs()) {
-      if (OPTIONS_ONLY_MARKS.has(type)) {
-        spec.marks.push(Plot[type](options));
-      } else {
-        spec.marks.push(Plot[type](data, options));
-      }
-      indices.push(mark.index);
-    }
-  }
-
-  // infer labels
-  inferLabels(spec, plot);
-
-  // render plot
-  const svg = Plot.plot(spec);
-
-  // annotate svg with mark indices
-  annotatePlot(svg, indices);
-
-  // set symbol-valued attributes, such as fixed domains
-  setSymbolAttributes(plot, svg, attributes, symbols);
-
-  // initialize interactors
-  for (const interactor of plot.interactors) {
-    await interactor.init(svg);
-  }
-
-  return svg;
-}
-
-function setSymbolAttributes(plot, svg, attributes, symbols) {
-  symbols.forEach(key => {
-    const value = attributes[key];
-    if (value === Fixed) {
-      if (!key.endsWith('Domain')) {
-        throw new Error(`Unsupported fixed attribute: ${key}`);
-      }
-      const type = key.slice(0, -'Domain'.length);
-      const scale = svg.scale(type);
-      if (scale?.domain) {
-        plot.setAttribute(key, attributes[`${type}Reverse`]
-          ? scale.domain.slice().reverse()
-          : scale.domain);
-      }
-    } else {
-      throw new Error(`Unrecognized symbol: ${value}`);
-    }
-  });
-}
-
-function inferLabels(spec, plot) {
-  const { marks } = plot;
-  inferLabel('x', spec, marks, ['x', 'x1', 'x2']);
-  inferLabel('y', spec, marks, ['y', 'y1', 'y2']);
-  inferLabel('fx', spec, marks);
-  inferLabel('fy', spec, marks);
-}
-
-function inferLabel(key, spec, marks, channels = [key]) {
-  const scale = spec[key] || {};
-  if (scale.axis === null || scale.label !== undefined) return; // nothing to do
-
-  const fields = marks.map(mark => mark.channelField(channels)?.field);
-  if (fields.every(x => x == null)) return; // no columns found
-
-  // check for consistent columns / labels
-  let candCol;
-  let candLabel;
-  let type;
-  for (let i = 0; i < fields.length; ++i) {
-    const { column, label } = fields[i] || {};
-    if (column === undefined && label === undefined) {
-      continue;
-    } else if (candCol === undefined && candLabel === undefined) {
-      candCol = column;
-      candLabel = label;
-      type = getType(marks[i].data, channels) || 'number';
-    } else if (candLabel !== label) {
-      candLabel = undefined;
-    } else if (candCol !== column) {
-      candCol = undefined;
-    }
-  }
-  let candidate = candLabel || candCol;
-  if (candidate === undefined) return;
-
-  // adjust candidate label formatting
-  if ((type === 'number' || type === 'date') && (key === 'x' || key === 'y')) {
-    if (scale.percent) candidate = `${candidate} (%)`;
-    const order = (key === 'x' ? 1 : -1) * (scale.reverse ? -1 : 1);
-    if (key === 'x' || scale.labelAnchor === 'center') {
-      candidate = (key === 'x') === order < 0 ? `← ${candidate}` : `${candidate} →`;
-    } else {
-      candidate = `${order < 0 ? '↑ ' : '↓ '}${candidate}`;
-    }
-  }
-
-  // add label to spec
-  spec[key] = { ...scale, label: candidate };
-}
-
-function annotatePlot(svg, indices) {
-  const facets = svg.querySelectorAll('g[aria-label="facet"]');
-  if (facets.length) {
-    for (const facet of facets) {
-      annotateMarks(facet, indices);
-    }
-  } else {
-    annotateMarks(svg, indices);
-  }
-}
-
-function annotateMarks(svg, indices) {
-  let index = -1;
-  for (const child of svg.children) {
-    const aria = child.getAttribute('aria-label') || '';
-    const skip = child.nodeName === 'style'
-      || aria.includes('-axis')
-      || aria.includes('-grid');
-    if (!skip) {
-      child.setAttribute('data-index', indices[++index]);
-    }
-  }
-}
-
-function getType(data, channels) {
-  for (const row of data) {
-    for (let j = 0; j < channels.length; ++j) {
-      const v = row[channels[j]];
-      if (v != null) {
-        return v instanceof Date ? 'date' : typeof v;
-      }
-    }
-  }
-}

package/src/plot.js

@@ -1,136 +0,0 @@
-import { distinct, synchronizer } from '@uwdata/mosaic-core';
-import { plotRenderer } from './plot-renderer.js';
-
-const DEFAULT_ATTRIBUTES = {
-  width: 640,
-  marginLeft: 40,
-  marginRight: 20,
-  marginTop: 20,
-  marginBottom: 30
-};
-
-export class Plot {
-  constructor(element) {
-    this.attributes = { ...DEFAULT_ATTRIBUTES };
-    this.listeners = null;
-    this.interactors = [];
-    this.legends = [];
-    this.marks = [];
-    this.markset = null;
-    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();
-  }
-
-  margins() {
-    return {
-      left: this.getAttribute('marginLeft'),
-      top: this.getAttribute('marginTop'),
-      bottom: this.getAttribute('marginBottom'),
-      right: this.getAttribute('marginRight')
-    };
-  }
-
-  innerWidth() {
-    const { left, right } = this.margins();
-    return this.getAttribute('width') - left - right;
-  }
-
-  innerHeight() {
-    const { top, bottom } = this.margins();
-    return this.getAttribute('height') - top - bottom;
-  }
-
-  pending(mark) {
-    this.synch.pending(mark);
-  }
-
-  update(mark) {
-    if (this.synch.ready(mark) && !this.pendingRender) {
-      this.pendingRender = true;
-      requestAnimationFrame(() => this.render());
-    }
-    return this.synch.promise;
-  }
-
-  async render() {
-    this.pendingRender = false;
-    const svg = await plotRenderer(this);
-    const legends = this.legends.flatMap(({ legend, include }) => {
-      const el = legend.init(svg);
-      return include ? el : [];
-    });
-    this.element.replaceChildren(svg, ...legends);
-    this.synch.resolve();
-  }
-
-  getAttribute(name) {
-    return this.attributes[name];
-  }
-
-  setAttribute(name, value, options) {
-    if (distinct(this.attributes[name], value)) {
-      if (value === undefined) {
-        delete this.attributes[name];
-      } else {
-        this.attributes[name] = value;
-      }
-      if (!options?.silent) {
-        this.listeners?.get(name)?.forEach(cb => cb(name, value));
-      }
-      return true;
-    }
-    return false;
-  }
-
-  addAttributeListener(name, callback) {
-    const map = this.listeners || (this.listeners = new Map);
-    if (!map.has(name)) map.set(name, new Set);
-    map.get(name).add(callback);
-    return this;
-  }
-
-  removeAttributeListener(name, callback) {
-    return this.listeners?.get(name)?.delete(callback);
-  }
-
-  addParams(mark, paramSet) {
-    const { params } = this;
-    for (const param of paramSet) {
-      if (params.has(param)) {
-        params.get(param).push(mark);
-      } else {
-        params.set(param, [mark]);
-        param.addEventListener('value', () => {
-          return Promise.allSettled(
-            params.get(param).map(mark => mark.requestQuery())
-          );
-        });
-      }
-    }
-  }
-
-  addMark(mark) {
-    mark.setPlot(this, this.marks.length);
-    this.marks.push(mark);
-    this.markset = null;
-    return this;
-  }
-
-  get markSet() {
-    return this.markset || (this.markset = new Set(this.marks));
-  }
-
-  addInteractor(sel) {
-    this.interactors.push(sel);
-    return this;
-  }
-
-  addLegend(legend, include = true) {
-    legend.setPlot(this);
-    this.legends.push({ legend, include });
-  }
-}