layouts can reindex and rescale

Author: Fil

src/layouts/dodge.js

@@ -75,7 +75,11 @@ function dodge(y, x, anchor, padding, options) {
       // Insert the placed circle into the interval tree.
       tree.insert([l, r, i]);
     }
-    return {[y]: Y.map(y => y * ky + ty)};
+    return {
+      reindex: true,
+      [x]: Float64Array.from(I, i => X[i]),
+      [y]: Float64Array.from(I, i => Y[i] * ky + ty)
+    };
   });
 }
 

src/plot.js

@@ -52,17 +52,59 @@ export function plot(options = {}) {
   }
 
   const scaleDescriptors = Scales(scaleChannels, options);
-  const scales = ScaleFunctions(scaleDescriptors);
   const axes = Axes(scaleDescriptors, options);
   const dimensions = Dimensions(scaleDescriptors, axes, options);
 
   autoScaleRange(scaleDescriptors, dimensions);
   autoScaleLabels(scaleChannels, scaleDescriptors, axes, dimensions, options);
   autoAxisTicks(scaleDescriptors, axes);
 
+  // layouts might return new data to scale with existing or new scales
+  const scales = ScaleFunctions(scaleDescriptors);
+  const markValues = new Map();
+  const newChannels = new Map();
+  const newOptions = {};
+  for (const mark of marks) {
+    const channels = markChannels.get(mark) ?? [];
+    const values = applyScales(channels, scales);
+    let index = filter(markIndex.get(mark), channels, values);
+    const rescale = [];
+    if (mark.layout != null) {
+      let {reindex, ...newValues} = mark.layout(index, scales, values, dimensions) || {};
+      for (let key in newValues) {
+        let c = newValues[key];
+        const {scale} = c;
+        if (scale) {
+          if (!newChannels.has(scale)) newChannels.set(scale, []);
+          newChannels.get(scale).push({scale, value: c.values});
+          newOptions[scale] = {...c.options, ...options[scale]};
+          values[key] = c.values;
+          rescale.push([scale, values[key]]);
+        } else {
+          values[key] = c;
+        }
+        if (reindex) {
+          index = range(values[key]);
+          reindex = false;
+        }
+      }
+    }
+    markValues.set(mark, {index, values, rescale});
+  }
+  const newScaleDescriptors = Scales(newChannels, newOptions);
+  Object.assign(scaleDescriptors, newScaleDescriptors);
+  Object.assign(scales, ScaleFunctions(newScaleDescriptors));
+  for (const [, {rescale}] of markValues) {
+    for (const [scale, values] of rescale) {
+      for (let i = 0; i < values.length; i++) {
+        values[i] = scales[scale](values[i]);
+      }
+    }
+  }
+
   // When faceting, render axes for fx and fy instead of x and y.
-  const x = facet !== undefined && scales.fx ? "fx" : "x";
-  const y = facet !== undefined && scales.fy ? "fy" : "y";
+  const x = facet !== undefined && scaleDescriptors.fx ? "fx" : "x";
+  const y = facet !== undefined && scaleDescriptors.fy ? "fy" : "y";
   if (axes[x]) marks.unshift(axes[x]);
   if (axes[y]) marks.unshift(axes[y]);
 
