@uwdata/mosaic-plot 0.5.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@uwdata/mosaic-plot",
+  "version": "0.5.0",
+  "description": "A Mosaic-powered plotting framework based on Observable Plot.",
+  "keywords": [
+    "data",
+    "visualization",
+    "plot",
+    "duckdb",
+    "mosaic"
+  ],
+  "license": "BSD-3-Clause",
+  "author": "Jeffrey Heer (http://idl.cs.washington.edu)",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "jsdelivr": "dist/mosaic-plot.min.js",
+  "unpkg": "dist/mosaic-plot.min.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uwdata/mosaic.git"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist && mkdir dist",
+    "build": "node ../../esbuild.js mosaic-plot",
+    "lint": "eslint src test --ext .js",
+    "test": "mocha 'test/**/*-test.js'",
+    "prepublishOnly": "npm run test && npm run lint && npm run build"
+  },
+  "dependencies": {
+    "@observablehq/plot": "^0.6.13",
+    "@uwdata/mosaic-core": "^0.5.0",
+    "@uwdata/mosaic-sql": "^0.5.0",
+    "d3": "^7.8.5",
+    "isoformat": "^0.2.1"
+  },
+  "gitHead": "92886dddfb126c1439924c5a0189e4639c3519a7"
+}

package/src/index.js

@@ -0,0 +1,30 @@
+export { Fixed, Transient, Transform } from './symbols.js';
+export { Plot } from './plot.js';
+
+// marks
+export { Mark } from './marks/Mark.js';
+export { ConnectedMark } from './marks/ConnectedMark.js';
+export { ContourMark } from './marks/ContourMark.js';
+export { DenseLineMark } from './marks/DenseLineMark.js';
+export { Density1DMark } from './marks/Density1DMark.js';
+export { Density2DMark } from './marks/Density2DMark.js';
+export { GeoMark } from './marks/GeoMark.js';
+export { Grid2DMark } from './marks/Grid2DMark.js';
+export { HexbinMark } from './marks/HexbinMark.js';
+export { RasterMark } from './marks/RasterMark.js';
+export { RasterTileMark } from './marks/RasterTileMark.js';
+export { RegressionMark } from './marks/RegressionMark.js';
+
+// interactors
+export { Highlight } from './interactors/Highlight.js';
+export { Interval1D } from './interactors/Interval1D.js';
+export { Interval2D } from './interactors/Interval2D.js';
+export { Nearest } from './interactors/Nearest.js';
+export { PanZoom } from './interactors/PanZoom.js';
+export { Toggle } from './interactors/Toggle.js';
+
+// legend
+export { Legend } from './legend.js';
+
+// transforms
+export { bin } from './transforms/index.js';

package/src/interactors/Highlight.js

