facet expansion

Author: Fil

src/facet.js

@@ -1,4 +1,7 @@
-import {slice} from "./options.js";
+import {column, maybeColorChannel, maybeNumberChannel, slice, valueof} from "./options.js";
+import {maybeSymbolChannel} from "./symbols.js";
+import {maybeFontSizeChannel} from "./marks/text.js";
+import {maybePathChannel} from "./marks/image.js";
 
 export function facetReindex(facets, n) {
   const overlap = new Uint8Array(n);
@@ -8,6 +11,7 @@ export function facetReindex(facets, n) {
   // Count the number of overlapping indexes across facets.
   for (const facet of facets) {
     for (const i of facet) {
+      if (i >= n) return {facets}; // already dedup'ed!
       if (overlap[i]) ++count;
       overlap[i] = 1;
     }
@@ -46,3 +50,47 @@ export function maybeExpand(X, plan) {
   for (let i = 0; i < plan.length; ++i) V[i] = X[plan[i]];
   return V;
 }
+
+// Iterate over the options and pull out any that represent columns of values.
+const knownChannels = [
+  ["x"],
+  ["x1"],
+  ["x2"],
+  ["y"],
+  ["y1"],
+  ["y2"],
+  ["z"],
+  ["ariaLabel"],
+  ["href"],
+  ["title"],
+  ["fill", (value) => maybeColorChannel(value)[0]],
+  ["stroke", (value) => maybeColorChannel(value)[0]],
+  ["fillOpacity", (value) => maybeNumberChannel(value)[0]],
+  ["strokeOpacity", (value) => maybeNumberChannel(value)[0]],
+  ["opacity", (value) => maybeNumberChannel(value)[0]],
+  ["strokeWidth", (value) => maybeNumberChannel(value)[0]],
+  ["symbol", (value) => maybeSymbolChannel(value)[0]], // dot
+  ["r", (value) => maybeNumberChannel(value)[0]], // dot
+  ["rotate", (value) => maybeNumberChannel(value)[0]], // dot, text
+  ["fontSize", (value) => maybeFontSizeChannel(value)[0]], // text
+  ["text"], // text
+  ["length", (value) => maybeNumberChannel(value)[0]], // vector
+  ["width", (value) => maybeNumberChannel(value)[0]], // image
+  ["height", (value) => maybeNumberChannel(value)[0]], // image
+  ["src", (value) => maybePathChannel(value)[0]], // image
+  ["weight", (value) => maybeNumberChannel(value)[0]] // density
+];
+
+export function maybeExpandOutputs(options) {
+  const other = {};
+  const outputs = [];
+  for (const [name, test = (value) => value] of knownChannels) {
+    const value = test(options[name]);
+    if (value != null) {
+      const [V, setV] = column(value);
+      other[name] = V;
+      outputs.push((data, plan) => setV(maybeExpand(valueof(data, value), plan)));
+    }
+  }
+  return [other, outputs];
+}

src/marks/image.js

@@ -34,7 +34,7 @@ function isUrl(string) {
 
 // Disambiguates a constant src definition from a channel. A path or URL string
 // is assumed to be a constant; any other string is assumed to be a field name.
-function maybePathChannel(value) {
+export function maybePathChannel(value) {
   return typeof value === "string" && (isPath(value) || isUrl(value)) ? [undefined, value] : [value, undefined];
 }
 

src/marks/text.js

@@ -241,7 +241,7 @@ const fontSizes = new Set([
 // - string <length>: e.g., "12px"
 // - string <percentage>: e.g., "80%"
 // Anything else is assumed to be a channel definition.
-function maybeFontSizeChannel(fontSize) {
+export function maybeFontSizeChannel(fontSize) {
   if (fontSize == null || typeof fontSize === "number") return [undefined, fontSize];
   if (typeof fontSize !== "string") return [fontSize, undefined];
   fontSize = fontSize.trim().toLowerCase();

src/transforms/bin.js

@@ -1,7 +1,6 @@
 import {bin as binner, extent, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges, utcTickInterval} from "d3";
 import {
   valueof,
-  range,
   identity,
   maybeColumn,
   maybeTuple,
@@ -161,6 +160,7 @@ function binn(
     ...("fill" in inputs && {fill: GF || fill}),
     ...("stroke" in inputs && {stroke: GS || stroke}),
     ...basic(options, (data, facets) => {
+      const cover = (bx || by) && union(facets);
       const K = valueof(data, k);
       const Z = valueof(data, z);
       const F = valueof(data, vfill);
@@ -172,8 +172,8 @@ function binn(
       const GZ = Z && setGZ([]);
       const GF = F && setGF([]);
       const GS = S && setGS([]);
-      const BX = bx ? bx(data) : [[, , (I) => I]];
-      const BY = by ? by(data) : [[, , (I) => I]];
+      const BX = bx ? bx(data, cover) : [[, , (I) => I]];
+      const BY = by ? by(data, cover) : [[, , (I) => I]];
       const BX1 = bx && setBX1([]);
       const BX2 = bx && setBX2([]);
       const BY1 = by && setBY1([]);
@@ -248,7 +248,7 @@ function maybeBinValueTuple(options) {
 function maybeBin(options) {
   if (options == null) return;
   const {value, cumulative, domain = extent, thresholds} = options;
-  const bin = (data) => {
+  const bin = (data, cover) => {
     let V = valueof(data, value, Array); // d3.bin prefers Array input
     const bin = binner().value((i) => V[i]);
     if (isTemporal(V) || isTimeThresholds(thresholds)) {
@@ -279,7 +279,7 @@ function maybeBin(options) {
       }
       bin.thresholds(t).domain(d);
     }
-    let bins = bin(range(data)).map(binset);
+    let bins = bin(cover).map(binset);
     if (cumulative) bins = (cumulative < 0 ? bins.reverse() : bins).map(bincumset);
     return bins.map(binfilter);
   };
@@ -365,3 +365,9 @@ function binfilter([{x0, x1}, set]) {
 function binempty() {
   return new Uint32Array(0);
 }
+
+function union(facets) {
+  const U = new Set();
+  for (const f of facets) for (const i of f) U.add(i);
+  return U;
+}

src/transforms/dodge.js

@@ -3,6 +3,7 @@ import {finite, positive} from "../defined.js";
 import {identity, maybeNamed, number, valueof} from "../options.js";
 import {coerceNumbers} from "../scales.js";
 import {initializer} from "./basic.js";
+import {maybeExpand, facetReindex} from "../facet.js";
 
 const anchorXLeft = ({marginLeft}) => [1, marginLeft];
 const anchorXRight = ({width, marginRight}) => [-1, width - marginRight];
@@ -87,11 +88,15 @@ function dodge(y, x, anchor, padding, options) {
     options = {...options, channels: {r: {value: r, scale: "r"}, ...maybeNamed(channels)}};
     if (sort === undefined && reverse === undefined) options.sort = {channel: "r", order: "descending"};
   }
-  return initializer(options, function (data, facets, {[x]: X, r: R}, scales, dimensions) {
+  return initializer(options, function (data, facets, {[x]: X, r: R, ...channels}, scales, dimensions) {
     if (!X) throw new Error(`missing channel: ${x}`);
-    X = coerceNumbers(valueof(X.value, scales[X.scale] || identity));
+
+    let plan;
+    ({facets, plan} = facetReindex(facets, data.length)); // make facets exclusive
+    X = maybeExpand(coerceNumbers(valueof(X.value, scales[X.scale] || identity)), plan);
+
     const r = R ? undefined : this.r !== undefined ? this.r : options.r !== undefined ? number(options.r) : 3;
-    if (R) R = coerceNumbers(valueof(R.value, scales[R.scale] || identity));
+    if (R) R = maybeExpand(coerceNumbers(valueof(R.value, scales[R.scale] || identity)));
     let [ky, ty] = anchor(dimensions);
     const compare = ky ? compareAscending : compareSymmetric;
     const Y = new Float64Array(X.length);
@@ -144,13 +149,17 @@ function dodge(y, x, anchor, padding, options) {
         Y[i] = Y[i] * ky + ty;
       }
     }
+    for (const key in channels) {
+      channels[key].value = maybeExpand(channels[key].value, plan);
+    }
     return {
       data,
       facets,
       channels: {
         [x]: {value: X},
         [y]: {value: Y},
-        ...(R && {r: {value: R}})
+        ...(R && {r: {value: R}}),
+        ...channels
       }
     };
   });

src/transforms/map.js

@@ -1,6 +1,7 @@
 import {count, group, rank} from "d3";
 import {maybeZ, take, valueof, maybeInput, column} from "../options.js";
 import {basic} from "./basic.js";
+import {maybeExpand, facetReindex, maybeExpandOutputs} from "../facet.js";
 
 /**
  * ```js
@@ -56,18 +57,23 @@ export function map(outputs = {}, options = {}) {
     const [output, setOutput] = column(input);
     return {key, input, output, setOutput, map: maybeMap(map)};
   });
+  const [other, facetOutputs] = maybeExpandOutputs(options); // TODO wrap outputs in facetReindex
   return {
     ...basic(options, (data, facets) => {
-      const Z = valueof(data, z);
-      const X = channels.map(({input}) => valueof(data, input));
-      const MX = channels.map(({setOutput}) => setOutput(new Array(data.length)));
+      let plan;
+      ({facets, plan} = facetReindex(facets, data.length)); // make facets exclusive
+      const Z = maybeExpand(valueof(data, z), plan);
+      const X = channels.map(({input}) => maybeExpand(valueof(data, input), plan));
+      const MX = channels.map(({setOutput}) => setOutput(new Array(plan ? plan.length : data.length)));
+      for (const o of facetOutputs) o(data, plan); // expand any extra channels
       for (const facet of facets) {
         for (const I of Z ? group(facet, (i) => Z[i]).values() : [facet]) {
           channels.forEach(({map}, i) => map.map(I, X[i], MX[i]));
         }
       }
       return {data, facets};
     }),
+    ...other,
     ...Object.fromEntries(channels.map(({key, output}) => [key, output]))
   };
 }

src/transforms/stack.js

@@ -1,8 +1,8 @@
 import {InternMap, cumsum, group, groupSort, greatest, max, min, rollup, sum} from "d3";
 import {ascendingDefined} from "../defined.js";
-import {maybeExpand, facetReindex} from "../facet.js";
+import {maybeExpand, facetReindex, maybeExpandOutputs} from "../facet.js";
 import {field, column, mid, range, valueof, one} from "../options.js";
-import {maybeColumn, maybeColorChannel, maybeZ, maybeZero} from "../options.js";
+import {maybeColumn, maybeZ, maybeZero} from "../options.js";
 import {basic} from "./basic.js";
 
 /**
@@ -19,7 +19,7 @@ export function stackX(stackOptions = {}, options = {}) {
   if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {y1, y = y1, x, ...rest} = options; // note: consumes x!
   const [transform, Y, x1, x2, other] = stack(y, x, "x", stackOptions, rest);
-  return {...transform, y1, y: Y, x1, x2, ...other, x: mid(x1, x2)};
+  return {...transform, ...other, y1, y: Y, x1, x2, x: mid(x1, x2)};
 }
 
 /**
@@ -38,7 +38,7 @@ export function stackX1(stackOptions = {}, options = {}) {
   if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {y1, y = y1, x} = options;
   const [transform, Y, X, , other] = stack(y, x, "x", stackOptions, options);
-  return {...transform, y1, y: Y, x: X, ...other};
+  return {...transform, ...other, y1, y: Y, x: X};
 }
 
 /**
@@ -57,7 +57,7 @@ export function stackX2(stackOptions = {}, options = {}) {
   if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {y1, y = y1, x} = options;
   const [transform, Y, , X, other] = stack(y, x, "x", stackOptions, options);
-  return {...transform, y1, y: Y, x: X, ...other};
+  return {...transform, ...other, y1, y: Y, x: X};
 }
 
 /**
@@ -79,7 +79,7 @@ export function stackY(stackOptions = {}, options = {}) {
   if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {x1, x = x1, y, ...rest} = options; // note: consumes y!
   const [transform, X, y1, y2, other] = stack(x, y, "y", stackOptions, rest);
-  return {...transform, x1, x: X, y1, y2, y: mid(y1, y2), ...other};
+  return {...transform, ...other, x1, x: X, y1, y2, y: mid(y1, y2)};
 }
 
 /**
@@ -98,7 +98,7 @@ export function stackY1(stackOptions = {}, options = {}) {
   if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {x1, x = x1, y} = options;
   const [transform, X, Y, , other] = stack(x, y, "y", stackOptions, options);
-  return {...transform, x1, x: X, y: Y, ...other};
+  return {...transform, ...other, x1, x: X, y: Y};
 }
 
 /**
@@ -117,7 +117,7 @@ export function stackY2(stackOptions = {}, options = {}) {
   if (arguments.length === 1) [stackOptions, options] = mergeOptions(stackOptions);
   const {x1, x = x1, y} = options;
   const [transform, X, , Y, other] = stack(x, y, "y", stackOptions, options);
-  return {...transform, x1, x: X, y: Y, ...other};
+  return {...transform, ...other, x1, x: X, y: Y};
 }
 
 export function maybeStackX({x, x1, x2, ...options} = {}) {
@@ -147,54 +147,11 @@ function stack(x, y = one, ky, {offset, order, reverse}, options) {
   const [Y2, setY2] = column(y);
   offset = maybeOffset(offset);
   order = maybeOrder(order, offset, ky);
-
-  // TODO Here we will need to iterate over the options and pull out any that
-  // represent channels (columns of values). The list of possible channels for
-  // all Marks:
-  // - fill (color)
-  // - fillOpacity (opacity/number)
-  // - stroke (color)
-  // - strokeOpacity (opacity/number)
-  // - strokeWidth (number)
-  // - opacity (opacity/number)
-  // - title
-  // - href
-  // - ariaLabel
-  // - z?
-  // TODO
-  // - text (text)
-  // - rotate (text, dot)
-  // - fontSize (text)
-  // - symbol (dot)
-  // - r (dot)
-  // - length (vector)
-  // - width (image)
-  // - height (image)
-  // - src (image)
-  // - weight (density)
-
-  const knownChannels = [
-    ["fill", (value) => maybeColorChannel(value)[0]],
-    ["stroke", (value) => maybeColorChannel(value)[0]],
-    ["text"]
-  ];
-
-  const other = {};
-  const outputs = [];
-  for (const [name, test = (value) => value] of knownChannels) {
-    const value = test(options[name]);
-    if (value) {
-      const [V, setV] = column(value);
-      other[name] = V;
-      outputs.push((data, plan) => setV(maybeExpand(valueof(data, value), plan)));
-    }
-  }
-
+  const [other, outputs] = maybeExpandOutputs(options); // TODO wrap outputs in facetReindex
   return [
     basic(options, (data, facets) => {
       let plan;
       ({facets, plan} = facetReindex(facets, data.length)); // make facets exclusive
-      for (const o of outputs) o(data, plan); // expand any extra channels
       const XS = x == null ? undefined : valueof(data, x);
       const YS = valueof(data, y, Float64Array);
       const ZS = valueof(data, z);
@@ -203,6 +160,7 @@ function stack(x, y = one, ky, {offset, order, reverse}, options) {
       const Z = maybeExpand(ZS, plan);
       const O = order && maybeExpand(order(data, XS, YS, ZS), plan);
       const n = plan ? plan.length : data.length;
+      for (const o of outputs) o(data, plan); // expand any extra channels
       const Y1 = setY1(new Float64Array(n));
       const Y2 = setY2(new Float64Array(n));
       const facetstacks = [];