@uwdata/mosaic-plot 0.5.0

package/src/plot-renderer.js

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

@@ -0,0 +1,136 @@
+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 });
+  }
+}

package/src/symbols.js

@@ -0,0 +1,3 @@
+export const Fixed = Symbol('Fixed');
+export const Transient = Symbol('Transient');
+export const Transform = Symbol('Transform');

package/src/transforms/bin.js

@@ -0,0 +1,81 @@
+import { asColumn } from '@uwdata/mosaic-sql';
+import { Transform } from '../symbols.js';
+
+const EXTENT = [
+  'rectY-x', 'rectX-y', 'rect-x', 'rect-y'
+];
+
+function hasExtent(channel, type) {
+  return EXTENT.includes(`${type}-${channel}`);
+}
+
+export function bin(field, options = { steps: 25 }) {
+  const fn = (mark, channel) => {
+    return hasExtent(channel, mark.type)
+      ? {
+          [`${channel}1`]: binField(mark, field, options),
+          [`${channel}2`]: binField(mark, field, { ...options, offset: 1 })
+        }
+      : {
+          [channel]: binField(mark, field, options)
+        };
+  };
+  fn[Transform] = true;
+  return fn;
+}
+
+function binField(mark, column, options) {
+  return {
+    column,
+    label: column,
+    get stats() { return ['min', 'max']; },
+    get columns() { return [column]; },
+    get basis() { return column; },
+    toString() {
+      const { min, max } = mark.stats[column];
+      const b = bins(min, max, options);
+      const col = asColumn(column);
+      const base = b.min === 0 ? col : `(${col} - ${b.min})`;
+      const alpha = `${(b.max - b.min) / b.steps}::DOUBLE`;
+      const off = options.offset ? `${options.offset} + ` : '';
+      return `${b.min} + ${alpha} * (${off}FLOOR(${base} / ${alpha})::INTEGER)`;
+    }
+  };
+}
+
+export function bins(min, max, options) {
+  let { steps = 25, minstep = 0, nice = true } = options;
+
+  if (nice !== false) {
+    // use span to determine step size
+    const span = max - min;
+    const maxb = steps;
+    const logb = Math.LN10;
+    const level = Math.ceil(Math.log(maxb) / logb);
+    let step = Math.max(
+      minstep,
+      Math.pow(10, Math.round(Math.log(span) / logb) - level)
+    );
+
+    // increase step size if too many bins
+    while (Math.ceil(span / step) > maxb) { step *= 10; }
+
+    // decrease step size if allowed
+    const div = [5, 2];
+    let v;
+    for (let i = 0, n = div.length; i < n; ++i) {
+      v = step / div[i];
+      if (v >= minstep && span / v <= maxb) step = v;
+    }
+
+    v = Math.log(step);
+    const precision = v >= 0 ? 0 : ~~(-v / logb) + 1;
+    const eps = Math.pow(10, -precision - 1);
+    v = Math.floor(min / step + eps) * step;
+    min = min < v ? v - step : v;
+    max = Math.ceil(max / step) * step;
+    steps = Math.round((max - min) / step);
+  }
+
+  return { min, max, steps };
+}

package/src/transforms/index.js

@@ -0,0 +1,3 @@
+export {
+  bin
+} from './bin.js';