@uwdata/vgplot 0.4.0 → 0.5.0

package/src/marks/Mark.js

@@ -1,195 +0,0 @@
-import { MosaicClient } from '@uwdata/mosaic-core';
-import { Query, Ref, column, isParamLike } from '@uwdata/mosaic-sql';
-import { isColor } from './util/is-color.js';
-import { isConstantOption } from './util/is-constant-option.js';
-import { isSymbol } from './util/is-symbol.js';
-import { toDataArray } from './util/to-data-array.js';
-import { Transform } from '../symbols.js';
-
-const isColorChannel = channel => channel === 'stroke' || channel === 'fill';
-const isSymbolChannel = channel => channel === 'symbol';
-const isFieldObject = (channel, field) => {
-  return channel !== 'sort' && field != null && !Array.isArray(field);
-};
-const fieldEntry = (channel, field) => ({
-  channel,
-  field,
-  as: field instanceof Ref ? field.column : channel
-});
-const valueEntry = (channel, value) => ({ channel, value });
-
-export class Mark extends MosaicClient {
-  constructor(type, source, encodings, reqs = {}) {
-    super(source?.options?.filterBy);
-    this.type = type;
-    this.reqs = reqs;
-
-    this.source = source;
-    if (Array.isArray(this.source)) {
-      this.data = this.source;
-    }
-
-    const channels = this.channels = [];
-    const params = this.params = new Set;
-
-    const process = (channel, entry) => {
-      const type = typeof entry;
-      if (type === 'function' && entry[Transform]) {
-        const enc = entry(this, channel);
-        for (const key in enc) {
-          process(key, enc[key]);
-        }
-      } else if (type === 'string') {
-        if (
-          isConstantOption(channel) ||
-          isColorChannel(channel) && isColor(entry) ||
-          isSymbolChannel(channel) && isSymbol(entry)
-        ) {
-          // interpret constants and color/symbol names as values, not fields
-          channels.push(valueEntry(channel, entry));
-        } else {
-          channels.push(fieldEntry(channel, column(entry)));
-        }
-      } else if (isParamLike(entry)) {
-        if (Array.isArray(entry.columns)) {
-          channels.push(fieldEntry(channel, entry));
-          params.add(entry);
-        } else {
-          const c = valueEntry(channel, entry.value);
-          channels.push(c);
-          entry.addEventListener('value', value => {
-            c.value = value;
-            return this.update();
-          });
-        }
-      } else if (type === 'object' && isFieldObject(channel, entry)) {
-        channels.push(fieldEntry(channel, entry));
-      } else if (entry !== undefined) {
-        channels.push(valueEntry(channel, entry));
-      }
-    };
-
-    for (const channel in encodings) {
-      process(channel, encodings[channel]);
-    }
-  }
-
-  setPlot(plot, index) {
-    this.plot = plot;
-    this.index = index;
-    plot.addParams(this, this.params);
-    if (this.source?.table) this.queryPending();
-  }
-
-  hasOwnData() {
-    return this.source == null || Array.isArray(this.source);
-  }
-
-  channel(channel) {
-    return this.channels.find(c => c.channel === channel);
-  }
-
-  channelField(...channels) {
-    const list = channels.flat();
-    for (const channel of list) {
-      const c = this.channel(channel);
-      if (c?.field) return c;
-    }
-    return null;
-  }
-
-  fields() {
-    if (this.hasOwnData()) return null;
-    const { source: { table }, channels, reqs } = this;
-
-    const fields = new Map;
-    for (const { channel, field } of channels) {
-      const column = field?.column;
-      if (!column) {
-        continue; // no column to lookup
-      } else if (field.stats?.length || reqs[channel]) {
-        if (!fields.has(column)) fields.set(column, new Set);
-        const entry = fields.get(column);
-        reqs[channel]?.forEach(s => entry.add(s));
-        field.stats?.forEach(s => entry.add(s));
-      }
-    }
-    return Array.from(fields, ([column, stats]) => {
-      return { table, column, stats: Array.from(stats) };
-    });
-  }
-
-  fieldInfo(info) {
-    this.stats = info.reduce(
-      (o, d) => (o[d.column] = d, o),
-      Object.create(null)
-    );
-    return this;
-  }
-
-  query(filter = []) {
-    if (this.hasOwnData()) return null;
-    const { channels, source: { table } } = this;
-    return markQuery(channels, table).where(filter);
-  }
-
-  queryPending() {
-    this.plot.pending(this);
-    return this;
-  }
-
-  queryResult(data) {
-    this.data = toDataArray(data);
-    return this;
-  }
-
-  update() {
-    return this.plot.update(this);
-  }
-
-  plotSpecs() {
-    const { type, data, channels } = this;
-    const options = {};
-    for (const c of channels) {
-      options[c.channel] = channelOption(c)
-    }
-    return [{ type, data, options }];
-  }
-}
-
-export function channelOption(c) {
-  // use a scale override for color channels to sidestep
-  // https://github.com/observablehq/plot/issues/1593
-  return Object.hasOwn(c, 'value') ? c.value
-    : isColorChannel(c.channel) ? { value: c.as, scale: 'color' }
-    : c.as;
-}
-
-export function markQuery(channels, table, skip = []) {
-  const q = Query.from({ source: table });
-  const dims = new Set;
-  let aggr = false;
-
-  for (const c of channels) {
-    const { channel, field, as } = c;
-    if (skip.includes(channel)) continue;
-
-    if (channel === 'orderby') {
-      q.orderby(c.value);
-    } else if (field) {
-      if (field.aggregate) {
-        aggr = true;
-      } else {
-        if (dims.has(as)) continue;
-        dims.add(as);
-      }
-      q.select({ [as]: field });
-    }
-  }
-
-  if (aggr) {
-    q.groupby(Array.from(dims));
-  }
-
-  return q;
-}