@@ -0,0 +1,101 @@
+import { throttle } from '@uwdata/mosaic-core';
+import { and } from '@uwdata/mosaic-sql';
+import { sanitizeStyles } from './util/sanitize-styles.js';
+
+function configureMark(mark) {
+  const { channels } = mark;
+  const dims = new Set;
+  let ordered = false;
+  let aggregate = false;
+
+  for (const c of channels) {
+    const { channel, field, as } = c;
+    if (channel === 'orderby') {
+      ordered = true;
+    } else if (field) {
+      if (field.aggregate) {
+        aggregate = true;
+      } else {
+        if (dims.has(as)) continue;
+        dims.add(as);
+      }
+    }
+  }
+
+  // if orderby is defined, we're ok: nothing to do
+  // or, if there is no groupby aggregation, we're ok: nothing to do
+  // grouping may result in optimizations that change result order
+  // so we orderby the grouping dimensions to ensure stable indices
+  if (!ordered && aggregate && dims.size) {
+    mark.channels.push(({ channel: 'orderby', value: Array.from(dims) }));
+  }
+
+  return mark;
+}
+
+export class Highlight {
+  constructor(mark, {
+    selection,
+    channels = {}
+  }) {
+    this.mark = configureMark(mark);
+    this.selection = selection;
+    const c = Object.entries(sanitizeStyles(channels));
+    this.channels = c.length ? c : [['opacity', 0.2]];
+    this.selection.addEventListener('value', throttle(() => this.update()));
+  }
+
+  init(svg) {
+    this.svg = svg;
+    const values = this.values = [];
+    const index = this.mark.index;
+    const nodes = this.nodes = svg.querySelectorAll(`[data-index="${index}"] > *`);
+
+    const { channels } = this;
+    for (let i = 0; i < nodes.length; ++i) {
+      const node = nodes[i];
+      values.push(channels.map(c => node.getAttribute(c[0])));
+    }
+
+    return this.update();
+  }
+
+  async update() {
+    const { svg, nodes, channels, values, mark, selection } = this;
+    if (!svg) return;
+
+    const test = await predicateFunction(mark, selection);
+
+    for (let i = 0; i < nodes.length; ++i) {
+      const node = nodes[i];
+      const base = values[i];
+      const t = test(node.__data__);
+      // TODO? handle inherited values / remove attributes
+      for (let j = 0; j < channels.length; ++j) {
+        const [attr, value] = channels[j];
+        node.setAttribute(attr, t ? base[j] : value);
+      }
+    }
+  }
+}
+
+async function predicateFunction(mark, selection) {
+  const pred = selection?.predicate(mark);
+
+  if (!pred || pred.length === 0) {
+    return () => true;
+  }
+
+  // set flag so we do not skip cross-filtered sources
+  const filter = mark.filterBy?.predicate(mark, true);
+
+  const s = { __: and(pred) };
+  const q = mark.query(filter);
+  const p = q.groupby().length ? q.select(s) : q.$select(s);
+
+  const data = await mark.coordinator.query(p);
+  const v = data.getChild?.('__');
+  return !(data.numRows || data.length) ? (() => false)
+    : v ? (i => v.get(i))
+    : (i => data[i].__);
+}

package/src/interactors/Interval1D.js

@@ -0,0 +1,90 @@
+import { select, min, max } from 'd3';
+import { isBetween } from '@uwdata/mosaic-sql';
+import { brushX, brushY } from './util/brush.js';
+import { closeTo } from './util/close-to.js';
+import { getField } from './util/get-field.js';
+import { invert } from './util/invert.js';
+import { patchScreenCTM } from './util/patchScreenCTM.js';
+import { sanitizeStyles } from './util/sanitize-styles.js';
+
+export class Interval1D {
+  constructor(mark, {
+    channel,
+    selection,
+    field,
+    pixelSize = 1,
+    peers = true,
+    brush: style
+  }) {
+    this.mark = mark;
+    this.channel = channel;
+    this.pixelSize = pixelSize || 1;
+    this.selection = selection;
+    this.peers = peers;
+    this.field = field || getField(mark, [channel, channel+'1', channel+'2']);
+    this.style = style && sanitizeStyles(style);
+    this.brush = channel === 'y' ? brushY() : brushX();
+    this.brush.on('brush end', ({ selection }) => this.publish(selection));
+  }
+
+  reset() {
+    this.value = undefined;
+    if (this.g) this.brush.reset(this.g);
+  }
+
+  activate() {
+    this.selection.activate(this.clause(this.value || [0, 1]));
+  }
+
+  publish(extent) {
+    let range = undefined;
+    if (extent) {
+      range = extent
+        .map(v => invert(v, this.scale, this.pixelSize))
+        .sort((a, b) => a - b);
+    }
+    if (!closeTo(range, this.value)) {
+      this.value = range;
+      this.g.call(this.brush.moveSilent, extent);
+      this.selection.update(this.clause(range));
+    }
+  }
+
+  clause(value) {
+    const { mark, pixelSize, field, scale } = this;
+    return {
+      source: this,
+      schema: { type: 'interval', pixelSize, scales: [scale] },
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
+      value,
+      predicate: value ? isBetween(field, value) : null
+    };
+  }
+
+  init(svg) {
+    const { brush, channel, style } = this;
+    this.scale = svg.scale(channel);
+
+    const rx = svg.scale('x').range;
+    const ry = svg.scale('y').range;
+    brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
+
+    const facets = select(svg).selectAll('g[aria-label="facet"]');
+    const root = facets.size() ? facets : select(svg);
+    this.g = root
+      .append('g')
+      .attr('class', `interval-${channel}`)
+      .each(patchScreenCTM)
+      .call(brush)
+      .call(brush.moveSilent, this.value?.map(this.scale.apply));
+
+    if (style) {
+      const brushes = this.g.selectAll('rect.selection');
+      for (const name in style) {
+        brushes.attr(name, style[name]);
+      }
+    }
+
+    svg.addEventListener('pointerenter', () => this.activate());
+  }
+}