@@ -94,10 +136,7 @@ export function plot(options = {}) {
     .node();
 
   for (const mark of marks) {
-    const channels = markChannels.get(mark) ?? [];
-    let values = applyScales(channels, scales);
-    const index = filter(markIndex.get(mark), channels, values);
-    if (mark.layout != null) values = mark.layout(index, scales, values, dimensions);
+    const {index, values} = markValues.get(mark) || {};
     const node = mark.render(index, scales, values, dimensions, axes);
     if (node != null) svg.appendChild(node);
   }
@@ -220,6 +259,7 @@ class Facet extends Mark {
     // The following fields are set by initialize:
     this.marksChannels = undefined; // array of mark channels
     this.marksIndexByFacet = undefined; // map from facet key to array of mark indexes
+    this.marksLayouts = undefined;
   }
   initialize() {
     const {index, channels} = super.initialize();
@@ -229,6 +269,7 @@ class Facet extends Mark {
     const subchannels = [];
     const marksChannels = this.marksChannels = [];
     const marksIndexByFacet = this.marksIndexByFacet = facetMap(channels);
+    const marksLayouts = this.marksLayouts = [];
     for (const facetKey of facetsKeys) {
       marksIndexByFacet.set(facetKey, new Array(this.marks.length));
     }
@@ -260,18 +301,73 @@ class Facet extends Mark {
         subchannels.push([, channel]);
       }
       marksChannels.push(markChannels);
+      if (mark.layout) marksLayouts.push(mark);
     }
+    this.layout = function(index, scales, channels, dimensions) {
+      const {fx, fy} = scales;
+      const fyMargins = fy && {marginTop: 0, marginBottom: 0, height: fy.bandwidth()};
+      const fxMargins = fx && {marginRight: 0, marginLeft: 0, width: fx.bandwidth()};
+      const subdimensions = {...dimensions, ...fxMargins, ...fyMargins};
+
+      this.marksValues = marksChannels.map(channels => applyScales(channels, scales));
+      const rescaleChannels = [];
+      for (let i = 0; i < this.marks.length; ++i) {
+        const mark = this.marks[i];
+        if (!mark.layout) continue;
+        let values = facetsKeys.map(facet => [
+          facet,
+          mark.layout(
+            filter(marksIndexByFacet.get(facet)[i], marksChannels[i], this.marksValues[i]),
+            scales,
+            this.marksValues[i],
+            subdimensions
+          )
+        ]);
+        if (values.some(([, d]) => d.reindex)) {
+          const index = [];
+          const newValues = new Map();
+          for (const [facet, value] of values) {
+            const j = index.length;
+            const newIndex = new Set();
+            for (let key in value) {
+              if (key === "reindex") continue; // TODO: better internal API
+              if (!newValues.has(key)) newValues.set(key, []);
+              const V = newValues.get(key);
+              const {scale, options} = value[key];
+              if (scale) Object.assign(V, {scale, options});
+              const U = scale !== undefined ? value[key].values : value[key];
+              for (let i = 0; i < U.length; i++) {
+                const k = i + j;
+                newIndex.add(k);
+                V[k] = U[i];
+              }
+            }
+            for (const i of newIndex) index.push(i);
+            marksIndexByFacet.get(facet)[i] = [...newIndex];
+          }
+          values = Object.fromEntries(newValues);
+        } else {
+          values = values[0][1];
+        }
+        this.marksValues[i] = values;
+        for (let k in values) {
+          if (values[k].scale !== undefined) {
+            rescaleChannels.push([rescaleChannels.length, {values: values[k], scale: values[k].scale, options: values[k].options}]);
+          }
+        }
+      }
+      return Object.fromEntries(rescaleChannels);
+    };
     return {index, channels: [...channels, ...subchannels]};
   }
   render(I, scales, channels, dimensions, axes) {
-    const {marks, marksChannels, marksIndexByFacet} = this;
+    const {marks, marksChannels, marksValues, marksIndexByFacet} = this;
     const {fx, fy} = scales;
     const fyDomain = fy && fy.domain();
     const fxDomain = fx && fx.domain();
     const fyMargins = fy && {marginTop: 0, marginBottom: 0, height: fy.bandwidth()};
     const fxMargins = fx && {marginRight: 0, marginLeft: 0, width: fx.bandwidth()};
     const subdimensions = {...dimensions, ...fxMargins, ...fyMargins};
-    const marksValues = marksChannels.map(channels => applyScales(channels, scales));
     return create("svg:g")
         .call(g => {
           if (fy && axes.y) {
@@ -316,7 +412,6 @@ class Facet extends Mark {
                 const mark = marks[i];
                 let values = marksValues[i];
                 const index = filter(marksFacetIndex[i], marksChannels[i], values);
-                if (mark.layout != null) values = mark.layout(index, scales, values, subdimensions);
                 const node = mark.render(index, scales, values, subdimensions);
                 if (node != null) this.appendChild(node);
               }

src/transforms/hexbin.js

@@ -1,8 +1,8 @@
-import {groups, max} from "d3";
+import {groups} from "d3";
 import {basic} from "./basic.js";
 import {layout} from "../layouts/index.js";
 import {Dot} from "../marks/dot.js";
-import {maybeTuple, range, take, valueof} from "../options.js";
+import {maybeTuple, take, valueof} from "../options.js";
 
 const defaults = {
   ariaLabel: "hex",
@@ -13,18 +13,19 @@ const defaults = {
 };
 
 // width factor (allows the hexbin transform to work with circular dots!)
-const w0 = 1 / Math.sin(Math.PI / 3);
+const w0 = Math.sin(Math.PI / 3);
 
 function hbin(I, X, Y, r) {
-  const dx = r * 2 / w0;
+  const dx = r * 2 * w0;
   const dy = r * 1.5;
+  const keys = new Map();
   return groups(I, i => {
-    let px = X[i] / dy;
-    let py = Y[i] / dx;
+    let px = X[i] / dx;
+    let py = Y[i] / dy;
     if (isNaN(px) || isNaN(py)) return;
     let pj = Math.round(py),
-    pi = Math.round(px - (pj & 1) / 2),
-    py1 = py - pj;
+        pi = Math.round(px = px - (pj & 1) / 2),
+        py1 = py - pj;
     if (Math.abs(py1) * 3 > 1) {
       let px1 = px - pi,
         pi2 = pi + (px < pi ? -1 : 1) / 2,
@@ -33,63 +34,46 @@ function hbin(I, X, Y, r) {
         py2 = py - pj2;
       if (px1 * px1 + py1 * py1 > px2 * px2 + py2 * py2) pi = pi2 + (pj & 1 ? 1 : -1) / 2, pj = pj2;
     }
-    return `${pi}|${pj}`;
+    const key = `${pi}|${pj}`;
+    keys.set(key, [pi, pj]);
+    return key;
   })
   .filter(([p]) => p)
   .map(([p, bin]) => {
-    const [pi, pj] = p.split("|");
-    bin.x = (+pi + (pj & 1) / 2) * dx;
-    bin.y = +pj * dy;
+    const [pi, pj] = keys.get(p);
+    bin.x = (pi + (pj & 1) / 2) * dx;
+    bin.y = pj * dy;
     return bin;
   });
 }
 
-function hexbinLayout({_store, radius, r: _r, opacity: _o, fill: _f, text: _t, title: _l, value: _v}, options) {
+function hexbinLayout({radius, r, opacity, fill, text, title, value}, options) {
   radius = +radius;
-  _r = !!_r;
-  _o = !!_o;
-  _f = !!_f;
-  return layout({_store, ...options}, function(I, {r, color, opacity}, {x: X, y: Y}) {
-    if (!_store.channels) {
-      const bins = _store.facets.map(I => hbin(I, X, Y, radius));
-      const values = bins.map(b => valueof(b, _v));
-      const maxValue = max(values.flat());
-      color = _f && color.copy().domain([1, maxValue]);
-      opacity = _o && opacity.copy().domain([1, maxValue]);
-      r = _r && r && r.copy().domain([0, maxValue]).range([0, radius / w0]);
-      const {data} = this;
-      _store.channels = Array.from(bins, (bin, i) => ({
-        x: valueof(bin, "x"),
-        y: valueof(bin, "y"),
-        ..._t != null && {text: valueof(bin.map(I => take(data, I)), _t)},
-        ..._l != null && {title: valueof(bin.map(I => take(data, I)), _l)},
-        ..._r && r && {r: values[i].map(r)},
-        ..._o && opacity && {fillOpacity: values[i].map(opacity)},
-        ..._f && color && {fill: values[i].map(color)}
-      }));
-    }
-    for (let j = 0; j < _store.facets.length; ++j) {
-      if (_store.facets[j].some(i => I.includes(i))) {
-        const channels = _store.channels[j];
-        // mutates I!
-        I.splice(0, I.length, ...range(channels.x));
-        return channels;
-      }
-    }
-    throw new Error("what are we doing here?");
+  r = !!r;
+  opacity = !!opacity;
+  fill = !!fill;
+  return layout(options, function(index, scales, {x: X, y: Y}) {
+    const bins = hbin(index, X, Y, radius);
+    const values = (r || opacity || fill) && valueof(bins, value);
+    const {data} = this;
+    return {
+      reindex: true, // we're sending transformed data!
+      x: valueof(bins, "x"),
+      y: valueof(bins, "y"),
+      ...text != null && {text: valueof(bins, I => text(take(data, I)))},
+      ...title != null && {title: valueof(bins, I => title(take(data, I)))},
+      ...r && {r: {values, scale: "r", options: {label: "frequency", range: [0, radius * w0]}}},
+      ...opacity && {fillOpacity: {values, scale: "opacity", options: {label: "frequency"}}},
+      ...fill && {fill: {values, scale: "color", options: {scheme: "blues", label: "frequency"}}}
+    };
   });
 }
 
-// The transform does nothing but divert some information that is necessary
-// to do the layout on multiple facets
-// It is a bit of a hack: we want to do all facets at once in order to compute
-// the maximum value. We also convert the facets to plain arrays, since we’re
+// The transform does nothing but convert the facets to plain arrays, since we’re
 // going to splice them
 export function hexbinTransform(hexbinOptions, options) {
-  const _store = {};
-  return basic(hexbinLayout({_store, ...hexbinOptions}, options), (data, facets) => {
+  return basic(hexbinLayout(hexbinOptions, options), (data, facets) => {
     facets = Array.from(facets, facet => Array.from(facet));
-    _store.facets = facets;
     return {data, facets};
   });
 }
@@ -103,17 +87,17 @@ export function hexbin(data, options) {
 
 export function hexbinR({x, y, value = "length", radius = 10, title, ...options} = {}) {
   if (options.frameAnchor === undefined) ([x, y] = maybeTuple(x, y));
-  return hexbinTransform({value, radius, title, r: true}, {...defaults, x, y, r: () => 1, ...options});
+  return hexbinTransform({value, radius, title, r: true}, {...defaults, x, y, ...options});
 }
 
 export function hexbinFill({x, y, value = "length", radius = 10, title, ...options} = {}) {
   if (options.frameAnchor === undefined) ([x, y] = maybeTuple(x, y));
-  return hexbinTransform({value, radius, title, fill: true}, {...defaults, x, y, r: radius, fill: () => 1, ...options});
+  return hexbinTransform({value, radius, title, fill: true}, {...defaults, x, y, r: radius, ...options});
 }
 
 export function hexbinOpacity({x, y, value = "length", radius = 10, title, ...options} = {}) {
   if (options.frameAnchor === undefined) ([x, y] = maybeTuple(x, y));
-  return hexbinTransform({value, radius, title, opacity: true}, {...defaults, x, y, r: radius, opacity: () => 1,...options});
+  return hexbinTransform({value, radius, title, opacity: true}, {...defaults, x, y, r: radius, ...options});
 }
 
 export function hexbinText({x, y, value = "length", radius = 10, text = d => d.length, ...options} = {}) {