package/src/marks/RasterMark.js

@@ -1,122 +0,0 @@
-import { scale } from '@observablehq/plot';
-import { isColor } from './util/is-color.js';
-import { createCanvas, raster, opacityMap, palette } from './util/raster.js';
-import { Grid2DMark } from './Grid2DMark.js';
-
-export class RasterMark extends Grid2DMark {
-  constructor(source, options) {
-    super('image', source, options);
-  }
-
-  setPlot(plot, index) {
-    const update = () => { if (this.stats) this.rasterize(); };
-    plot.addAttributeListener('schemeColor', update);
-    super.setPlot(plot, index);
-  }
-
-  convolve() {
-    return super.convolve().rasterize();
-  }
-
-  rasterize() {
-    const { bins, kde, groupby } = this;
-    const [ w, h ] = bins;
-
-    // raster data
-    const { canvas, ctx, img } = imageData(this, w, h);
-
-    // scale function to map densities to [0, 1]
-    const s = imageScale(this);
-
-    // gather color domain as needed
-    const idx = groupby.indexOf(this.channelField('fill')?.as);
-    const domain = idx < 0 ? [] : kde.map(({ key }) => key[idx]);
-
-    // generate raster images
-    this.data = kde.map(grid => {
-      const palette = imagePalette(this, domain, grid.key?.[idx]);
-      raster(grid, img.data, w, h, s, palette);
-      ctx.putImageData(img, 0, 0);
-      return { src: canvas.toDataURL() };
-    });
-
-    return this;
-  }
-
-  plotSpecs() {
-    const { type, plot, data } = this;
-    const options = {
-      src: 'src',
-      width: plot.innerWidth(),
-      height: plot.innerHeight(),
-      preserveAspectRatio: 'none',
-      imageRendering: this.channel('imageRendering')?.value,
-      frameAnchor: 'middle'
-    };
-    return [{ type, data, options }];
-  }
-}
-
-function imageData(mark, w, h) {
-  if (!mark.image || mark.image.w !== w || mark.image.h !== h) {
-    const canvas = createCanvas(w, h);
-    const ctx = canvas.getContext('2d', { willReadFrequently: true });
-    const img = ctx.getImageData(0, 0, w, h);
-    mark.image = { canvas, ctx, img, w, h };
-  }
-  return mark.image;
-}
-
-function imageScale(mark) {
-  const { densityMap, kde, plot } = mark;
-  let domain = densityMap.fill && plot.getAttribute('colorDomain');
-
-  // compute kde grid extents if no explicit domain
-  if (!domain) {
-    let lo = 0, hi = 0;
-    kde.forEach(grid => {
-      for (const v of grid) {
-        if (v < lo) lo = v;
-        if (v > hi) hi = v;
-      }
-    });
-    domain = (lo === 0 && hi === 0) ? [0, 1] : [lo, hi];
-  }
-
-  const type = plot.getAttribute('colorScale');
-  return scale({ x: { type, domain, range: [0, 1] } }).apply;
-}
-
-function imagePalette(mark, domain, value, steps = 1024) {
-  const { densityMap, plot } = mark;
-  const scheme = plot.getAttribute('colorScheme');
-  let color;
-
-  if (densityMap.fill) {
-    if (scheme) {
-      try {
-        return palette(
-          steps,
-          scale({color: { scheme, domain: [0, 1] }}).interpolate
-        );
-      } catch (err) {
-        console.warn(err);
-      }
-    }
-  } else if (domain.length) {
-    // fill is based on data values
-    const range = plot.getAttribute('colorRange');
-    const spec = {
-      domain,
-      range,
-      scheme: scheme || (range ? undefined : 'tableau10')
-    };
-    color = scale({ color: spec }).apply(value);
-  } else {
-    // fill color is a constant
-    const fill = mark.channelField('fill');
-    color = isColor(fill?.value) ? fill.value : undefined;
-  }
-
-  return palette(steps, opacityMap(color));
-}