package/src/interactors/Interval2D.js

@@ -0,0 +1,102 @@
+import { select, min, max } from 'd3';
+import { and, isBetween } from '@uwdata/mosaic-sql';
+import { brush } from './util/brush.js';
+import { closeTo } from './util/close-to.js';
+import { getField } from './util/get-field.js';
+import { invert } from './util/invert.js';
+import { patchScreenCTM } from './util/patchScreenCTM.js';
+import { sanitizeStyles } from './util/sanitize-styles.js';
+
+const asc = (a, b) => a - b;
+
+export class Interval2D {
+  constructor(mark, {
+    selection,
+    xfield,
+    yfield,
+    pixelSize = 1,
+    peers = true,
+    brush: style
+  }) {
+    this.mark = mark;
+    this.pixelSize = pixelSize || 1;
+    this.selection = selection;
+    this.peers = peers;
+    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
+    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
+    this.style = style && sanitizeStyles(style);
+    this.brush = brush();
+    this.brush.on('brush end', ({ selection }) => this.publish(selection));
+  }
+
+  reset() {
+    this.value = undefined;
+    if (this.g) this.brush.reset(this.g);
+  }
+
+  activate() {
+    this.selection.activate(this.clause(this.value || [[0, 1], [0, 1]]));
+  }
+
+  publish(extent) {
+    const { value, pixelSize, xscale, yscale } = this;
+    let xr = undefined;
+    let yr = undefined;
+    if (extent) {
+      const [a, b] = extent;
+      xr = [a[0], b[0]].map(v => invert(v, xscale, pixelSize)).sort(asc);
+      yr = [a[1], b[1]].map(v => invert(v, yscale, pixelSize)).sort(asc);
+    }
+
+    if (!closeTo(xr, value?.[0]) || !closeTo(yr, value?.[1])) {
+      this.value = extent ? [xr, yr] : undefined;
+      this.g.call(this.brush.moveSilent, extent);
+      this.selection.update(this.clause(this.value));
+    }
+  }
+
+  clause(value) {
+    const { mark, pixelSize, xfield, yfield, xscale, yscale } = this;
+    return {
+      source: this,
+      schema: { type: 'interval', pixelSize, scales: [xscale, yscale] },
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
+      value,
+      predicate: value
+        ? and(isBetween(xfield, value[0]), isBetween(yfield, value[1]))
+        : null
+    };
+  }
+
+  init(svg) {
+    const { brush, style } = this;
+    const xscale = this.xscale = svg.scale('x');
+    const yscale = this.yscale = svg.scale('y');
+    const rx = xscale.range;
+    const ry = yscale.range;
+    brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
+
+    const facets = select(svg).selectAll('g[aria-label="facet"]');
+    const root = facets.size() ? facets : select(svg);
+    this.g = root
+      .append('g')
+      .attr('class', `interval-xy`)
+      .each(patchScreenCTM)
+      .call(brush);
+
+    if (style) {
+      const brushes = this.g.selectAll('rect.selection');
+      for (const name in style) {
+        brushes.attr(name, style[name]);
+      }
+    }
+
+    if (this.value) {
+      const [x1, x2] = this.value[0].map(xscale.apply).sort(asc);
+      const [y1, y2] = this.value[1].map(yscale.apply).sort(asc);
+      this.g.call(brush.moveSilent, [[x1, y1], [x2, y2]]);
+    }
+
+    svg.addEventListener('pointerenter', () => this.activate());
+  }
+}

package/src/interactors/Nearest.js

