@uwdata/mosaic-plot 0.5.0 → 0.6.0

package/src/marks/util/grid.js

@@ -1,57 +1,128 @@
-import { isArrowTable } from './is-arrow-table.js';
+import { InternSet, ascending } from 'd3';
+import { DECIMAL, FLOAT, INTEGER, isArrowTable } from './arrow.js';
+
+function arrayType(values, name = 'density') {
+  if (isArrowTable(values)) {
+    const type = values.getChild(name).type;
+    switch (type.typeId) {
+      case INTEGER:
+      case FLOAT:
+      case DECIMAL:
+        return Float64Array;
+      default:
+        return Array;
+    }
+  } else {
+    return typeof values[0][name] === 'number' ? Float64Array : Array;
+  }
+}
 
 export function grid1d(n, values) {
-  return valuesToGrid(new Float64Array(n), values);
+  const Type = arrayType(values);
+  return valuesToGrid(new Type(n), values);
 }
 
-export function grid2d(m, n, values, groupby = []) {
-  return groupby.length
-    ? Object.values(groupedValuesToGrids(m * n, values, groupby))
-    : [{ grid: valuesToGrid(new Float64Array(m * n), values) }];
+export function grid2d(m, n, values, aggr, groupby = []) {
+  if (groupby.length) {
+    // generate grids per group
+    return groupedValuesToGrids(m * n, values, aggr, groupby);
+  } else {
+    const cell = {};
+    aggr.forEach(name => {
+      const Type = arrayType(values, name);
+      cell[name] = valuesToGrid(new Type(m * n), values, name);
+    });
+    return [cell];
+  }
 }
 
-function valuesToGrid(grid, values) {
+function valuesToGrid(grid, values, name = 'density') {
   if (isArrowTable(values)) {
     // optimize access for Arrow tables
     const numRows = values.numRows;
     if (numRows === 0) return grid;
     const index = values.getChild('index').toArray();
-    const value = values.getChild('value').toArray();
+    const value = values.getChild(name).toArray();
     for (let row = 0; row < numRows; ++row) {
       grid[index[row]] = value[row];
     }
   } else {
     // fallback to iterable data
     for (const row of values) {
-      grid[row.index] = row.value;
+      grid[row.index] = row[name];
     }
   }
   return grid;
 }
 
-function groupedValuesToGrids(size, values, groupby) {
-  const grids = {};
-  const getGrid = key => {
-    const cell = grids[key] || (grids[key] = { key, grid: new Float64Array(size) });
-    return cell.grid;
+function groupedValuesToGrids(size, values, aggr, groupby) {
+  const Types = aggr.map(name => arrayType(values, name));
+  const numAggr = aggr.length;
+
+  const cellMap = {};
+  const getCell = key => {
+    let cell = cellMap[key];
+    if (!cell) {
+      cell = cellMap[key] = {};
+      groupby.forEach((name, i) => cell[name] = key[i]);
+      aggr.forEach((name, i) => cell[name] = new Types[i](size));
+    }
+    return cell;
   };
+
   if (isArrowTable(values)) {
     // optimize access for Arrow tables
     const numRows = values.numRows;
-    if (numRows === 0) return grids;
+    if (numRows === 0) return [];
+
     const index = values.getChild('index').toArray();
-    const value = values.getChild('value').toArray();
+    const value = aggr.map(name => values.getChild(name).toArray());
     const groups = groupby.map(name => values.getChild(name));
+
     for (let row = 0; row < numRows; ++row) {
       const key = groups.map(vec => vec.get(row));
-      getGrid(key)[index[row]] = value[row];
+      const cell = getCell(key);
+      for (let i = 0; i < numAggr; ++i) {
+        cell[aggr[i]][index[row]] = value[i][row];
+      }
     }
   } else {
     // fallback to iterable data
     for (const row of values) {
       const key = groupby.map(col => row[col]);
-      getGrid(key)[row.index] = row.value;
+      const cell = getCell(key);
+      for (let i = 0; i < numAggr; ++i) {
+        cell[aggr[i]][row.index] = row[aggr[i]];
+      }
     }
   }
-  return grids;
+
+  return Object.values(cellMap);
+}
+
+export function gridDomainContinuous(grids, prop) {
+  let lo = 0, hi = 0;
+  grids.forEach(cell => {
+    const grid = cell[prop];
+    const n = grid.length;
+    for (let i = 0; i < n; ++i) {
+      const v = grid[i];
+      if (v < lo) lo = v;
+      if (v > hi) hi = v;
+    }
+  });
+  return (lo === 0 && hi === 0) ? [0, 1] : [lo, hi];
+}
+
+export function gridDomainDiscrete(grids, prop) {
+    // TODO: sort options?
+  const values = new InternSet();
+  grids.forEach(cell => {
+    const grid = cell[prop];
+    const n = grid.length;
+    for (let i = 0; i < n; ++i) {
+      values.add(grid[i]);
+    }
+  });
+  return Array.from(values).sort(ascending);
 }

package/src/marks/util/raster.js

@@ -1,44 +1,131 @@
 import { rgb } from 'd3';
 
-export function raster(grid, data, w, h, scale, scheme) {
-  const n = (scheme.length >> 2) - 1;
-  for (let j = 0, k = 0; j < h; ++j) {
-    for (let i = 0, row = (h - j - 1) * w; i < w; ++i, k += 4) {
-      const c = (n * scale(grid[i + row])) << 2;
-      data[k + 0] = scheme[c + 0];
-      data[k + 1] = scheme[c + 1];
-      data[k + 2] = scheme[c + 2];
-      data[k + 3] = scheme[c + 3];
-    }
+export function createCanvas(w, h) {
+  if (typeof document !== 'undefined') {
+    const c = document.createElement('canvas');
+    c.setAttribute('width', w);
+    c.setAttribute('height', h);
+    return c;
   }
+  throw new Error('Can not create a canvas instance.');
 }
 
-export function palette(size, interp) {
-  const p = new Uint8ClampedArray(4 * size);
-  const n = size - 1;
+export function alphaConstant(v = 1) {
+  const a = (255 * v) | 0;
+
+  // rasterize
+  return (data, w, h) => {
+    for (let j = 0, k = 0; j < h; ++j) {
+      for (let i = 0; i < w; ++i, k += 4) {
+        data[k + 3] = a;
+      }
+    }
+  };
+}
+
+export function alphaScheme(scale) {
+  const { apply } = scale;
+
+  // rasterize
+  return (data, w, h, grid) => {
+    for (let j = 0, k = 0; j < h; ++j) {
+      for (let i = 0, row = (h - j - 1) * w; i < w; ++i, k += 4) {
+        data[k + 3] = (255 * apply(grid[i + row])) | 0;
+      }
+    }
+  };
+}
+
+export function colorConstant(v = {}) {
+  const { r = 0, g = 0, b = 0, opacity = 1 } = typeof v === 'string' ? rgb(v) : v;
+  const c = new Uint8ClampedArray([r, g, b, (255 * opacity) | 0]);
+
+  // rasterize
+  return (data, w, h) => {
+    for (let j = 0, k = 0; j < h; ++j) {
+      for (let i = 0; i < w; ++i, k += 4) {
+        data[k + 0] = c[0];
+        data[k + 1] = c[1];
+        data[k + 2] = c[2];
+        data[k + 3] = c[3];
+      }
+    }
+  };
+}
+
+export function colorCategory(scale) {
+  const { domain, range } = scale;
+  const idx = Object.create(null);
+  const p = new Uint8ClampedArray(4 * domain.length);
+  const n = domain.length - 1;
+  const m = range.length;
+
+  // build palette and index lookup map
   for (let i = 0; i <= n; ++i) {
-    const v = interp(i / n);
+    const v = range[i % m];
     const { r, g, b, opacity = 1 } = typeof v === 'string' ? rgb(v) : v;
     const k = i << 2;
     p[k + 0] = r;
     p[k + 1] = g;
     p[k + 2] = b;
     p[k + 3] = (255 * opacity) | 0;
+    idx[domain[i]] = k;
   }
-  return p;
+
+  // rasterize
+  return (data, w, h, grid) => {
+    if (grid.map) {
+      // categorical values in grid
+      for (let j = 0, k = 0; j < h; ++j) {
+        for (let i = 0, row = (h - j - 1) * w; i < w; ++i, k += 4) {
+          const c = idx[grid[i + row]];
+          data[k + 0] = p[c + 0];
+          data[k + 1] = p[c + 1];
+          data[k + 2] = p[c + 2];
+          data[k + 3] = p[c + 3];
+        }
+      }
+    } else {
+      // categorical value for group
+      const c = idx[grid];
+      for (let j = 0, k = 0; j < h; ++j) {
+        for (let i = 0; i < w; ++i, k += 4) {
+          data[k + 0] = p[c + 0];
+          data[k + 1] = p[c + 1];
+          data[k + 2] = p[c + 2];
+          data[k + 3] = p[c + 3];
+        }
+      }
+    }
+  };
 }
 
-export function createCanvas(w, h) {
-  if (typeof document !== 'undefined') {
-    const c = document.createElement('canvas');
-    c.setAttribute('width', w);
-    c.setAttribute('height', h);
-    return c;
+export function colorScheme(size, scale, frac) {
+  const { interpolate } = scale;
+  const p = new Uint8ClampedArray(4 * size);
+  const n = size - 1;
+
+  // build palette
+  for (let i = 0; i <= n; ++i) {
+    const v = interpolate(i / n);
+    const { r, g, b, opacity = 1 } = typeof v === 'string' ? rgb(v) : v;
+    const k = i << 2;
+    p[k + 0] = r;
+    p[k + 1] = g;
+    p[k + 2] = b;
+    p[k + 3] = (255 * opacity) | 0;
   }
-  throw new Error('Can not create a canvas instance.');
-}
 
-export function opacityMap(color = 'black') {
-  const { r, g, b } = rgb(color);
-  return opacity => ({ r, g, b, opacity });
+  // rasterize
+  return (data, w, h, grid) => {
+    for (let j = 0, k = 0; j < h; ++j) {
+      for (let i = 0, row = (h - j - 1) * w; i < w; ++i, k += 4) {
+        const c = (n * frac(grid[i + row])) << 2;
+        data[k + 0] = p[c + 0];
+        data[k + 1] = p[c + 1];
+        data[k + 2] = p[c + 2];
+        data[k + 3] = p[c + 3];
+      }
+    }
+  };
 }

package/src/marks/util/to-data-array.js

@@ -1,7 +1,4 @@
-import { isArrowTable } from './is-arrow-table.js';
-
-const INTEGER = 2;
-const TIMESTAMP = 10;
+import { convertArrow, isArrowTable } from './arrow.js';
 
 export function toDataArray(data) {
   return isArrowTable(data) ? arrowToObjects(data) : data;
@@ -37,7 +34,7 @@ export function arrowToObjects(data) {
     for (let j = 0; j < numCols; ++j) {
       const child = batch.getChildAt(j);
       const { name, type } = schema.fields[j];
-      const valueOf = convert(type);
+      const valueOf = convertArrow(type);
 
       // for each row in the current batch...
       for (let o = k, i = 0; i < numRows; ++i, ++o) {
@@ -51,20 +48,3 @@ export function arrowToObjects(data) {
 
   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

@@ -45,6 +45,9 @@ export const attributeMap = new Map([
   ['xAriaDescription', 'x.ariaDescription'],
   ['xReverse', 'x.reverse'],
   ['xZero', 'x.zero'],
+  ['xBase', 'x.base'],
+  ['xExponent', 'x.exponent'],
+  ['xConstant', 'x.constant'],
   ['yScale', 'y.type'],
   ['yDomain', 'y.domain'],
   ['yRange', 'y.range'],
@@ -75,6 +78,9 @@ export const attributeMap = new Map([
   ['yAriaDescription', 'y.ariaDescription'],
   ['yReverse', 'y.reverse'],
   ['yZero', 'y.zero'],
+  ['yBase', 'y.base'],
+  ['yExponent', 'y.exponent'],
+  ['yConstant', 'y.constant'],
   ['facetMargin', 'facet.margin'],
   ['facetMarginTop', 'facet.marginTop'],
   ['facetMarginBottom', 'facet.marginBottom'],
@@ -150,6 +156,9 @@ export const attributeMap = new Map([
   ['colorReverse', 'color.reverse'],
   ['colorZero', 'color.zero'],
   ['colorTickFormat', 'color.tickFormat'],
+  ['colorBase', 'color.base'],
+  ['colorExponent', 'color.exponent'],
+  ['colorConstant', 'color.constant'],
   ['opacityScale', 'opacity.type'],
   ['opacityDomain', 'opacity.domain'],
   ['opacityRange', 'opacity.range'],
@@ -159,18 +168,27 @@ export const attributeMap = new Map([
   ['opacityReverse', 'opacity.reverse'],
   ['opacityZero', 'opacity.zero'],
   ['opacityTickFormat', 'opacity.tickFormat'],
+  ['opacityBase', 'opacity.base'],
+  ['opacityExponent', 'opacity.exponent'],
+  ['opacityConstant', 'opacity.constant'],
   ['rScale', 'r.type'],
   ['rDomain', 'r.domain'],
   ['rRange', 'r.range'],
   ['rClamp', 'r.clamp'],
   ['rNice', 'r.nice'],
   ['rZero', 'r.zero'],
+  ['rBase', 'r.base'],
+  ['rExponent', 'r.exponent'],
+  ['rConstant', 'r.constant'],
   ['lengthScale', 'length.type'],
   ['lengthDomain', 'length.domain'],
   ['lengthRange', 'length.range'],
   ['lengthClamp', 'length.clamp'],
   ['lengthNice', 'length.nice'],
   ['lengthZero', 'length.zero'],
+  ['lengthBase', 'length.base'],
+  ['lengthExponent', 'length.exponent'],
+  ['lengthConstant', 'length.constant'],
   ['projectionType', 'projection.type'],
   ['projectionParallels', 'projection.parallels'],
   ['projectionPrecision', 'projection.precision'],

package/src/transforms/bin.js

@@ -1,30 +1,26 @@
-import { asColumn } from '@uwdata/mosaic-sql';
 import { Transform } from '../symbols.js';
+import { channelScale } from '../marks/util/channel-scale.js';
 
-const EXTENT = [
-  'rectY-x', 'rectX-y', 'rect-x', 'rect-y'
-];
-
-function hasExtent(channel, type) {
-  return EXTENT.includes(`${type}-${channel}`);
-}
+const EXTENT = new Set(['rectY-x', 'rectX-y', 'rect-x', 'rect-y']);
 
 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)
-        };
+    if (EXTENT.has(`${mark.type}-${channel}`)) {
+      return {
+        [`${channel}1`]: binField(mark, channel, field, options),
+        [`${channel}2`]: binField(mark, channel, field, { ...options, offset: 1 })
+      };
+    } else {
+      return {
+        [channel]: binField(mark, channel, field, options)
+      };
+    }
   };
   fn[Transform] = true;
   return fn;
 }
 
-function binField(mark, column, options) {
+function binField(mark, channel, column, options) {
   return {
     column,
     label: column,
@@ -32,13 +28,15 @@ function binField(mark, column, options) {
     get columns() { return [column]; },
     get basis() { return column; },
     toString() {
+      const { apply, sqlApply, sqlInvert } = channelScale(mark, channel);
       const { min, max } = mark.stats[column];
-      const b = bins(min, max, options);
-      const col = asColumn(column);
+      const b = bins(apply(min), apply(max), options);
+      const col = sqlApply(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)`;
+      const expr = `${b.min} + ${alpha} * (${off}FLOOR(${base} / ${alpha}))`;
+      return `${sqlInvert(expr)}`;
     }
   };
 }

package/src/marks/util/bin-field.js

@@ -1,17 +0,0 @@
-import { epoch_ms, sql } from '@uwdata/mosaic-sql';
-
-export function binField(mark, channel, expr) {
-  if (!mark.stats) return field;
-  const { field } = mark.channelField(channel);
-  const { type } = mark.stats[field.column];
-  expr = expr ?? field;
-  return type === 'date' ? epoch_ms(expr) : expr;
-}
-
-export function bin1d(x, x0, x1, n, reverse = false, pad = 1) {
-  const d = (n - pad) / (x1 - x0);
-  const f = d !== 1 ? ` * ${d}::DOUBLE` : '';
-  return reverse
-    ? sql`(${+x1} - ${x}::DOUBLE)${f}`
-    : sql`(${x}::DOUBLE - ${+x0})${f}`;
-}

package/src/marks/util/is-arrow-table.js

@@ -1,3 +0,0 @@
-export function isArrowTable(values) {
-  return typeof values?.getChild === 'function';
-}