Unify group, bin, and reduce. (#272)

* checkpoint new group

* group boxplot!

* check for value-less reduce

* update example

* require reduce

* don’t compute z twice

* reorder

* missing imports

* bin groups

* fix reducer test

* half-fix plots that need default {x: count} or {fill: count}
still missing:
- normalize
- automatic scale label (Frequency ↑)

* fix plots (reduce => group)

* firstof {z, fill, stroke}

* reduce proportion

* maybeGroup

* reduce percent

* fix value-less reducers

* remove unused import

* update tests

* more tests

* smarter facet axis position

* percent-z, percent-facet

* generalize normalize

* add test output

* normalize

* proportional reducers

* allow external scoped reducers

* bad vscode

* require group channels

* bin outputs

* fix inset

* cumulative bins

* reorder export

* no insets for binMid

* restore labels

* reverse cumulative

* fix secondary group dimension

* proportion-group

* fix tests

* apply maybeReduce to data channel

* remove noop

* shorten

* binned replaces input

* don’t subgroup if output

* restore test

* scale percent

* rm proportion-group

* update snapshot

Co-authored-by: Philippe Rivière <fil@rezo.net>

Author: mbostock

src/axes.js

@@ -8,15 +8,15 @@ export function Axes(
   let {axis: yAxis = true} = y;
   let {axis: fxAxis = true} = fx;
   let {axis: fyAxis = true} = fy;
-  if (xAxis === true) xAxis = "bottom";
-  if (yAxis === true) yAxis = "left";
-  if (fxAxis === true) fxAxis = xAxis === "bottom" ? "top" : "bottom";
-  if (fyAxis === true) fyAxis = yAxis === "left" ? "right" : "left";
+  if (!xScale) xAxis = null; else if (xAxis === true) xAxis = "bottom";
+  if (!yScale) yAxis = null; else if (yAxis === true) yAxis = "left";
+  if (!fxScale) fxAxis = null; else if (fxAxis === true) fxAxis = xAxis === "bottom" ? "top" : "bottom";
+  if (!fyScale) fyAxis = null; else if (fyAxis === true) fyAxis = yAxis === "left" ? "right" : "left";
   return {
-    ...xScale && xAxis && {x: new AxisX({grid, ...x, axis: xAxis})},
-    ...yScale && yAxis && {y: new AxisY({grid, ...y, axis: yAxis})},
-    ...fxScale && fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, ...fx, axis: fxAxis})},
-    ...fyScale && fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, ...fy, axis: fyAxis})}
+    ...xAxis && {x: new AxisX({grid, ...x, axis: xAxis})},
+    ...yAxis && {y: new AxisY({grid, ...y, axis: yAxis})},
+    ...fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, ...fx, axis: fxAxis})},
+    ...fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, ...fy, axis: fyAxis})}
   };
 }
 
@@ -102,10 +102,11 @@ function inferLabel(channels = [], scale, axis, key) {
     else if (candidate !== label) return;
   }
   if (candidate !== undefined) {
-    const {invert} = scale;
+    const {percent, invert} = scale;
     // Ignore the implicit label for temporal scales if it’s simply “date”.
     if (scale.type === "temporal" && /^(date|time|year)$/i.test(candidate)) return;
     if (scale.type !== "ordinal" && (key === "x" || key === "y")) {
+      if (percent) candidate = `${candidate} (%)`;
       if (axis.labelAnchor === "center") {
         candidate = `${candidate} →`;
       } else if (key === "x") {

src/facet.js

@@ -60,7 +60,7 @@ class Facet extends Mark {
       }
       const named = Object.create(null);
       for (const [name, channel] of channels) {
-        if (name !== undefined) named[name] = channel.value;
+        if (name !== undefined) Object.defineProperty(named, name, {get: () => channel.value}); // scale transform
         subchannels.push([undefined, channel]);
       }
       marksChannels.push(named);

src/index.js

@@ -11,11 +11,10 @@ export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
-export {bin, binX, binY, binXMid, binYMid, binR} from "./transforms/bin.js";
-export {group, groupX, groupY, groupR, groupZ, groupZX, groupZY, groupZR} from "./transforms/group.js";
+export {bin, binMid, binX, binY, binXMid, binYMid} from "./transforms/bin.js";
+export {group, groupX, groupY, groupZ} from "./transforms/group.js";
 export {normalizeX, normalizeY} from "./transforms/normalize.js";
 export {map, mapX, mapY} from "./transforms/map.js";
-export {reduce, reduceX, reduceY} from "./transforms/reduce.js";
 export {windowX, windowY} from "./transforms/window.js";
 export {selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY} from "./transforms/select.js";
 export {stackX, stackX1, stackX2, stackXMid, stackY, stackY1, stackY2, stackYMid} from "./transforms/stack.js";

src/plot.js

@@ -33,10 +33,8 @@ export function plot(options = {}) {
       const {scale} = channel;
       if (scale !== undefined) {
         const scaled = scaleChannels.get(scale);
-        const {transform} = options[scale] || {};
-        if (transform !== undefined) {
-          channel.value = Array.from(channel.value, transform);
-        }
+        const {percent, transform = percent ? x => x * 100 : undefined} = options[scale] || {};
+        if (transform !== undefined) channel.value = Array.from(channel.value, transform);
         if (scaled) scaled.push(channel);
         else scaleChannels.set(scale, [channel]);
       }

src/scales/quantitative.js

@@ -137,6 +137,7 @@ export function ScaleQ(key, scale, channels, {
   clamp,
   zero,
   domain = (registry.get(key) === radius ? inferRadialDomain : inferDomain)(channels),
+  percent,
   round,
   range = registry.get(key) === radius ? inferRadialRange(channels, domain) : undefined,
   scheme,
@@ -167,7 +168,7 @@ export function ScaleQ(key, scale, channels, {
 
   if (range !== undefined) scale.range(range);
   if (clamp) scale.clamp(clamp);
-  return {type: "quantitative", invert, domain, range, scale, inset};
+  return {type: "quantitative", invert, domain, range, scale, inset, percent};
 }
 
 export function ScaleLinear(key, channels, options) {