@@ -0,0 +1,66 @@
+import { isSelection } from '@uwdata/mosaic-core';
+import { eq, literal } from '@uwdata/mosaic-sql';
+import { select, pointer } from 'd3';
+import { getField } from './util/get-field.js';
+
+export class Nearest {
+  constructor(mark, {
+    selection,
+    channel,
+    field
+  }) {
+    this.mark = mark;
+    this.selection = selection;
+    this.clients = new Set().add(mark);
+    this.channel = channel;
+    this.field = field || getField(mark, [channel]);
+  }
+
+  clause(value) {
+    const { clients, field } = this;
+    const predicate = value ? eq(field, literal(value)) : null;
+    return {
+      source: this,
+      schema: { type: 'point' },
+      clients,
+      value,
+      predicate
+    };
+  }
+
+  init(svg) {
+    const that = this;
+    const { mark, channel, selection } = this;
+    const { data } = mark;
+    const key = mark.channelField(channel).as;
+
+    const facets = select(svg).selectAll('g[aria-label="facet"]');
+    const root = facets.size() ? facets : select(svg);
+    const scale = svg.scale(channel);
+    const param = !isSelection(selection);
+
+    root.on('pointerdown pointermove', function(evt) {
+      const [x, y] = pointer(evt, this);
+      const z = findNearest(data, key, scale.invert(channel === 'x' ? x : y));
+      selection.update(param ? z : that.clause(z));
+    });
+
+    if (param) return;
+    svg.addEventListener('pointerenter', () => {
+      this.selection.activate(this.clause(0));
+    });
+  }
+}
+
+function findNearest(data, key, value) {
+  let dist = Infinity;
+  let v;
+  data.forEach(d => {
+    const delta = Math.abs(d[key] - value);
+    if (delta < dist) {
+      dist = delta;
+      v = d[key];
+    }
+  });
+  return v;
+}

package/src/interactors/PanZoom.js

@@ -0,0 +1,121 @@
+import { select, zoom, ZoomTransform } from 'd3';
+import { Selection } from '@uwdata/mosaic-core';
+import { isBetween } from '@uwdata/mosaic-sql';
+import { getField } from './util/get-field.js';
+
+const asc = (a, b) => a - b;
+
+export class PanZoom {
+  constructor(mark, {
+    x = new Selection(),
+    y = new Selection(),
+    xfield,
+    yfield,
+    zoom = true,
+    panx = true,
+    pany = true
+  }) {
+    this.mark = mark;
+    this.xsel = x;
+    this.ysel = y;
+    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
+    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
+    this.zoom = extent(zoom, [0, Infinity], [1, 1]);
+    this.panx = this.xsel && panx;
+    this.pany = this.ysel && pany;
+
+    const { plot } = mark;
+    if (panx) {
+      this.xsel.addEventListener('value', value => {
+        if (plot.setAttribute('xDomain', value)) plot.update();
+      });
+    }
+    if (pany) {
+      this.ysel.addEventListener('value', value => {
+        if (plot.setAttribute('yDomain', value)) plot.update();
+      });
+    }
+  }
+
+  publish(transform) {
+    if (this.panx) {
+      const xdom = rescaleX(transform, this.xscale);
+      this.xsel.update(this.clause(xdom, this.xfield, this.xscale));
+    }
+    if (this.pany) {
+      const ydom = rescaleY(transform, this.yscale);
+      this.ysel.update(this.clause(ydom, this.yfield, this.yscale));
+    }
+  }
+
+  clause(value, field, scale) {
+    return {
+      source: this,
+      schema: { type: 'interval', scales: [scale] },
+      clients: this.mark.plot.markSet,
+      value,
+      predicate: value ? isBetween(field, value) : null
+    };
+  }
+
+  init(svg) {
+    this.svg = svg;
+    if (this.initialized) return; else this.initialized = true;
+
+    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
+
+    this.xscale = svg.scale('x');
+    this.yscale = svg.scale('y');
+    const rx = this.xscale.range.slice().sort(asc);
+    const ry = this.yscale.range.slice().sort(asc);
+    const tx = extent(panx, [-Infinity, Infinity], rx);
+    const ty = extent(pany, [-Infinity, Infinity], ry);
+
+    const z = zoom()
+      .extent([[rx[0], ry[0]], [rx[1], ry[1]]])
+      .scaleExtent(this.zoom)
+      .translateExtent([[tx[0], ty[0]], [tx[1], ty[1]]])
+      .on('start', () => {
+        this.xscale = this.svg.scale('x');
+        this.yscale = this.svg.scale('y');
+      })
+      .on('end', () => element.__zoom = new ZoomTransform(1, 0, 0))
+      .on('zoom', ({ transform }) => this.publish(transform));
+
+    select(element).call(z);
+
+    if (panx || pany) {
+      let enter = false;
+      element.addEventListener('mouseenter', () => {
+        if (enter) return; else enter = true;
+        if (panx) {
+          const { xscale, xfield } = this;
+          xsel.activate(this.clause(xscale.domain, xfield, xscale));
+        }
+        if (pany) {
+          const { yscale, yfield } = this;
+          ysel.activate(this.clause(yscale.domain, yfield, yscale));
+        }
+      });
+      element.addEventListener('mouseleave', () => enter = false);
+    }
+  }
+}
+
+function extent(ext, defaultTrue, defaultFalse) {
+  return ext
+    ? (Array.isArray(ext) ? ext : defaultTrue)
+    : defaultFalse;
+}
+
+function rescaleX(transform, scale) {
+  return scale.range
+    .map(transform.invertX, transform)
+    .map(scale.invert, scale);
+}
+
+function rescaleY(transform, scale) {
+  return scale.range
+    .map(transform.invertY, transform)
+    .map(scale.invert, scale);
+}

