fix #241; weighted group and bin

mbostock · mbostock · commit a3c84f02b251 · 2021-03-16T17:41:54.000-07:00
diff --git a/src/mark.js b/src/mark.js
@@ -187,14 +187,18 @@ export function lazyChannel(source) {
   return [
     {
       transform: () => value,
-      label: typeof source === "string" ? source
-        : source ? source.label
-        : undefined
+      label: labelof(source)
     },
     v => value = v
   ];
 }
 
+export function labelof(value, defaultValue) {
+  return typeof value === "string" ? value
+    : value && value.label !== undefined ? value.label
+    : defaultValue;
+}
+
 // Like lazyChannel, but allows the source to be null.
 export function maybeLazyChannel(source) {
   return source == null ? [source] : lazyChannel(source);
diff --git a/src/transforms/bin.js b/src/transforms/bin.js
@@ -1,6 +1,6 @@
-import {bin as binner, cross, group} from "d3";
+import {bin as binner, cross, group, sum} from "d3";
 import {firstof} from "../defined.js";
-import {valueof, first, second, range, identity, lazyChannel, maybeLazyChannel, maybeTransform, maybeColor, maybeValue, mid, take} from "../mark.js";
+import {valueof, first, second, range, identity, lazyChannel, maybeLazyChannel, maybeTransform, maybeColor, maybeValue, mid, take, labelof} from "../mark.js";
 import {offset} from "../style.js";
 
 // Group on y, z, fill, or stroke, if any, then bin on x.
@@ -43,12 +43,12 @@ export function bin({x, y, out = "fill", inset, insetTop, insetRight, insetBotto
   return {x1, x2, y1, y2, ...transform, inset, insetTop, insetRight, insetBottom, insetLeft, [out]: l};
 }
 
-function bin1(x, key, {[key]: k, z, fill, stroke, domain, thresholds, normalize, cumulative, ...options} = {}) {
+function bin1(x, key, {[key]: k, z, fill, stroke, weight, domain, thresholds, normalize, cumulative, ...options} = {}) {
   const m = normalize === true || normalize === "z" ? 100 : +normalize;
   const bin = binof(identity, {value: x, domain, thresholds});
   const [X1, setX1] = lazyChannel(x);
   const [X2, setX2] = lazyChannel(x);
-  const [L, setL] = lazyChannel(`Frequency${m === 100 ? " (%)" : ""}`);
+  const [L, setL] = lazyChannel(`${labelof(weight, "Frequency")}${m === 100 ? " (%)" : ""}`);
   const [vfill] = maybeColor(fill);
   const [vstroke] = maybeColor(stroke);
   const [BK, setBK] = maybeLazyChannel(k);
@@ -68,6 +68,7 @@ function bin1(x, key, {[key]: k, z, fill, stroke, domain, thresholds, normalize,
         const Z = valueof(data, z);
         const F = valueof(data, vfill);
         const S = valueof(data, vstroke);
+        const W = valueof(data, weight);
         const binFacets = [];
         const binData = [];
         const X1 = setX1([]);
@@ -78,19 +79,19 @@ function bin1(x, key, {[key]: k, z, fill, stroke, domain, thresholds, normalize,
         const BZ = Z && setBZ([]);
         const BF = F && setBF([]);
         const BS = S && setBS([]);
-        let n = data.length;
+        let n = W ? sum(W) : data.length;
         let i = 0;
         if (cumulative < 0) B.reverse();
         for (const facet of facets) {
           const binFacet = [];
           for (const I of G ? group(facet, i => G[i]).values() : [facet]) {
-            if (normalize === "z") n = I.length;
+            if (normalize === "z") n = W ? sum(I, i => W[i]) : I.length;
             const set = new Set(I);
             let f;
             for (const b of B) {
               const s = b.filter(i => set.has(i));
               f = cumulative && f !== undefined ? f.concat(s) : s;
-              const l = f.length;
+              const l = W ? sum(f, i => W[i]) : f.length;
               if (l > 0) {
                 binFacet.push(i++);
                 binData.push(take(data, f));
@@ -119,7 +120,7 @@ function bin1(x, key, {[key]: k, z, fill, stroke, domain, thresholds, normalize,
 // representing a field name, a function, an array), or the value and some
 // additional per-dimension binning options as an objects of the form {value,
 // domain?, thresholds?}.
-function bin2(x, y, {domain, thresholds, normalize, z, fill, stroke, ...options} = {}) {
+function bin2(x, y, {weight, domain, thresholds, normalize, z, fill, stroke, ...options} = {}) {
   const m = normalize === true || normalize === "z" ? 100 : +normalize;
   const binX = binof(first, {domain, thresholds, ...maybeValue(x)});
   const binY = binof(second, {domain, thresholds, ...maybeValue(y)});
@@ -128,7 +129,7 @@ function bin2(x, y, {domain, thresholds, normalize, z, fill, stroke, ...options}
   const [X2, setX2] = lazyChannel(x);
   const [Y1, setY1] = lazyChannel(y);
   const [Y2, setY2] = lazyChannel(y);
-  const [L, setL] = lazyChannel(`Frequency${m === 100 ? " (%)" : ""}`);
+  const [L, setL] = lazyChannel(`${labelof(weight, "Frequency")}${m === 100 ? " (%)" : ""}`);
   const [vfill] = maybeColor(fill);
   const [vstroke] = maybeColor(stroke);
   const [BZ, setBZ] = maybeLazyChannel(z);
@@ -145,6 +146,7 @@ function bin2(x, y, {domain, thresholds, normalize, z, fill, stroke, ...options}
         const Z = valueof(data, z);
         const F = valueof(data, vfill);
         const S = valueof(data, vstroke);
+        const W = valueof(data, weight);
         const binFacets = [];
         const binData = [];
         const X1 = setX1([]);
@@ -156,16 +158,16 @@ function bin2(x, y, {domain, thresholds, normalize, z, fill, stroke, ...options}
         const BZ = Z && setBZ([]);
         const BF = F && setBF([]);
         const BS = S && setBS([]);
-        let n = data.length;
+        let n = W ? sum(W) : data.length;
         let i = 0;
         for (const facet of facets) {
           const binFacet = [];
           for (const I of G ? group(facet, i => G[i]).values() : [facet]) {
-            if (normalize === "z") n = I.length;
+            if (normalize === "z") n = W ? sum(I, i => W[i]) : I.length;
             const set = new Set(I);
             for (const b of B) {
               const f = b.filter(i => set.has(i));
-              const l = f.length;
+              const l = W ? sum(f, i => W[i]) : f.length;
               if (l > 0) {
                 binFacet.push(i++);
                 binData.push(take(data, f));
diff --git a/src/transforms/group.js b/src/transforms/group.js
@@ -1,6 +1,6 @@
-import {group as grouper, sort, InternSet} from "d3";
+import {group as grouper, sort, sum, InternSet} from "d3";
 import {defined, firstof} from "../defined.js";
-import {valueof, maybeColor, maybeTransform, maybeValue, maybeLazyChannel, lazyChannel, first, identity, take, maybeTuple} from "../mark.js";
+import {valueof, maybeColor, maybeTransform, maybeValue, maybeLazyChannel, lazyChannel, first, identity, take, maybeTuple, labelof} from "../mark.js";
 
 // Group on y, z, fill, or stroke, if any, then group on x.
 export function groupX({x, y, out = y == null ? "y" : "fill", ...options} = {}) {
@@ -24,10 +24,10 @@ export function group({x, y, out = "fill", ...options} = {}) {
   return {x: X, y: Y, ...transform, [out]: L};
 }
 
-function group1(x = identity, key, {[key]: k, domain, normalize, z, fill, stroke, ...options} = {}) {
+function group1(x = identity, key, {[key]: k, weight, domain, normalize, z, fill, stroke, ...options} = {}) {
   const m = normalize === true || normalize === "z" ? 100 : +normalize;
   const [X, setX] = lazyChannel(x);
-  const [L, setL] = lazyChannel(`Frequency${m === 100 ? " (%)" : ""}`);
+  const [L, setL] = lazyChannel(`${labelof(weight, "Frequency")}${m === 100 ? " (%)" : ""}`);
   const [vfill] = maybeColor(fill);
   const [vstroke] = maybeColor(stroke);
   const [BK, setBK] = maybeLazyChannel(k);
@@ -48,6 +48,7 @@ function group1(x = identity, key, {[key]: k, domain, normalize, z, fill, stroke
         const Z = valueof(data, z);
         const F = valueof(data, vfill);
         const S = valueof(data, vstroke);
+        const W = valueof(data, weight);
         const groupFacets = [];
         const groupData = [];
         const BX = setX([]);
@@ -57,15 +58,15 @@ function group1(x = identity, key, {[key]: k, domain, normalize, z, fill, stroke
         const BZ = Z && setBZ([]);
         const BF = F && setBF([]);
         const BS = S && setBS([]);
-        let n = data.length;
+        let n = W ? sum(W) : data.length;
         let i = 0;
         for (const facet of facets) {
           const groupFacet = [];
           for (const I of G ? grouper(facet, i => G[i]).values() : [facet]) {
-            if (normalize === "z") n = I.length;
+            if (normalize === "z") n = W ? sum(I, i => W[i]) : I.length;
             for (const [x, f] of sort(grouper(I, i => X[i]), first)) {
               if (!defined(x)) continue;
-              const l = f.length;
+              const l = W ? sum(f, i => W[i]) : f.length;
               groupFacet.push(i++);
               groupData.push(take(data, f));
               BX.push(x);
@@ -86,14 +87,14 @@ function group1(x = identity, key, {[key]: k, domain, normalize, z, fill, stroke
   ];
 }
 
-function group2(xv, yv, {z, fill, stroke, domain, normalize, ...options} = {}) {
+function group2(xv, yv, {z, fill, stroke, weight, domain, normalize, ...options} = {}) {
   let {value: x, domain: xdomain} = {domain, ...maybeValue(xv)};
   let {value: y, domain: ydomain} = {domain, ...maybeValue(yv)};
   ([x, y] = maybeTuple(x, y));
-  const k = normalize === true || normalize === "z" ? 100 : +normalize;
+  const m = normalize === true || normalize === "z" ? 100 : +normalize;
   const [X, setX] = lazyChannel(x);
   const [Y, setY] = lazyChannel(y);
-  const [L, setL] = lazyChannel(`Frequency${k === 100 ? " (%)" : ""}`);
+  const [L, setL] = lazyChannel(`Frequency${m === 100 ? " (%)" : ""}`);
   const [Z, setZ] = maybeLazyChannel(z);
   const [vfill] = maybeColor(fill);
   const [vstroke] = maybeColor(stroke);
@@ -113,6 +114,7 @@ function group2(xv, yv, {z, fill, stroke, domain, normalize, ...options} = {}) {
         const Z = valueof(data, z);
         const F = valueof(data, vfill);
         const S = valueof(data, vstroke);
+        const W = valueof(data, weight);
         const groupFacets = [];
         const groupData = [];
         const G = firstof(Z, F, S);
@@ -122,22 +124,22 @@ function group2(xv, yv, {z, fill, stroke, domain, normalize, ...options} = {}) {
         const BZ = Z && setZ([]);
         const BF = F && setF([]);
         const BS = S && setS([]);
-        let n = data.length;
+        let n = W ? sum(W) : data.length;
         let i = 0;
         for (const facet of facets) {
           const groupFacet = [];
           for (const I of G ? grouper(facet, i => G[i]).values() : [facet]) {
-            if (normalize === "z") n = I.length;
+            if (normalize === "z") n = W ? sum(I, i => W[i]) : I.length;
             for (const [y, fy] of sort(grouper(I, i => Y[i]), first)) {
               if (!ydefined(y)) continue;
               for (const [x, f] of sort(grouper(fy, i => X[i]), first)) {
                 if (!xdefined(x)) continue;
-                const l = f.length;
+                const l = W ? sum(f, i => W[i]) : f.length;
                 groupFacet.push(i++);
                 groupData.push(take(data, f));
                 BX.push(x);
                 BY.push(y);
-                BL.push(k ? l * k / n : l);
+                BL.push(m ? l * m / n : l);
                 if (Z) BZ.push(Z[f[0]]);
                 if (F) BF.push(F[f[0]]);
                 if (S) BS.push(S[f[0]]);
diff --git a/test/data/fruit-sales.csv b/test/data/fruit-sales.csv
@@ -0,0 +1,8 @@
+date,fruit,units
+2021-03-15,apples,6
+2021-03-15,oranges,2
+2021-03-15,grapes,3
+2021-03-16,apples,14
+2021-03-16,oranges,7
+2021-03-16,grapes,7
+2021-03-16,bananas,4
diff --git a/test/output/fruitSales.svg b/test/output/fruitSales.svg
@@ -0,0 +1,60 @@
+<svg class="plot" fill="currentColor" text-anchor="middle" width="640" height="396" viewBox="0 0 640 396" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="translate(50,0)" fill="none" text-anchor="end">
+    <g class="tick" opacity="1" transform="translate(0,67.5)">
+      <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">apples</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,151.5)">
+      <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">bananas</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,235.5)">
+      <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">grapes</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(0,319.5)">
+      <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">oranges</text>
+    </g>
+  </g>
+  <g transform="translate(0,366)" fill="none" text-anchor="middle">
+    <g class="tick" opacity="1" transform="translate(50.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(107.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(164.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">4</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(221.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">6</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(278.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">8</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(335.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(392.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(449.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">14</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(506.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">16</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(563.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">18</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(620.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">20</text>
+    </g><text fill="currentColor" transform="translate(640,30)" dy="-0.32em" text-anchor="end">units →</text>
+  </g>
+  <g>
+    <rect x="50" width="570" y="29" height="76"></rect>
+    <rect x="50" width="114" y="113" height="76"></rect>
+    <rect x="50" width="285" y="197" height="76"></rect>
+    <rect x="50" width="256.5" y="281" height="76"></rect>
+  </g>
+  <g stroke="currentColor" transform="translate(0.5,0)">
+    <line x1="50" x2="50" y1="20" y2="366"></line>
+  </g>
+</svg>
diff --git a/test/plots/fruit-sales.js b/test/plots/fruit-sales.js
@@ -0,0 +1,16 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const sales = await d3.csv("data/fruit-sales.csv", d3.autoType);
+  return Plot.plot({
+    marginLeft: 50,
+    y: {
+      label: null
+    },
+    marks: [
+      Plot.barX(sales, Plot.groupY({y: "fruit", weight: "units"})),
+      Plot.ruleX([0])
+    ]
+  });
+}
diff --git a/test/plots/index.js b/test/plots/index.js
@@ -16,6 +16,7 @@ export {default as d3Survey2015Why} from "./d3-survey-2015-why.js";
 export {default as diamondsCaratPrice} from "./diamonds-carat-price.js";
 export {default as diamondsCaratPriceDots} from "./diamonds-carat-price-dots.js";
 export {default as empty} from "./empty.js";
+export {default as fruitSales} from "./fruit-sales.js";
 export {default as gistempAnomaly} from "./gistemp-anomaly.js";
 export {default as gistempAnomalyMoving} from "./gistemp-anomaly-moving.js";
 export {default as hadcrutWarmingStripes} from "./hadcrut-warming-stripes.js";
