compute the scaled coordinates of bars (and cell) before filtering, allowing NaN, null and undefined as (ordinal) classes

groups respect the domain option

fixes #52
fixes #45
fixes #255
supersedes #271

Author: Fil

src/marks/bar.js

@@ -48,7 +48,11 @@ export class AbstractBar extends Mark {
     const {rx, ry} = this;
     const {color} = scales;
     const {z: Z, title: L, fill: F, stroke: S} = channels;
-    const index = filter(I, ...this._positions(channels), F, S);
+    const [X, vx] = maybeCoords(this._x(scales, channels, dimensions), I);
+    const [Y, vy] = maybeCoords(this._y(scales, channels, dimensions), I);
+    const [W, vw] = maybeCoords(this._width(scales, channels, dimensions), I);
+    const [H, vh] = maybeCoords(this._height(scales, channels, dimensions), I);
+    const index = filter(I, X, Y, W, H, F, S);
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
     return create("svg:g")
         .call(applyIndirectStyles, this)
@@ -57,10 +61,10 @@ export class AbstractBar extends Mark {
           .data(index)
           .join("rect")
             .call(applyDirectStyles, this)
-            .attr("x", this._x(scales, channels, dimensions))
-            .attr("width", this._width(scales, channels, dimensions))
-            .attr("y", this._y(scales, channels, dimensions))
-            .attr("height", this._height(scales, channels, dimensions))
+            .attr("x", X ? i => X[i] : vx)
+            .attr("width", W ? i => W[i] : vw)
+            .attr("y", Y ? i => Y[i] : vy)
+            .attr("height", H ? i => H[i] : vh)
             .attr("fill", F && (i => color(F[i])))
             .attr("stroke", S && (i => color(S[i])))
             .call(rx != null ? rect => rect.attr("rx", rx) : () => {})
@@ -88,6 +92,17 @@ export class AbstractBar extends Mark {
   }
 }
 
+function maybeCoords(x, I) {
+  if (typeof x === "function") {
+    const X = [];
+    for (const i of I) {
+      X[i] = x(i);
+    }
+    return [X, undefined];
+  }
+  return [undefined, x];
+}
+
 export class BarX extends AbstractBar {
   constructor(data, {x1, x2, y, ...options} = {}) {
     super(
@@ -103,9 +118,6 @@ export class BarX extends AbstractBar {
   _transform(selection, {x}) {
     selection.call(applyTransform, x, null);
   }
-  _positions({x1: X1, x2: X2, y: Y}) {
-    return [X1, X2, Y];
-  }
   _x({x}, {x1: X1, x2: X2}) {
     const {insetLeft} = this;
     return i => Math.min(x(X1[i]), x(X2[i])) + insetLeft;
@@ -131,9 +143,6 @@ export class BarY extends AbstractBar {
   _transform(selection, {y}) {
     selection.call(applyTransform, null, y);
   }
-  _positions({y1: Y1, y2: Y2, x: X}) {
-    return [Y1, Y2, X];
-  }
   _y({y}, {y1: Y1, y2: Y2}) {
     const {insetTop} = this;
     return i => Math.min(y(Y1[i]), y(Y2[i])) + insetTop;

src/transforms/group.js

@@ -1,4 +1,4 @@
-import {group as grouper, sort, sum, deviation, min, max, mean, median, variance} from "d3";
+import {InternSet, group as grouper, sort, sum, deviation, min, max, mean, median, variance} from "d3";
 import {firstof} from "../defined.js";
 import {valueof, maybeColor, maybeInput, maybeTransform, maybeTuple, maybeLazyChannel, lazyChannel, first, identity, take, labelof, range} from "../mark.js";
 
@@ -34,7 +34,7 @@ function groupn(
   x, // optionally group on x
   y, // optionally group on y
   {data: reduceData = reduceIdentity, ...outputs} = {}, // output channel definitions
-  inputs = {} // input channels and options
+  {domain, xdomain = domain, ydomain = domain, ...inputs} = {} // input channels and options
 ) {
   reduceData = maybeReduce(reduceData, identity);
   outputs = maybeOutputs(outputs, inputs);
@@ -53,6 +53,9 @@ function groupn(
   const [GF = fill, setGF] = maybeLazyChannel(vfill);
   const [GS = stroke, setGS] = maybeLazyChannel(vstroke);
 
+  // Only return groups that belong to the domain
+  const xdefined = GX && maybeDomain(xdomain);
+  const ydefined = GY && maybeDomain(ydomain);
   return {
     z: GZ,
     fill: GF,
@@ -82,8 +85,8 @@ function groupn(
         for (const o of outputs) o.scope("facet", facet);
         for (const [, I] of maybeGroup(facet, G)) {
           for (const o of outputs) o.scope("group", I);
-          for (const [y, gg] of maybeGroup(I, Y)) {
-            for (const [x, g] of maybeGroup(gg, X)) {
+          for (const [y, gg] of maybeGroup(I, Y, ydefined, ydomain)) {
+            for (const [x, g] of maybeGroup(gg, X, xdefined, xdomain)) {
               groupFacet.push(i++);
               groupData.push(reduceData.reduce(g, data));
               if (X) GX.push(x);
@@ -130,8 +133,12 @@ export function maybeOutputs(outputs, inputs) {
   });
 }
 
-export function maybeGroup(I, X) {
-  return X ? sort(grouper(I, i => X[i]), first) : [[, I]];
+export function maybeGroup(I, X, filter, domain) {
+  if (!X) return [[, I]];
+  const G = grouper(I, i => X[i]);
+  return domain
+    ? domain.map(x => [x, G.has(x) ? G.get(x) : []])
+    : sort(filter ? Array.from(G).filter(filter) : G, first);
 }
 
 export function maybeReduce(reduce, value) {
@@ -211,3 +218,10 @@ function reduceProportion(value, scope) {
       ? {scope, label: "Frequency", reduce: (I, V, basis = 1) => I.length / basis}
       : {scope, reduce: (I, V, basis = 1) => sum(I, i => V[i]) / basis};
 }
+
+function maybeDomain(domain) {
+  if (domain === undefined) return;
+  if (domain === null) return () => false;
+  domain = new InternSet(domain);
+  return ([key]) => domain.has(key);
+}

test/output/penguinSpeciesIslandSex.svg

@@ -61,6 +61,7 @@ export {default as penguinSexMassCulmenSpecies} from "./penguin-sex-mass-culmen-
 export {default as penguinSpeciesGroup} from "./penguin-species-group.js";
 export {default as penguinSpeciesIsland} from "./penguin-species-island.js";
 export {default as penguinSpeciesIslandRelative} from "./penguin-species-island-relative.js";
+export {default as penguinSpeciesIslandSex} from "./penguin-species-island-sex.js";
 export {default as policeDeaths} from "./police-deaths.js";
 export {default as policeDeathsBar} from "./police-deaths-bar.js";
 export {default as randomWalk} from "./random-walk.js";

test/plots/index.js

@@ -0,0 +1,29 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const data = await d3.csv("data/penguins.csv", d3.autoType);
+  return Plot.plot({
+    facet: {
+      data,
+      x: "species"
+    },
+    fx: {
+      domain: d3.groupSort(data, ({length}) => length, d => d.species).reverse()
+    },
+    x: {
+      domain: ["MALE", "FEMALE", null],
+      tickFormat: d => d === null ? "N/A" : d
+    },
+    y: {
+      grid: true
+    },
+    color: {
+      scheme: "greys"
+    },
+    marks: [
+      Plot.barY(data, Plot.stackY(Plot.groupX({y: "count"}, {x: "sex", fill: "island", stroke: "black"}))),
+      Plot.ruleY([0])
+    ]
+  });
+}

test/plots/penguin-species-island-sex.js

@@ -0,0 +1,36 @@
+import * as Plot from "@observablehq/plot";
+import tape from "tape-await";
+
+tape("groupX respects the domain option (#255)", test => {
+  const data = ["A", "A", "C"];
+  const options = {x: d => d, domain: ["C", "B", "A"]};
+  const mark = Plot.dot(data, Plot.groupX({y: "count"}, options));
+  const A = mark.initialize();
+  test.deepEqual(A.index, [0, 1, 2]);
+  test.deepEqual(A.channels.find(d => d[0] === "x")[1].value, ["C", "B", "A"]);
+  test.deepEqual(A.channels.find(d => d[0] === "y")[1].value, [1, 0, 2]);
+});
+
+tape("groupY respects the domain option (#255)", test => {
+  const data = ["A", "A", "C"];
+  const options = {x: d => d, domain: ["C", "B", "A"]};
+  const mark = Plot.dot(data, Plot.groupY({x: "count"}, options));
+  const A = mark.initialize();
+  test.deepEqual(A.index, [0, 1, 2]);
+  test.deepEqual(A.channels.find(d => d[0] === "y")[1].value, ["C", "B", "A"]);
+  test.deepEqual(A.channels.find(d => d[0] === "x")[1].value, [1, 0, 2]);
+});
+
+tape("group respects the domain option (#255)", test => {
+  const data = ["A", "A", "C", "A", "C"];
+  const options = {x: d => d, y: d => d, domain: ["C", "B", "A"]};
+  const mark = Plot.dot(data, Plot.group({r: "count"}, options));
+  const A = mark.initialize();
+  test.deepEqual(A.index, [0, 1, 2, 3, 4, 5, 6, 7, 8]);
+  test.deepEqual(A.channels.find(d => d[0] === "r")[1].value, [
+  //C, B, A
+    2, 0, 0, // C
+    0, 0, 0, // B
+    0, 0, 3  // A
+  ]);
+});