package/src/interactors/Toggle.js

@@ -0,0 +1,111 @@
+import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
+
+export class Toggle {
+  constructor(mark, {
+    selection,
+    channels,
+    peers = true
+  }) {
+    this.value = null;
+    this.mark = mark;
+    this.selection = selection;
+    this.peers = peers;
+    this.channels = channels.map(c => {
+      const q = c === 'color' ? ['fill', 'stroke']
+        : c === 'x' ? ['x', 'x1', 'x2']
+        : c === 'y' ? ['y', 'y1', 'y2']
+        : [c];
+      for (let i = 0; i < q.length; ++i) {
+        const f = mark.channelField(q[i]);
+        if (f) return {
+          field: f.field?.basis || f.field,
+          as: f.as
+        };
+      }
+      throw new Error(`Missing channel: ${c}`);
+    });
+  }
+
+  clause(value) {
+    const { channels, mark } = this;
+    let predicate = null;
+
+    if (value) {
+      const clauses = value.map(vals => {
+        const list = vals.map((v, i) => {
+          return isNotDistinct(channels[i].field, literal(v));
+        });
+        return list.length > 1 ? and(list) : list[0];
+      });
+      predicate = clauses.length > 1 ? or(clauses) : clauses[0];
+    }
+
+    return {
+      source: this,
+      schema: { type: 'point' },
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
+      value,
+      predicate
+    };
+  }
+
+  init(svg, selector, accessor) {
+    const { mark, channels, selection } = this;
+    const { data } = mark;
+    accessor = accessor || (target => {
+      const datum = data[target.__data__];
+      return channels.map(c => datum[c.as]);
+    });
+
+    selector = selector || `[data-index="${mark.index}"]`;
+    const groups = new Set(svg.querySelectorAll(selector));
+
+    svg.addEventListener('pointerdown', evt => {
+      const state = selection.single ? selection.value : this.value;
+      const target = evt.target;
+      let value = null;
+
+      if (isTargetElement(groups, target)) {
+        const point = accessor(target);
+        if (evt.shiftKey && state?.length) {
+          value = state.filter(s => neq(s, point));
+          if (value.length === state.length) value.push(point);
+        } else if (state?.length === 1 && !neq(state[0], point)) {
+          value = null;
+        } else {
+          value = [point];
+        }
+      }
+
+      this.value = value;
+      if (neqSome(state, value)) {
+        selection.update(this.clause(value));
+      }
+    });
+
+    svg.addEventListener('pointerenter', () => {
+      this.selection.activate(this.clause([this.channels.map(() => 0)]));
+    });
+  }
+}
+
+function isTargetElement(groups, node) {
+  return groups.has(node)
+    || groups.has(node.parentNode)
+    || groups.has(node.parentNode?.parentNode);
+}
+
+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])));
+}
+
+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;
+}