@uwdata/vgplot 0.4.0 → 0.5.0

package/src/{directives → plot}/attributes.js

@@ -1,8 +1,8 @@
 import { isParam } from '@uwdata/mosaic-core';
-import { namedPlots } from './plot.js';
+import { setNamedPlot } from './named-plots.js';
 
 export function name(name) {
-  return plot => namedPlots.set(name, plot);
+  return plot => setNamedPlot(this, name, plot);
 }
 
 function setAttribute(plot, name, value) {
@@ -19,11 +19,11 @@ function setAttribute(plot, name, value) {
   }
 }
 
-export function attribute(name, value) {
+function attribute(name, value) {
   return plot => { setAttribute(plot, name, value); };
 }
 
-export function attributes(values) {
+function attributes(values) {
   return plot => {
     for (const [name, value] of Object.entries(values)) {
       setAttribute(plot, name, value)
@@ -41,6 +41,15 @@ export function margins(object) {
   return attributes(attr);
 }
 
+export function margin(value) {
+  return attributes({
+    marginTop: value,
+    marginBottom: value,
+    marginLeft: value,
+    marginRight: value
+  });
+}
+
 export function xyDomain(value) {
   return attributes({ xDomain: value, yDomain: value });
 }
@@ -51,7 +60,6 @@ const attrf = name => value => attribute(name, value);
 export const style = attrf('style');
 export const width = attrf('width');
 export const height = attrf('height');
-export const margin = attrf('margin');
 export const marginLeft = attrf('marginLeft');
 export const marginRight = attrf('marginRight');
 export const marginTop = attrf('marginTop');
@@ -201,6 +209,7 @@ export const colorScale = attrf('colorScale');
 export const colorDomain = attrf('colorDomain');
 export const colorRange = attrf('colorRange');
 export const colorClamp = attrf('colorClamp');
+export const colorN = attrf('colorN');
 export const colorNice = attrf('colorNice');
 export const colorScheme = attrf('colorScheme');
 export const colorInterpolate = attrf('colorInterpolate');

package/src/{directives → plot}/interactors.js

@@ -1,9 +1,11 @@
-import { Highlight } from '../interactors/Highlight.js';
-import { Toggle } from '../interactors/Toggle.js';
-import { Interval1D } from '../interactors/Interval1D.js';
-import { Interval2D } from '../interactors/Interval2D.js';
-import { PanZoom } from '../interactors/PanZoom.js';
-import { Nearest } from '../interactors/Nearest.js';
+import {
+  Highlight,
+  Toggle,
+  Interval1D,
+  Interval2D,
+  PanZoom,
+  Nearest
+} from '@uwdata/mosaic-plot';
 
 function interactor(InteractorClass, options) {
   return plot => {

package/src/{directives → plot}/legends.js

@@ -1,5 +1,5 @@
-import { Legend } from '../legend.js';
-import { namedPlots } from './plot.js';
+import { Legend } from '@uwdata/mosaic-plot';
+import { requestNamedPlot } from './named-plots.js';
 
 function legend(channel, options = {}) {
   if (options.for) {
@@ -8,7 +8,7 @@ function legend(channel, options = {}) {
     const type = typeof maybePlot;
     const add = plot => plot.addLegend(legend, false);
     if (type === 'string') {
-      namedPlots.request(maybePlot, add);
+      requestNamedPlot(this, maybePlot, add);
     } else if (maybePlot.value) {
       add(maybePlot.value);
     }
@@ -18,6 +18,14 @@ function legend(channel, options = {}) {
   }
 }
 
-export const colorLegend = options => legend('color', options);
-export const opacityLegend = options => legend('opacity', options);
-export const symbolLegend = options => legend('symbol', options);
+export function colorLegend(options) {
+  return legend.call(this, 'color', options);
+}
+
+export function opacityLegend(options) {
+  return legend.call(this, 'opacity', options);
+}
+
+export function symbolLegend(options) {
+  return legend.call(this, 'symbol', options);
+}

package/src/{directives → plot}/marks.js

@@ -1,13 +1,16 @@
-import { Mark } from '../marks/Mark.js';
-import { ConnectedMark } from '../marks/ConnectedMark.js';
-import { Density1DMark } from '../marks/Density1DMark.js';
-import { Density2DMark } from '../marks/Density2DMark.js';
-import { DenseLineMark } from '../marks/DenseLineMark.js';
-import { ContourMark } from '../marks/ContourMark.js';
-import { HexbinMark } from '../marks/HexbinMark.js';
-import { RasterMark } from '../marks/RasterMark.js';
-import { RasterTileMark } from '../marks/RasterTileMark.js';
-import { RegressionMark } from '../marks/RegressionMark.js';
+import {
+  Mark,
+  ConnectedMark,
+  ContourMark,
+  Density1DMark,
+  Density2DMark,
+  DenseLineMark,
+  GeoMark,
+  HexbinMark,
+  RasterMark,
+  RasterTileMark,
+  RegressionMark
+} from '@uwdata/mosaic-plot';
 
 const decorators = new Set([
   'frame',
@@ -17,8 +20,8 @@ const decorators = new Set([
   'graticule', 'sphere'
 ]);
 
-function mark(type, data, channels) {
-  if (arguments.length === 2) {
+function mark(type, data, channels = {}) {
+  if (arguments.length === 2 && !Array.isArray(data)) {
     channels = data;
     data = decorators.has(type) ? null : [{}];
   }
@@ -118,6 +121,6 @@ export const gridY = (...args) => mark('gridY', ...args);
 export const gridFx = (...args) => mark('gridFx', ...args);
 export const gridFy = (...args) => mark('gridFy', ...args);
 
-export const geo = (...args) => mark('geo', ...args);
+export const geo = (...args) => implicitType(GeoMark, ...args);
 export const sphere = (...args) => mark('sphere', ...args);
 export const graticule = (...args) => mark('graticule', ...args);

package/src/plot/named-plots.js

@@ -0,0 +1,49 @@
+export class NamedPlots extends Map {
+  request(name, callback) {
+    if (this.has(name)) {
+      callback(this.get(name));
+    } else {
+      const waiting = this.waiting || (this.waiting = new Map);
+      const list = waiting.get(name) || [];
+      waiting.set(name, list.concat(callback));
+    }
+  }
+  set(name, plot) {
+    if (this.has(name)) {
+      console.warn(`Overwriting named plot "${name}".`);
+    }
+    const { waiting } = this;
+    if (waiting?.has(name)) {
+      waiting.get(name).forEach(fn => fn(plot));
+      waiting.delete(name);
+    }
+    return super.set(name, plot);
+  }
+}
+
+/**
+ * Default instance of named plots map.
+ */
+export const namedPlots = new NamedPlots();
+
+/**
+ * Context-sensitive lookup of named plots.
+ * This method proxies access to the NamedPlots.request().
+ * If the provided context object has a local namedPlots, that is used.
+ * Otherwise the default instance is used.
+ */
+export function requestNamedPlot(ctx, name, callback) {
+  const map = ctx?.context?.namedPlots ?? namedPlots;
+  map.request(name, callback);
+}
+
+/**
+ * Context-sensitive addition of named plots.
+ * This method proxies access to the NamedPlots.set().
+ * If the provided context object has a local namedPlots, that is used.
+ * Otherwise the default instance is used.
+ */
+export function setNamedPlot(ctx, name, plot) {
+  const map = ctx?.context?.namedPlots ?? namedPlots;
+  map.set(name, plot);
+}

package/src/plot/plot.js

@@ -0,0 +1,9 @@
+import { Plot } from '@uwdata/mosaic-plot';
+import { connect } from '../connect.js';
+
+export function plot(...directives) {
+  const p = new Plot();
+  directives.flat().forEach(dir => dir(p));
+  connect(this, ...p.marks); // this -> optional API context
+  return p.element;
+}

package/src/directives/plot.js

@@ -1,39 +0,0 @@
-import { coordinator } from '@uwdata/mosaic-core';
-import { Plot } from '../plot.js';
-
-export function plot(...directives) {
-  const p = new Plot();
-  directives.flat().forEach(dir => dir(p));
-  p.marks.forEach(mark => coordinator().connect(mark));
-  return p.element;
-}
-
-export class NamedPlots extends Map {
-  request(name, callback) {
-    if (this.has(name)) {
-      callback(this.get(name));
-    } else {
-      const waiting = this.waiting || (this.waiting = new Map);
-      const list = waiting.get(name) || [];
-      waiting.set(name, list.concat(callback));
-    }
-  }
-  set(name, plot) {
-    if (this.has(name)) {
-      console.warn(`Overwriting named plot "${name}".`);
-    }
-    const { waiting } = this;
-    if (waiting?.has(name)) {
-      waiting.get(name).forEach(fn => fn(plot));
-      waiting.delete(name);
-    }
-    return super.set(name, plot);
-  }
-}
-
-export const namedPlots = new NamedPlots();
-
-export function reset() {
-  namedPlots.clear();
-  coordinator().clear();
-}

package/src/interactors/Highlight.js

@@ -1,101 +0,0 @@
-import { coordinator, 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 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

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

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

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