package/src/marks/RasterTileMark.js

@@ -1,332 +0,0 @@
-import { coordinator } from '@uwdata/mosaic-core';
-import { Query, count, isBetween, lt, lte, neq, sql, sum } from '@uwdata/mosaic-sql';
-import { scale } from '@observablehq/plot';
-import { extentX, extentY } from './util/extent.js';
-import { isColor } from './util/is-color.js';
-import { createCanvas, raster, opacityMap, palette } from './util/raster.js';
-import { Grid2DMark } from './Grid2DMark.js';
-import { binField } from './util/bin-field.js';
-
-export class RasterTileMark extends Grid2DMark {
-  constructor(source, options) {
-    const { origin = [0, 0], dim = 'xy', ...markOptions } = options;
-    super('image', source, markOptions);
-
-    // TODO: make part of data source instead of options?
-    this.origin = origin;
-    this.tileX = dim.toLowerCase().includes('x');
-    this.tileY = dim.toLowerCase().includes('y');
-  }
-
-  setPlot(plot, index) {
-    const update = () => { if (this.stats) this.rasterize(); };
-    plot.addAttributeListener('schemeColor', update);
-    super.setPlot(plot, index);
-  }
-
-  requestQuery() {
-    return this.requestTiles();
-  }
-
-  query(filter = []) {
-    this._filter = filter;
-    // we will submit our own queries
-    return null;
-  }
-
-  tileQuery(extent) {
-    const { plot, binType, binPad, channels, densityMap, source } = this;
-    const [[x0, x1], [y0, y1]] = extent;
-    const [nx, ny] = this.bins;
-    const bx = binField(this, 'x');
-    const by = binField(this, 'y');
-    const rx = !!plot.getAttribute('xReverse');
-    const ry = !!plot.getAttribute('yReverse');
-    const x = bin1d(bx, x0, x1, nx, rx, binPad);
-    const y = bin1d(by, y0, y1, ny, ry, binPad);
-
-    // with padded bins, include the entire domain extent
-    // if the bins are flush, exclude the extent max
-    const bounds = binPad
-      ? [isBetween(bx, [x0, x1]), isBetween(by, [y0, y1])]
-      : [lte(x0, bx), lt(bx, x1), lte(y0, by), lt(by, y1)];
-
-    const q = Query
-      .from(source.table)
-      .where(bounds);
-
-    const groupby = this.groupby = [];
-    let agg = count();
-    for (const c of channels) {
-      if (Object.hasOwn(c, 'field')) {
-        const { channel, field } = c;
-        if (field.aggregate) {
-          agg = field;
-          densityMap[channel] = true;
-        } else if (channel === 'weight') {
-          agg = sum(field);
-        } else if (channel !== 'x' && channel !== 'y') {
-          q.select({ [channel]: field });
-          groupby.push(channel);
-        }
-      }
-    }
-
-    return binType === 'linear'
-      ? binLinear2d(q, x, y, agg, nx, groupby)
-      : bin2d(q, x, y, agg, nx, groupby);
-  }
-
-  async requestTiles() {
-    // get coordinator, cancel prior prefetch queries
-    const mc = coordinator();
-    if (this.prefetch) mc.cancel(this.prefetch);
-
-    // get view extent info
-    const { binPad, tileX, tileY, origin: [tx, ty] } = this;
-    const [m, n] = this.bins = this.binDimensions(this);
-    const [x0, x1] = extentX(this, this._filter);
-    const [y0, y1] = extentY(this, this._filter);
-    const xspan = x1 - x0;
-    const yspan = y1 - y0;
-    const xx = Math.floor((x0 - tx) * (m - binPad) / xspan);
-    const yy = Math.floor((y0 - ty) * (n - binPad) / yspan);
-
-    const tileExtent = (i, j) => [
-      [tx + i * xspan, tx + (i + 1) * xspan],
-      [ty + j * yspan, ty + (j + 1) * yspan]
-    ];
-
-    // get tile coords that overlap current view extent
-    const i0 = Math.floor((x0 - tx) / xspan);
-    const i1 = tileX ? tileFloor((x1 - tx) / xspan) : i0;
-    const j0 = Math.floor((y0 - ty) / yspan);
-    const j1 = tileY ? tileFloor((y1 - ty) / yspan) : j0;
-
-    // query for currently needed data tiles
-    const coords = [];
-    for (let i = i0; i <= i1; ++i) {
-      for (let j = j0; j <= j1; ++j) {
-        coords.push([i, j]);
-      }
-    }
-    const queries = coords.map(
-      ([i, j]) => mc.query(this.tileQuery(tileExtent(i, j)))
-    );
-
-    // prefetch tiles along periphery of current tiles
-    const prefetchCoords = [];
-    if (tileX) {
-      for (let j = j0; j <= j1; ++j) {
-        prefetchCoords.push([i1 + 1, j]);
-        prefetchCoords.push([i0 - 1, j]);
-      }
-    }
-    if (tileY) {
-      const x0 = tileX ? i0 - 1 : i0;
-      const x1 = tileX ? i1 + 1 : i1;
-      for (let i = x0; i <= x1; ++i) {
-        prefetchCoords.push([i, j1 + 1]);
-        prefetchCoords.push([i, j0 - 1]);
-      }
-    }
-    this.prefetch = prefetchCoords.map(
-      ([i, j]) => mc.prefetch(this.tileQuery(tileExtent(i, j)))
-    );
-
-    // wait for tile queries to complete, then update
-    const tiles = await Promise.all(queries);
-    this.grids = [{ grid: processTiles(m, n, xx, yy, coords, tiles) }];
-    this.convolve().update();
-  }
-
-  convolve() {
-    return super.convolve().rasterize();
-  }
-
-  rasterize() {
-    const { bins, kde, groupby } = this;
-    const [ w, h ] = bins;
-
-    // raster data
-    const { canvas, ctx, img } = imageData(this, w, h);
-
-    // scale function to map densities to [0, 1]
-    const s = imageScale(this);
-
-    // gather color domain as needed
-    const idx = groupby.indexOf(this.channelField('fill')?.as);
-    const domain = idx < 0 ? [] : kde.map(({ key }) => key[idx]);
-
-    // generate raster images
-    this.data = kde.map(grid => {
-      const palette = imagePalette(this, domain, grid.key?.[idx]);
-      raster(grid, img.data, w, h, s, palette);
-      ctx.putImageData(img, 0, 0);
-      return { src: canvas.toDataURL() };
-    });
-
-    return this;
-  }
-
-  plotSpecs() {
-    const { type, data, plot } = this;
-    const options = {
-      src: 'src',
-      width: plot.innerWidth(),
-      height: plot.innerHeight(),
-      preserveAspectRatio: 'none',
-      imageRendering: this.channel('imageRendering')?.value,
-      frameAnchor: 'middle'
-    };
-    return [{ type, data, options }];
-  }
-}
-
-function processTiles(m, n, x, y, coords, tiles) {
-  const grid = new Float64Array(m * n);
-  tiles.forEach((data, index) => {
-    const [i, j] = coords[index];
-    const tx = i * m - x;
-    const ty = j * n - y;
-    copy(m, n, grid, data, tx, ty);
-  });
-  return grid;
-}
-
-function copy(m, n, grid, values, tx, ty) {
-  // index = row + col * width
-  const num = values.numRows;
-  if (num === 0) return;
-  const index = values.getChild('index').toArray();
-  const value = values.getChild('value').toArray();
-  for (let row = 0; row < num; ++row) {
-    const idx = index[row];
-    const i = tx + (idx % m);
-    const j = ty + Math.floor(idx / m);
-    if (0 <= i && i < m && 0 <= j && j < n) {
-      grid[i + j * m] = value[row];
-    }
-  }
-}
-
-function imageData(mark, w, h) {
-  if (!mark.image || mark.image.w !== w || mark.image.h !== h) {
-    const canvas = createCanvas(w, h);
-    const ctx = canvas.getContext('2d', { willReadFrequently: true });
-    const img = ctx.getImageData(0, 0, w, h);
-    mark.image = { canvas, ctx, img, w, h };
-  }
-  return mark.image;
-}
-
-function imageScale(mark) {
-  const { densityMap, kde, plot } = mark;
-  let domain = densityMap.fill && plot.getAttribute('colorDomain');
-
-  // compute kde grid extents if no explicit domain
-  if (!domain) {
-    let lo = 0, hi = 0;
-    kde.forEach(grid => {
-      for (const v of grid) {
-        if (v < lo) lo = v;
-        if (v > hi) hi = v;
-      }
-    });
-    domain = (lo === 0 && hi === 0) ? [0, 1] : [lo, hi];
-  }
-
-  const type = plot.getAttribute('colorScale');
-  return scale({ x: { type, domain, range: [0, 1] } }).apply;
-}
-
-function imagePalette(mark, domain, value, steps = 1024) {
-  const { densityMap, plot } = mark;
-  const scheme = plot.getAttribute('colorScheme');
-  let color;
-
-  if (densityMap.fill) {
-    if (scheme) {
-      try {
-        return palette(
-          steps,
-          scale({color: { scheme, domain: [0, 1] }}).interpolate
-        );
-      } catch (err) {
-        console.warn(err);
-      }
-    }
-  } else if (domain.length) {
-    // fill is based on data values
-    const range = plot.getAttribute('colorRange');
-    const spec = {
-      domain,
-      range,
-      scheme: scheme || (range ? undefined : 'tableau10')
-    };
-    color = scale({ color: spec }).apply(value);
-  } else {
-    // fill color is a constant
-    const fill = mark.channelField('fill');
-    color = isColor(fill?.value) ? fill.value : undefined;
-  }
-
-  return palette(steps, opacityMap(color));
-}
-
-function bin1d(x, x0, x1, n, reverse, pad) {
-  const d = (n - pad) / (x1 - x0);
-  const f = d !== 1 ? ` * ${d}::DOUBLE` : '';
-  return reverse
-    ? sql`(${x1} - ${x}::DOUBLE)${f}`
-    : sql`(${x}::DOUBLE - ${x0})${f}`;
-}
-
-function bin2d(q, xp, yp, value, xn, groupby) {
-  return q
-    .select({
-      index: sql`FLOOR(${xp})::INTEGER + FLOOR(${yp})::INTEGER * ${xn}`,
-      value
-    })
-    .groupby('index', groupby);
-}
-
-function binLinear2d(q, xp, yp, value, xn, groupby) {
-  const w = value.column ? `* ${value.column}` : '';
-  const subq = (i, w) => q.clone().select({ xp, yp, i, w });
-
-  // grid[xu + yu * xn] += (xv - xp) * (yv - yp) * wi;
-  const a = subq(
-    sql`FLOOR(xp)::INTEGER + FLOOR(yp)::INTEGER * ${xn}`,
-    sql`(FLOOR(xp)::INTEGER + 1 - xp) * (FLOOR(yp)::INTEGER + 1 - yp)${w}`
-  );
-
-  // grid[xu + yv * xn] += (xv - xp) * (yp - yu) * wi;
-  const b = subq(
-    sql`FLOOR(xp)::INTEGER + (FLOOR(yp)::INTEGER + 1) * ${xn}`,
-    sql`(FLOOR(xp)::INTEGER + 1 - xp) * (yp - FLOOR(yp)::INTEGER)${w}`
-  );
-
-  // grid[xv + yu * xn] += (xp - xu) * (yv - yp) * wi;
-  const c = subq(
-    sql`FLOOR(xp)::INTEGER + 1 + FLOOR(yp)::INTEGER * ${xn}`,
-    sql`(xp - FLOOR(xp)::INTEGER) * (FLOOR(yp)::INTEGER + 1 - yp)${w}`
-  );
-
-  // grid[xv + yv * xn] += (xp - xu) * (yp - yu) * wi;
-  const d = subq(
-    sql`FLOOR(xp)::INTEGER + 1 + (FLOOR(yp)::INTEGER + 1) * ${xn}`,
-    sql`(xp - FLOOR(xp)::INTEGER) * (yp - FLOOR(yp)::INTEGER)${w}`
-  );
-
-  return Query
-    .from(Query.unionAll(a, b, c, d))
-    .select({ index: 'i', value: sum('w') }, groupby)
-    .groupby('index', groupby)
-    .having(neq('value', 0));
-}
-
-function tileFloor(value) {
-  const floored = Math.floor(value);
-  return floored === value ? floored - 1 : floored;
-}