From 8109fda1e255845755350768de3b0f322f7029ec Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Tue, 26 Mar 2024 20:24:29 -0700
Subject: [PATCH 01/22] checkpoint waffle

---
 src/index.js         |   1 +
 src/marks/waffle.js  | 153 +++++++++++++++++++++++++++++++++++++++++++
 test/plots/index.ts  |   1 +
 test/plots/waffle.ts |  22 +++++++
 4 files changed, 177 insertions(+)
 create mode 100644 src/marks/waffle.js
 create mode 100644 test/plots/waffle.ts

diff --git a/src/index.js b/src/index.js
index 9fde7ce2d5..3e833db352 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,6 +30,7 @@ export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
 export {Tip, tip} from "./marks/tip.js";
 export {tree, cluster} from "./marks/tree.js";
 export {Vector, vector, vectorX, vectorY, spike} from "./marks/vector.js";
+export {waffleY} from "./marks/waffle.js";
 export {valueof, column, identity, indexOf} from "./options.js";
 export {filter, reverse, sort, shuffle, basic as transform, initializer} from "./transforms/basic.js";
 export {bin, binX, binY} from "./transforms/bin.js";
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
new file mode 100644
index 0000000000..eac55cd7df
--- /dev/null
+++ b/src/marks/waffle.js
@@ -0,0 +1,153 @@
+import {template} from "../template.js";
+import {create} from "../context.js";
+import {Mark} from "../mark.js";
+import {hasXY, identity, indexOf} from "../options.js";
+import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform, getClipId} from "../style.js";
+import {maybeIdentityY} from "../transforms/identity.js";
+import {maybeIntervalY} from "../transforms/interval.js";
+import {maybeStackY} from "../transforms/stack.js";
+
+const defaults = {
+  ariaLabel: "waffle"
+};
+
+let nextWaffleId = 0;
+
+export class WaffleY extends Mark {
+  constructor(data, options = {}) {
+    const {x, y1, y2} = options;
+    super(
+      data,
+      {
+        y1: {value: y1, scale: "y", type: "linear"},
+        y2: {value: y2, scale: "y", type: "linear"},
+        x: {value: x, scale: "x", type: "band", optional: true}
+      },
+      options,
+      defaults
+    );
+  }
+  render(index, scales, channels, dimensions, context) {
+    // TODO rx, ry affects each waffle cell
+    // TODO recycle patterns that share the same fill color
+    const patternId = `plot-waffle-${++nextWaffleId}`;
+
+    // The “density” of the y-scale, in pixels per unit; the number of waffle
+    // cells must correspond to the same number of units along the y-scale.
+    // TODO multiples (e.g., each cell in the waffle represents one thousand)
+    const density = Math.abs(scales.y(0) - scales.y(1));
+
+    // The width of the waffle, in cells. This must be an integer. TODO We need
+    // to compute this automatically, but how?
+    const columns = 10;
+
+    // The outer width of each waffle cell, in pixels, including the gap.
+    const cellwidth = density * columns;
+
+    // The gap between adjacent cells, in pixels.
+    const cellgap = 1;
+
+    // The available bandwidth; we might not use all the available space if the
+    // waffle cells don’t fit evenly.
+    const bandwidth = this._width(scales, channels, dimensions);
+
+    // A waffle is generally a rectangular shape, but may have one or two corner
+    // cuts if the number of units in the starting or ending value of the waffle
+    // is not an even multiple of the number of columns (the width of the waffle
+    // in cells). We can represent any waffle by seven points. Below is a waffle
+    // of five columns representing the interval 2–11:
+    //
+    //         0-1
+    // 6-------7█|
+    // |█ █ █ █ █|
+    // |█ █ █3---2
+    // 5-----4
+    //
+    // Note that points 0 and 1 always have the same y-value, points 1 and 2
+    // have the same x-value, and so on, so we don’t need to materialize the x-
+    // and y-values of all points. Also note that we can’t use the already-
+    // projected y-values because these assume that y-values are distributed
+    // linearly along y rather than wrapping around in columns.
+    //
+    // The corner points may be coincident. If the ending value is an even
+    // multiple of the number of columns, say representing the interval 2–10,
+    // then points 6, 7, and 0 are the same.
+    //
+    // 6/7/0-----1
+    // |█ █ █ █ █|
+    // |█ █ █3---2
+    // 5-----4
+    //
+    // Likewise if the starting value is an even multiple, say representing the
+    // interval 0–10, points 2–4 are coincident.
+    //
+    // 6/7/0-----1
+    // |█ █ █ █ █|
+    // |█ █ █ █ █|
+    // 5-----2/3/4
+    //
+    // Waffles can also represent fractional intervals (e.g., 2.4–10.1), but we
+    // haven’t implemented that yet.
+
+    const {marginLeft, marginBottom, height} = dimensions;
+    const F = channels.fill;
+    const Y1 = channels.channels.y1.value;
+    const Y2 = channels.channels.y2.value;
+    const {y} = scales;
+
+    const x0 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellwidth;
+    const y0 = (i) => y(Math.ceil(Y2[i] / columns) * columns);
+    const x1 = () => marginLeft + columns * cellwidth;
+    const y2 = (i) => y(Math.ceil(Y1[i] / columns) * columns);
+    const x3 = (i) => marginLeft + (columns - (Y1[i] % columns)) * cellwidth;
+    const y4 = (i) => y(Math.floor(Y1[i] / columns) * columns);
+    const x5 = () => marginLeft + 0;
+    const y6 = (i) => y(Math.floor(Y2[i] / columns) * columns);
+    const x7 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellwidth;
+
+    return create("svg:g", context)
+      .call(applyIndirectStyles, this, dimensions, context)
+      .call(this._transform, this, scales)
+      .call((g) =>
+        g
+          .selectAll()
+          .data(index)
+          .enter()
+          .call((g) =>
+            g
+              .append("pattern")
+              .attr("id", (i) => `${patternId}-${i}`)
+              .attr("width", cellwidth)
+              .attr("height", cellwidth)
+              .attr("x", marginLeft + cellgap / 2)
+              .attr("y", height - marginBottom - cellwidth + cellgap / 2)
+              .attr("patternUnits", "userSpaceOnUse")
+              .append("rect")
+              .attr("fill", (i) => F[i])
+              .attr("width", cellwidth - cellgap)
+              .attr("height", cellwidth - cellgap)
+          )
+          .call((g) =>
+            g
+              .append("path")
+              .call(applyDirectStyles, this)
+              .attr("d", template`M${x0},${y0}H${x1}V${y2}H${x3}V${y4}H${x5}V${y6}H${x7}Z`)
+              .call(applyChannelStyles, this, channels) // TODO remove fill
+              .attr("fill", (i) => `url(#${patternId}-${i})`)
+          )
+      )
+      .node();
+  }
+  _transform(selection, mark, {y}) {
+    selection.call(applyTransform, mark, {y}, 0, 0);
+  }
+  _width({x}, {x: X}, {marginRight, marginLeft, width}) {
+    const bandwidth = X && x ? x.bandwidth() : width - marginRight - marginLeft;
+    return Math.max(0, bandwidth);
+  }
+}
+
+export function waffleY(data, options = {}) {
+  if (!hasXY(options)) options = {...options, x: indexOf, y2: identity};
+  return new WaffleY(data, maybeStackY(maybeIntervalY(maybeIdentityY(options))));
+}
diff --git a/test/plots/index.ts b/test/plots/index.ts
index 0a3ee3eb0d..303a809cea 100644
--- a/test/plots/index.ts
+++ b/test/plots/index.ts
@@ -327,6 +327,7 @@ export * from "./var-color.js";
 export * from "./vector-field.js";
 export * from "./vector-frame.js";
 export * from "./volcano.js";
+export * from "./waffle.js";
 export * from "./walmarts-decades.js";
 export * from "./walmarts-density-unprojected.js";
 export * from "./walmarts-density.js";
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
new file mode 100644
index 0000000000..99e66f089c
--- /dev/null
+++ b/test/plots/waffle.ts
@@ -0,0 +1,22 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export function waffleY() {
+  const data = d3.csvParse(
+    `group,label,freq
+Infants <1,0-1,16467
+Children <11,1-11,30098
+Teens 12-17,12-17,20354
+Adults 18+,18+,12456
+Elderly 65+,65+,12456`,
+    d3.autoType
+  );
+  return Plot.plot({
+    width: 500,
+    marginLeft: 20,
+    marks: [
+      Plot.waffleY(data, {fill: "group", y: (d) => Math.round(d.freq / 1000)}),
+      Plot.ruleY([0])
+    ]
+  });
+}

From eb307870f70da551892864815d3bdda141f1e548 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Tue, 26 Mar 2024 20:27:53 -0700
Subject: [PATCH 02/22] tweaks

---
 src/marks/waffle.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index eac55cd7df..2fefb08df8 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -32,17 +32,16 @@ export class WaffleY extends Mark {
     // TODO recycle patterns that share the same fill color
     const patternId = `plot-waffle-${++nextWaffleId}`;
 
-    // The “density” of the y-scale, in pixels per unit; the number of waffle
-    // cells must correspond to the same number of units along the y-scale.
+    // The length of a unit along y in pixels.
     // TODO multiples (e.g., each cell in the waffle represents one thousand)
-    const density = Math.abs(scales.y(0) - scales.y(1));
+    const scale = Math.abs(scales.y(0) - scales.y(1));
 
     // The width of the waffle, in cells. This must be an integer. TODO We need
     // to compute this automatically, but how?
     const columns = 10;
 
-    // The outer width of each waffle cell, in pixels, including the gap.
-    const cellwidth = density * columns;
+    // The outer size of each square waffle cell, in pixels, including the gap.
+    const cellsize = scale * columns;
 
     // The gap between adjacent cells, in pixels.
     const cellgap = 1;
@@ -95,15 +94,15 @@ export class WaffleY extends Mark {
     const Y2 = channels.channels.y2.value;
     const {y} = scales;
 
-    const x0 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellwidth;
+    const x0 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellsize;
     const y0 = (i) => y(Math.ceil(Y2[i] / columns) * columns);
-    const x1 = () => marginLeft + columns * cellwidth;
+    const x1 = () => marginLeft + columns * cellsize;
     const y2 = (i) => y(Math.ceil(Y1[i] / columns) * columns);
-    const x3 = (i) => marginLeft + (columns - (Y1[i] % columns)) * cellwidth;
+    const x3 = (i) => marginLeft + (columns - (Y1[i] % columns)) * cellsize;
     const y4 = (i) => y(Math.floor(Y1[i] / columns) * columns);
     const x5 = () => marginLeft + 0;
     const y6 = (i) => y(Math.floor(Y2[i] / columns) * columns);
-    const x7 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellwidth;
+    const x7 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellsize;
 
     return create("svg:g", context)
       .call(applyIndirectStyles, this, dimensions, context)
@@ -117,15 +116,17 @@ export class WaffleY extends Mark {
             g
               .append("pattern")
               .attr("id", (i) => `${patternId}-${i}`)
-              .attr("width", cellwidth)
-              .attr("height", cellwidth)
-              .attr("x", marginLeft + cellgap / 2)
-              .attr("y", height - marginBottom - cellwidth + cellgap / 2)
+              .attr("width", cellsize)
+              .attr("height", cellsize)
+              .attr("x", marginLeft)
+              .attr("y", height - marginBottom - cellsize)
               .attr("patternUnits", "userSpaceOnUse")
               .append("rect")
               .attr("fill", (i) => F[i])
-              .attr("width", cellwidth - cellgap)
-              .attr("height", cellwidth - cellgap)
+              .attr("x", cellgap / 2)
+              .attr("y", cellgap / 2)
+              .attr("width", cellsize - cellgap)
+              .attr("height", cellsize - cellgap)
           )
           .call((g) =>
             g

From 5820c4c0512bc494cf0b17f6cb244a0bcb39ada6 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 11:42:30 -0400
Subject: [PATCH 03/22] extend BarY

---
 src/marks/waffle.js  | 135 ++++++++++++++-----------------------------
 test/plots/waffle.ts |   4 +-
 2 files changed, 44 insertions(+), 95 deletions(-)

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 2fefb08df8..a5a1bc4132 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -1,36 +1,22 @@
-import {template} from "../template.js";
-import {create} from "../context.js";
-import {Mark} from "../mark.js";
+import {namespaces} from "d3";
 import {hasXY, identity, indexOf} from "../options.js";
-import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform, getClipId} from "../style.js";
 import {maybeIdentityY} from "../transforms/identity.js";
 import {maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackY} from "../transforms/stack.js";
-
-const defaults = {
-  ariaLabel: "waffle"
-};
+import {BarY} from "./bar.js";
 
 let nextWaffleId = 0;
 
-export class WaffleY extends Mark {
-  constructor(data, options = {}) {
-    const {x, y1, y2} = options;
-    super(
-      data,
-      {
-        y1: {value: y1, scale: "y", type: "linear"},
-        y2: {value: y2, scale: "y", type: "linear"},
-        x: {value: x, scale: "x", type: "band", optional: true}
-      },
-      options,
-      defaults
-    );
+export class WaffleY extends BarY {
+  constructor(data, options) {
+    super(data, options);
   }
   render(index, scales, channels, dimensions, context) {
-    // TODO rx, ry affects each waffle cell
-    // TODO recycle patterns that share the same fill color
-    const patternId = `plot-waffle-${++nextWaffleId}`;
+    const g = super.render(index, scales, channels, dimensions, context);
+
+    // The available bandwidth; we might not use all the available space if the
+    // waffle cells don’t fit evenly.
+    const bandwidth = this._width(scales, channels, dimensions);
 
     // The length of a unit along y in pixels.
     // TODO multiples (e.g., each cell in the waffle represents one thousand)
@@ -38,7 +24,7 @@ export class WaffleY extends Mark {
 
     // The width of the waffle, in cells. This must be an integer. TODO We need
     // to compute this automatically, but how?
-    const columns = 10;
+    const columns = Math.floor(Math.sqrt(bandwidth / scale));
 
     // The outer size of each square waffle cell, in pixels, including the gap.
     const cellsize = scale * columns;
@@ -46,10 +32,6 @@ export class WaffleY extends Mark {
     // The gap between adjacent cells, in pixels.
     const cellgap = 1;
 
-    // The available bandwidth; we might not use all the available space if the
-    // waffle cells don’t fit evenly.
-    const bandwidth = this._width(scales, channels, dimensions);
-
     // A waffle is generally a rectangular shape, but may have one or two corner
     // cuts if the number of units in the starting or ending value of the waffle
     // is not an even multiple of the number of columns (the width of the waffle
@@ -57,9 +39,9 @@ export class WaffleY extends Mark {
     // of five columns representing the interval 2–11:
     //
     //         0-1
-    // 6-------7█|
-    // |█ █ █ █ █|
-    // |█ █ █3---2
+    // 6-------7•|
+    // |• • • • •|
+    // |• • •3---2
     // 5-----4
     //
     // Note that points 0 and 1 always have the same y-value, points 1 and 2
@@ -73,78 +55,47 @@ export class WaffleY extends Mark {
     // then points 6, 7, and 0 are the same.
     //
     // 6/7/0-----1
-    // |█ █ █ █ █|
-    // |█ █ █3---2
+    // |• • • • •|
+    // |• • •3---2
     // 5-----4
     //
     // Likewise if the starting value is an even multiple, say representing the
     // interval 0–10, points 2–4 are coincident.
     //
     // 6/7/0-----1
-    // |█ █ █ █ █|
-    // |█ █ █ █ █|
+    // |• • • • •|
+    // |• • • • •|
     // 5-----2/3/4
     //
     // Waffles can also represent fractional intervals (e.g., 2.4–10.1), but we
     // haven’t implemented that yet.
 
-    const {marginLeft, marginBottom, height} = dimensions;
-    const F = channels.fill;
-    const Y1 = channels.channels.y1.value;
-    const Y2 = channels.channels.y2.value;
-    const {y} = scales;
+    // TODO rx, ry
+    for (const rect of g.querySelectorAll("rect")) {
+      const x = +rect.getAttribute("x");
+      const fill = rect.getAttribute("fill");
+      const patternId = `plot-waffle-${++nextWaffleId}`;
+      const pattern = context.document.createElementNS(namespaces.svg, "pattern");
+      pattern.setAttribute("id", patternId)
+      pattern.setAttribute("width", cellsize);
+      pattern.setAttribute("height", cellsize);
+      pattern.setAttribute("patternUnits", "userSpaceOnUse");
+      pattern.setAttribute("x", x);
+      pattern.setAttribute("y", scales.y(0) - cellgap);
+      const patternRect = context.document.createElementNS(namespaces.svg, "rect");
+      patternRect.setAttribute("fill", fill);
+      patternRect.setAttribute("x", cellgap / 2);
+      patternRect.setAttribute("y", cellgap / 2);
+      patternRect.setAttribute("width", cellsize - cellgap);
+      patternRect.setAttribute("height", cellsize - cellgap);
+      pattern.appendChild(patternRect);
+      rect.setAttribute("transform", `translate(${(bandwidth - columns * cellsize) / 2},0)`);
+      rect.setAttribute("width", columns * cellsize);
+      rect.setAttribute("fill", `url(#${patternId})`);
+      g.insertBefore(pattern, rect);
+    }
 
-    const x0 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellsize;
-    const y0 = (i) => y(Math.ceil(Y2[i] / columns) * columns);
-    const x1 = () => marginLeft + columns * cellsize;
-    const y2 = (i) => y(Math.ceil(Y1[i] / columns) * columns);
-    const x3 = (i) => marginLeft + (columns - (Y1[i] % columns)) * cellsize;
-    const y4 = (i) => y(Math.floor(Y1[i] / columns) * columns);
-    const x5 = () => marginLeft + 0;
-    const y6 = (i) => y(Math.floor(Y2[i] / columns) * columns);
-    const x7 = (i) => marginLeft + (columns - (Y2[i] % columns)) * cellsize;
-
-    return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
-      .call(this._transform, this, scales)
-      .call((g) =>
-        g
-          .selectAll()
-          .data(index)
-          .enter()
-          .call((g) =>
-            g
-              .append("pattern")
-              .attr("id", (i) => `${patternId}-${i}`)
-              .attr("width", cellsize)
-              .attr("height", cellsize)
-              .attr("x", marginLeft)
-              .attr("y", height - marginBottom - cellsize)
-              .attr("patternUnits", "userSpaceOnUse")
-              .append("rect")
-              .attr("fill", (i) => F[i])
-              .attr("x", cellgap / 2)
-              .attr("y", cellgap / 2)
-              .attr("width", cellsize - cellgap)
-              .attr("height", cellsize - cellgap)
-          )
-          .call((g) =>
-            g
-              .append("path")
-              .call(applyDirectStyles, this)
-              .attr("d", template`M${x0},${y0}H${x1}V${y2}H${x3}V${y4}H${x5}V${y6}H${x7}Z`)
-              .call(applyChannelStyles, this, channels) // TODO remove fill
-              .attr("fill", (i) => `url(#${patternId}-${i})`)
-          )
-      )
-      .node();
-  }
-  _transform(selection, mark, {y}) {
-    selection.call(applyTransform, mark, {y}, 0, 0);
-  }
-  _width({x}, {x: X}, {marginRight, marginLeft, width}) {
-    const bandwidth = X && x ? x.bandwidth() : width - marginRight - marginLeft;
-    return Math.max(0, bandwidth);
+    return g;
   }
 }
 
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index 99e66f089c..28bc6f7fdb 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -12,10 +12,8 @@ Elderly 65+,65+,12456`,
     d3.autoType
   );
   return Plot.plot({
-    width: 500,
-    marginLeft: 20,
     marks: [
-      Plot.waffleY(data, {fill: "group", y: (d) => Math.round(d.freq / 1000)}),
+      Plot.waffleY(data, {x: "group", fill: "group", y: (d) => d.freq / 100}),
       Plot.ruleY([0])
     ]
   });

From 07af96bf106c353e97433facff6a1dd01cde988c Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 12:17:58 -0400
Subject: [PATCH 04/22] waffles!

---
 src/marks/waffle.js | 138 +++++++++++++++++++++++++++-----------------
 1 file changed, 86 insertions(+), 52 deletions(-)

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index a5a1bc4132..e7e81284da 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -12,6 +12,7 @@ export class WaffleY extends BarY {
     super(data, options);
   }
   render(index, scales, channels, dimensions, context) {
+    const {document} = context;
     const g = super.render(index, scales, channels, dimensions, context);
 
     // The available bandwidth; we might not use all the available space if the
@@ -22,8 +23,7 @@ export class WaffleY extends BarY {
     // TODO multiples (e.g., each cell in the waffle represents one thousand)
     const scale = Math.abs(scales.y(0) - scales.y(1));
 
-    // The width of the waffle, in cells. This must be an integer. TODO We need
-    // to compute this automatically, but how?
+    // The width of the waffle, in cells. This must be an integer.
     const columns = Math.floor(Math.sqrt(bandwidth / scale));
 
     // The outer size of each square waffle cell, in pixels, including the gap.
@@ -32,73 +32,107 @@ export class WaffleY extends BarY {
     // The gap between adjacent cells, in pixels.
     const cellgap = 1;
 
-    // A waffle is generally a rectangular shape, but may have one or two corner
-    // cuts if the number of units in the starting or ending value of the waffle
-    // is not an even multiple of the number of columns (the width of the waffle
-    // in cells). We can represent any waffle by seven points. Below is a waffle
-    // of five columns representing the interval 2–11:
-    //
-    //         0-1
-    // 6-------7•|
-    // |• • • • •|
-    // |• • •3---2
-    // 5-----4
-    //
-    // Note that points 0 and 1 always have the same y-value, points 1 and 2
-    // have the same x-value, and so on, so we don’t need to materialize the x-
-    // and y-values of all points. Also note that we can’t use the already-
-    // projected y-values because these assume that y-values are distributed
-    // linearly along y rather than wrapping around in columns.
-    //
-    // The corner points may be coincident. If the ending value is an even
-    // multiple of the number of columns, say representing the interval 2–10,
-    // then points 6, 7, and 0 are the same.
-    //
-    // 6/7/0-----1
-    // |• • • • •|
-    // |• • •3---2
-    // 5-----4
-    //
-    // Likewise if the starting value is an even multiple, say representing the
-    // interval 0–10, points 2–4 are coincident.
-    //
-    // 6/7/0-----1
-    // |• • • • •|
-    // |• • • • •|
-    // 5-----2/3/4
-    //
-    // Waffles can also represent fractional intervals (e.g., 2.4–10.1), but we
-    // haven’t implemented that yet.
-
     // TODO rx, ry
-    for (const rect of g.querySelectorAll("rect")) {
-      const x = +rect.getAttribute("x");
+    const Y1 = channels.channels.y1.value;
+    const Y2 = channels.channels.y2.value;
+    const ww = columns * cellsize;
+    const wx = (bandwidth - ww) / 2;
+    let rect = g.firstElementChild;
+    const y0 = scales.y(0) - cellgap;
+    for (const i of index) {
+      const x0 = +rect.getAttribute("x") + wx;
       const fill = rect.getAttribute("fill");
       const patternId = `plot-waffle-${++nextWaffleId}`;
-      const pattern = context.document.createElementNS(namespaces.svg, "pattern");
-      pattern.setAttribute("id", patternId)
+      const pattern = g.insertBefore(document.createElementNS(namespaces.svg, "pattern"), rect);
+      pattern.setAttribute("id", patternId);
       pattern.setAttribute("width", cellsize);
       pattern.setAttribute("height", cellsize);
       pattern.setAttribute("patternUnits", "userSpaceOnUse");
-      pattern.setAttribute("x", x);
-      pattern.setAttribute("y", scales.y(0) - cellgap);
-      const patternRect = context.document.createElementNS(namespaces.svg, "rect");
+      pattern.setAttribute("x", x0);
+      pattern.setAttribute("y", y0);
+      const patternRect = pattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
       patternRect.setAttribute("fill", fill);
       patternRect.setAttribute("x", cellgap / 2);
       patternRect.setAttribute("y", cellgap / 2);
       patternRect.setAttribute("width", cellsize - cellgap);
       patternRect.setAttribute("height", cellsize - cellgap);
-      pattern.appendChild(patternRect);
-      rect.setAttribute("transform", `translate(${(bandwidth - columns * cellsize) / 2},0)`);
-      rect.setAttribute("width", columns * cellsize);
-      rect.setAttribute("fill", `url(#${patternId})`);
-      g.insertBefore(pattern, rect);
+      const path = document.createElementNS(namespaces.svg, "path");
+      for (const a of rect.attributes) {
+        switch (a.name) {
+          case "x":
+          case "y":
+          case "width":
+          case "height":
+          case "fill":
+            continue;
+        }
+        path.setAttribute(a.name, a.value);
+      }
+      path.setAttribute(
+        "d",
+        `M${wafflePoints(Y1[i], Y2[i], columns)
+          .map(([x, y]) => [x * cellsize + x0, y0 - y * cellsize])
+          .join("L")}Z`
+      );
+      path.setAttribute("fill", `url(#${patternId})`);
+      const nextRect = rect.nextElementSibling;
+      rect.replaceWith(path);
+      rect = nextRect;
     }
 
     return g;
   }
 }
 
+// A waffle is generally a rectangular shape, but may have one or two corner
+// cuts if the number of units in the starting or ending value of the waffle
+// is not an even multiple of the number of columns (the width of the waffle
+// in cells). We can represent any waffle by seven points. Below is a waffle
+// of five columns representing the interval 2–11:
+//
+//         0-1
+// 6-------7•|
+// |• • • • •|
+// |• • •3---2
+// 5-----4
+//
+// Note that points 0 and 1 always have the same y-value, points 1 and 2
+// have the same x-value, and so on, so we don’t need to materialize the x-
+// and y-values of all points. Also note that we can’t use the already-
+// projected y-values because these assume that y-values are distributed
+// linearly along y rather than wrapping around in columns.
+//
+// The corner points may be coincident. If the ending value is an even
+// multiple of the number of columns, say representing the interval 2–10,
+// then points 6, 7, and 0 are the same.
+//
+// 6/7/0-----1
+// |• • • • •|
+// |• • •3---2
+// 5-----4
+//
+// Likewise if the starting value is an even multiple, say representing the
+// interval 0–10, points 2–4 are coincident.
+//
+// 6/7/0-----1
+// |• • • • •|
+// |• • • • •|
+// 5-----2/3/4
+//
+// Waffles can also represent fractional intervals (e.g., 2.4–10.1).
+function wafflePoints(i1, i2, columns) {
+  return [
+    [columns - (i2 % columns), Math.ceil(i2 / columns)],
+    [columns, Math.ceil(i2 / columns)],
+    [columns, Math.ceil(i1 / columns)],
+    [columns - (i1 % columns), Math.ceil(i1 / columns)],
+    [columns - (i1 % columns), Math.floor(i1 / columns)],
+    [0, Math.floor(i1 / columns)],
+    [0, Math.floor(i2 / columns)],
+    [columns - (i2 % columns), Math.floor(i2 / columns)]
+  ];
+}
+
 export function waffleY(data, options = {}) {
   if (!hasXY(options)) options = {...options, x: indexOf, y2: identity};
   return new WaffleY(data, maybeStackY(maybeIntervalY(maybeIdentityY(options))));

From 8ae54157e9f388e1edb3d27625fa0a6d56efcc17 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 12:33:06 -0400
Subject: [PATCH 05/22] change fractional orientation

---
 src/marks/waffle.js  | 14 +++++++++-----
 test/plots/waffle.ts |  4 +++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index e7e81284da..ce265980fa 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -32,7 +32,7 @@ export class WaffleY extends BarY {
     // The gap between adjacent cells, in pixels.
     const cellgap = 1;
 
-    // TODO rx, ry
+    // TODO rx, ry, insets
     const Y1 = channels.channels.y1.value;
     const Y2 = channels.channels.y2.value;
     const ww = columns * cellsize;
@@ -122,14 +122,18 @@ export class WaffleY extends BarY {
 // Waffles can also represent fractional intervals (e.g., 2.4–10.1).
 function wafflePoints(i1, i2, columns) {
   return [
-    [columns - (i2 % columns), Math.ceil(i2 / columns)],
+    [Math.ceil(columns - (i2 % columns)), Math.ceil(i2 / columns)],
     [columns, Math.ceil(i2 / columns)],
     [columns, Math.ceil(i1 / columns)],
-    [columns - (i1 % columns), Math.ceil(i1 / columns)],
-    [columns - (i1 % columns), Math.floor(i1 / columns)],
+    [Math.ceil(columns - (i1 % columns)), Math.ceil(i1 / columns)],
+    [Math.ceil(columns - (i1 % columns)), Math.floor(i1 / columns) + (i1 % 1)],
+    [Math.floor(columns - (i1 % columns)), Math.floor(i1 / columns) + (i1 % 1)],
+    [Math.floor(columns - (i1 % columns)), Math.floor(i1 / columns)],
     [0, Math.floor(i1 / columns)],
     [0, Math.floor(i2 / columns)],
-    [columns - (i2 % columns), Math.floor(i2 / columns)]
+    [Math.floor(columns - (i2 % columns)), Math.floor(i2 / columns)],
+    [Math.floor(columns - (i2 % columns)), Math.floor(i2 / columns) + (i2 % 1)],
+    [Math.ceil(columns - (i2 % columns)), Math.floor(i2 / columns) + (i2 % 1)]
   ];
 }
 
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index 28bc6f7fdb..b7674fafb7 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -12,8 +12,10 @@ Elderly 65+,65+,12456`,
     d3.autoType
   );
   return Plot.plot({
+    x: {label: null},
+    color: {scheme: "cool"},
     marks: [
-      Plot.waffleY(data, {x: "group", fill: "group", y: (d) => d.freq / 100}),
+      Plot.waffleY(data, {x: "group", fill: "group", y: (d) => d.freq / 100, sort: {x: null, color: null}}),
       Plot.ruleY([0])
     ]
   });

From 216c121d0a003cd89f4731efdf5fe3ade877fd3c Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 12:58:09 -0400
Subject: [PATCH 06/22] waffle test

---
 src/marks/waffle.js     | 27 ++++++------
 test/output/waffleY.svg | 91 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 106 insertions(+), 12 deletions(-)
 create mode 100644 test/output/waffleY.svg

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index ce265980fa..bf572e9b9c 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -9,7 +9,7 @@ let nextWaffleId = 0;
 
 export class WaffleY extends BarY {
   constructor(data, options) {
-    super(data, options);
+    super(data, {...options, stroke: "none"});
   }
   render(index, scales, channels, dimensions, context) {
     const {document} = context;
@@ -32,30 +32,33 @@ export class WaffleY extends BarY {
     // The gap between adjacent cells, in pixels.
     const cellgap = 1;
 
-    // TODO rx, ry, insets
+    // TODO rx, ry
+    // TODO insets?
     const Y1 = channels.channels.y1.value;
     const Y2 = channels.channels.y2.value;
     const ww = columns * cellsize;
     const wx = (bandwidth - ww) / 2;
     let rect = g.firstElementChild;
     const y0 = scales.y(0) - cellgap;
+    const basePattern = document.createElementNS(namespaces.svg, "pattern");
+    basePattern.setAttribute("width", cellsize);
+    basePattern.setAttribute("height", cellsize);
+    basePattern.setAttribute("patternUnits", "userSpaceOnUse");
+    basePattern.setAttribute("y", y0);
+    const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
+    basePatternRect.setAttribute("x", cellgap / 2);
+    basePatternRect.setAttribute("y", cellgap / 2);
+    basePatternRect.setAttribute("width", cellsize - cellgap);
+    basePatternRect.setAttribute("height", cellsize - cellgap);
     for (const i of index) {
       const x0 = +rect.getAttribute("x") + wx;
       const fill = rect.getAttribute("fill");
       const patternId = `plot-waffle-${++nextWaffleId}`;
-      const pattern = g.insertBefore(document.createElementNS(namespaces.svg, "pattern"), rect);
+      const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
+      const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
-      pattern.setAttribute("width", cellsize);
-      pattern.setAttribute("height", cellsize);
-      pattern.setAttribute("patternUnits", "userSpaceOnUse");
       pattern.setAttribute("x", x0);
-      pattern.setAttribute("y", y0);
-      const patternRect = pattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
       patternRect.setAttribute("fill", fill);
-      patternRect.setAttribute("x", cellgap / 2);
-      patternRect.setAttribute("y", cellgap / 2);
-      patternRect.setAttribute("width", cellsize - cellgap);
-      patternRect.setAttribute("height", cellsize - cellgap);
       const path = document.createElementNS(namespaces.svg, "path");
       for (const a of rect.attributes) {
         switch (a.name) {
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
new file mode 100644
index 0000000000..8ce688cbeb
--- /dev/null
+++ b/test/output/waffleY.svg
@@ -0,0 +1,91 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,346.7426407070237)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,323.48528141404745)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,300.2279221210712)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,276.9705628280949)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,253.7132035351186)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,230.45584424214235)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,207.19848494916607)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,183.9411256561898)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,160.68376636321352)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,137.42640707023725)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,114.16904777726096)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,90.9116884842847)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,67.65432919130842)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,44.39696989833213)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,21.139610605355855)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,370)">0</text>
+    <text y="0.32em" transform="translate(40,346.7426407070237)">20</text>
+    <text y="0.32em" transform="translate(40,323.48528141404745)">40</text>
+    <text y="0.32em" transform="translate(40,300.2279221210712)">60</text>
+    <text y="0.32em" transform="translate(40,276.9705628280949)">80</text>
+    <text y="0.32em" transform="translate(40,253.7132035351186)">100</text>
+    <text y="0.32em" transform="translate(40,230.45584424214235)">120</text>
+    <text y="0.32em" transform="translate(40,207.19848494916607)">140</text>
+    <text y="0.32em" transform="translate(40,183.9411256561898)">160</text>
+    <text y="0.32em" transform="translate(40,160.68376636321352)">180</text>
+    <text y="0.32em" transform="translate(40,137.42640707023725)">200</text>
+    <text y="0.32em" transform="translate(40,114.16904777726096)">220</text>
+    <text y="0.32em" transform="translate(40,90.9116884842847)">240</text>
+    <text y="0.32em" transform="translate(40,67.65432919130842)">260</text>
+    <text y="0.32em" transform="translate(40,44.39696989833213)">280</text>
+    <text y="0.32em" transform="translate(40,21.139610605355855)">300</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(51.5,0)">
+    <path transform="translate(53,370)" d="M0,0L0,6"></path>
+    <path transform="translate(166,370)" d="M0,0L0,6"></path>
+    <path transform="translate(279,370)" d="M0,0L0,6"></path>
+    <path transform="translate(392,370)" d="M0,0L0,6"></path>
+    <path transform="translate(505,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(51.5,9.5)">
+    <text y="0.71em" transform="translate(53,370)">Infants &lt;1</text>
+    <text y="0.71em" transform="translate(166,370)">Children &lt;11</text>
+    <text y="0.71em" transform="translate(279,370)">Teens 12-17</text>
+    <text y="0.71em" transform="translate(392,370)">Adults 18+</text>
+    <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
+  </g>
+  <g aria-label="bar">
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-1" x="56.90384743172373">
+      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(110, 64, 170)"></rect>
+    </pattern>
+    <path d="M130.16452920459793,170.14957804505576L151.09615256827627,170.14957804505576L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L56.90384743172373,369L56.90384743172373,180.61538972689493L119.69871752275876,180.61538972689493L119.69871752275876,173.60329590006282L130.16452920459793,173.60329590006282Z" fill="url(#plot-waffle-1)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-2" x="169.90384743172373">
+      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(65, 125, 224)"></rect>
+    </pattern>
+    <path d="M232.69871752275876,13.162402817468205L264.09615256827624,13.162402817468205L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L169.90384743172373,369L169.90384743172373,23.628214499307376L222.23290584091959,23.628214499307376L222.23290584091959,13.371719051104776L232.69871752275876,13.371719051104776Z" fill="url(#plot-waffle-2)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-3" x="282.90384743172376">
+      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(26, 199, 194)"></rect>
+    </pattern>
+    <path d="M324.76709415908044,128.28633131769908L377.0961525682763,128.28633131769908L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L282.90384743172376,369L282.90384743172376,138.75214299953825L314.3012824772413,138.75214299953825L314.3012824772413,133.10060469134518L324.76709415908044,133.10060469134518Z" fill="url(#plot-waffle-3)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-4" x="395.90384743172376">
+      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(64, 243, 115)"></rect>
+    </pattern>
+    <path d="M416.8354707954021,222.4786364542516L490.0961525682763,222.4786364542516L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L395.90384743172376,369L395.90384743172376,232.94444813609078L406.36965911356293,232.94444813609078L406.36965911356293,227.08359359426083L416.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-4)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-5" x="508.90384743172376">
+      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(175, 240, 91)"></rect>
+    </pattern>
+    <path d="M529.8354707954021,222.4786364542516L603.0961525682762,222.4786364542516L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L508.90384743172376,369L508.90384743172376,232.94444813609078L519.3696591135629,232.94444813609078L519.3696591135629,227.08359359426083L529.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-5)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
+    <line x1="40" x2="620" y1="370" y2="370"></line>
+  </g>
+</svg>
\ No newline at end of file

From 50c8f6df9f4d5d718e0f74cc7a2312b5e57f6668 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 14:13:15 -0400
Subject: [PATCH 07/22] more waffle

---
 docs/.vitepress/config.ts               |   3 +-
 docs/marks/waffle.md                    |  26 +++
 src/index.d.ts                          |   1 +
 src/marks/bar.d.ts                      |   1 +
 src/marks/waffle.d.ts                   |  45 +++++
 src/marks/waffle.js                     |  69 ++++----
 test/output/waffleShorthand.svg         |  90 ++++++++++
 test/output/waffleShorthandNegative.svg |  90 ++++++++++
 test/output/waffleY.svg                 |  20 +--
 test/output/waffleYGrouped.svg          | 224 ++++++++++++++++++++++++
 test/output/waffleYStacked.html         | 103 +++++++++++
 test/plots/waffle.ts                    |  38 +++-
 12 files changed, 663 insertions(+), 47 deletions(-)
 create mode 100644 docs/marks/waffle.md
 create mode 100644 src/marks/waffle.d.ts
 create mode 100644 test/output/waffleShorthand.svg
 create mode 100644 test/output/waffleShorthandNegative.svg
 create mode 100644 test/output/waffleYGrouped.svg
 create mode 100644 test/output/waffleYStacked.html

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5cda57a5e9..2271044fca 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -107,7 +107,8 @@ export default defineConfig({
           {text: "Tick", link: "/marks/tick"},
           {text: "Tip", link: "/marks/tip"},
           {text: "Tree", link: "/marks/tree"},
-          {text: "Vector", link: "/marks/vector"}
+          {text: "Vector", link: "/marks/vector"},
+          {text: "Waffle", link: "/marks/waffle"}
         ]
       },
       {
diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
new file mode 100644
index 0000000000..f7b53b32d9
--- /dev/null
+++ b/docs/marks/waffle.md
@@ -0,0 +1,26 @@
+# Waffle mark
+
+TODO
+
+## Waffle options
+
+For required channels, see the [bar mark](./bar.md). The waffle mark supports the [standard mark options](../features/marks.md). It does not support [insets](../features/marks.md#insets), [rounded corners](../features/marks.md#rounded-corners), or **stroke**. The **fill** defaults to *currentColor*.
+
+## waffleY(*data*, *options*) {#waffleY}
+
+```js
+Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: "sport"}))
+```
+
+Returns a new vertical↑ waffle with the given *data* and *options*. The following channels are required:
+
+* **y1** - the starting vertical position; bound to the *y* scale
+* **y2** - the ending vertical position; bound to the *y* scale
+
+The following optional channels are supported:
+
+* **x** - the horizontal position; bound to the *x* scale, which must be *band*
+
+If neither the **y1** nor **y2** option is specified, the **y** option may be specified as shorthand to apply an implicit [stackY transform](../transforms/stack.md); this is the typical configuration for a vertical waffle chart with columns aligned at *y* = 0. If the **y** option is not specified, it defaults to [identity](../features/transforms.md#identity). If *options* is undefined, then it defaults to **y2** as identity and **x** as the zero-based index [0, 1, 2, …]; this allows an array of numbers to be passed to waffleY to make a quick sequential waffle chart. If the **x** channel is not specified, the column will span the full horizontal extent of the plot (or facet).
+
+If an **interval** is specified, such as d3.utcDay, **y1** and **y2** can be derived from **y**: *interval*.floor(*y*) is invoked for each *y* to produce *y1*, and *interval*.offset(*y1*) is invoked for each *y1* to produce *y2*. If the interval is specified as a number *n*, *y1* and *y2* are taken as the two consecutive multiples of *n* that bracket *y*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
diff --git a/src/index.d.ts b/src/index.d.ts
index dcaa949da8..a83f0f3715 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -38,6 +38,7 @@ export * from "./marks/tick.js";
 export * from "./marks/tip.js";
 export * from "./marks/tree.js";
 export * from "./marks/vector.js";
+export * from "./marks/waffle.js";
 export * from "./options.js";
 export * from "./plot.js";
 export * from "./projection.js";
diff --git a/src/marks/bar.d.ts b/src/marks/bar.d.ts
index 9cb69b46de..65af451b9b 100644
--- a/src/marks/bar.d.ts
+++ b/src/marks/bar.d.ts
@@ -170,6 +170,7 @@ export function barX(data?: Data, options?: BarXOptions): BarX;
  * ```js
  * Plot.barY(alphabet, {y: "frequency", x: "letter"})
  * ```
+ *
  * If neither **y1** nor **y2** nor **interval** is specified, an implicit
  * stackY transform is applied and **y** defaults to the identity function,
  * assuming that *data* = [*y₀*, *y₁*, *y₂*, …]. Otherwise if an **interval** is
diff --git a/src/marks/waffle.d.ts b/src/marks/waffle.d.ts
new file mode 100644
index 0000000000..e8696574e3
--- /dev/null
+++ b/src/marks/waffle.d.ts
@@ -0,0 +1,45 @@
+import type {Data, RenderableMark} from "../mark.js";
+import type {BarYOptions} from "./bar.js";
+
+/** Options for the waffleY mark. */
+export interface WaffleYOptions extends BarYOptions {
+  /** The quantity each cell represents; defaults to 1. */
+  unit?: number;
+  /** The gap in pixels between cells; defaults to 1. */
+  gap?: number;
+}
+
+/**
+ * Returns a new vertical waffle mark for the given *data* and *options*; the
+ * required *y* values should be quantitative or temporal, and the optional *x*
+ * values should be ordinal. For example, for a vertical waffle chart of Olympic
+ * athletes by sport:
+ *
+ * ```js
+ * Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: "sport"}))
+ * ```
+ *
+ * If neither **y1** nor **y2** nor **interval** is specified, an implicit
+ * stackY transform is applied and **y** defaults to the identity function,
+ * assuming that *data* = [*y₀*, *y₁*, *y₂*, …]. Otherwise if an **interval** is
+ * specified, then **y1** and **y2** are derived from **y**, representing the
+ * lower and upper bound of the containing interval, respectively. Otherwise, if
+ * only one of **y1** or **y2** is specified, the other defaults to **y**, which
+ * defaults to zero.
+ *
+ * The optional **x** ordinal channel specifies the horizontal position; it is
+ * typically bound to the *x* scale, which must be a *band* scale. If the **x**
+ * channel is not specified, the waffle will span the horizontal extent of the
+ * plot’s frame.
+ *
+ * If *options* is undefined, then **x** defaults to the zero-based index of
+ * *data* [0, 1, 2, …], allowing a quick waffle chart from an array of numbers:
+ *
+ * ```js
+ * Plot.waffleY([4, 9, 24, 46, 66, 7])
+ * ```
+ */
+export function waffleY(data?: Data, options?: WaffleYOptions): WaffleY;
+
+/** The waffleY mark. */
+export class WaffleY extends RenderableMark {}
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index bf572e9b9c..e6b71f2833 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -8,48 +8,45 @@ import {BarY} from "./bar.js";
 let nextWaffleId = 0;
 
 export class WaffleY extends BarY {
-  constructor(data, options) {
+  constructor(data, {unit = 1, gap = 1, ...options} = {}) {
     super(data, {...options, stroke: "none"});
+    this.unit = Math.max(0, unit);
+    this.gap = +gap;
   }
   render(index, scales, channels, dimensions, context) {
+    const {unit, gap} = this;
     const {document} = context;
     const g = super.render(index, scales, channels, dimensions, context);
 
-    // The available bandwidth; we might not use all the available space if the
-    // waffle cells don’t fit evenly.
+    // We might not use all the available bandwidth if the cells don’t fit evenly.
     const bandwidth = this._width(scales, channels, dimensions);
 
     // The length of a unit along y in pixels.
-    // TODO multiples (e.g., each cell in the waffle represents one thousand)
-    const scale = Math.abs(scales.y(0) - scales.y(1));
+    const scale = Math.abs(scales.y(0) - scales.y(unit));
 
-    // The width of the waffle, in cells. This must be an integer.
+    // The number of cells on each row of the waffle.
     const columns = Math.floor(Math.sqrt(bandwidth / scale));
 
-    // The outer size of each square waffle cell, in pixels, including the gap.
+    // The outer size of each square cell, in pixels, including the gap.
     const cellsize = scale * columns;
 
-    // The gap between adjacent cells, in pixels.
-    const cellgap = 1;
-
-    // TODO rx, ry
-    // TODO insets?
+    // TODO rx, ry, insets?
     const Y1 = channels.channels.y1.value;
     const Y2 = channels.channels.y2.value;
     const ww = columns * cellsize;
     const wx = (bandwidth - ww) / 2;
     let rect = g.firstElementChild;
-    const y0 = scales.y(0) - cellgap;
+    const y0 = scales.y(0) - gap;
     const basePattern = document.createElementNS(namespaces.svg, "pattern");
     basePattern.setAttribute("width", cellsize);
     basePattern.setAttribute("height", cellsize);
     basePattern.setAttribute("patternUnits", "userSpaceOnUse");
     basePattern.setAttribute("y", y0);
     const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
-    basePatternRect.setAttribute("x", cellgap / 2);
-    basePatternRect.setAttribute("y", cellgap / 2);
-    basePatternRect.setAttribute("width", cellsize - cellgap);
-    basePatternRect.setAttribute("height", cellsize - cellgap);
+    basePatternRect.setAttribute("x", gap / 2);
+    basePatternRect.setAttribute("y", gap / 2);
+    basePatternRect.setAttribute("width", cellsize - gap);
+    basePatternRect.setAttribute("height", cellsize - gap);
     for (const i of index) {
       const x0 = +rect.getAttribute("x") + wx;
       const fill = rect.getAttribute("fill");
@@ -73,7 +70,7 @@ export class WaffleY extends BarY {
       }
       path.setAttribute(
         "d",
-        `M${wafflePoints(Y1[i], Y2[i], columns)
+        `M${wafflePoints(Y1[i] / unit, Y2[i] / unit, columns)
           .map(([x, y]) => [x * cellsize + x0, y0 - y * cellsize])
           .join("L")}Z`
       );
@@ -125,21 +122,33 @@ export class WaffleY extends BarY {
 // Waffles can also represent fractional intervals (e.g., 2.4–10.1).
 function wafflePoints(i1, i2, columns) {
   return [
-    [Math.ceil(columns - (i2 % columns)), Math.ceil(i2 / columns)],
-    [columns, Math.ceil(i2 / columns)],
-    [columns, Math.ceil(i1 / columns)],
-    [Math.ceil(columns - (i1 % columns)), Math.ceil(i1 / columns)],
-    [Math.ceil(columns - (i1 % columns)), Math.floor(i1 / columns) + (i1 % 1)],
-    [Math.floor(columns - (i1 % columns)), Math.floor(i1 / columns) + (i1 % 1)],
-    [Math.floor(columns - (i1 % columns)), Math.floor(i1 / columns)],
-    [0, Math.floor(i1 / columns)],
-    [0, Math.floor(i2 / columns)],
-    [Math.floor(columns - (i2 % columns)), Math.floor(i2 / columns)],
-    [Math.floor(columns - (i2 % columns)), Math.floor(i2 / columns) + (i2 % 1)],
-    [Math.ceil(columns - (i2 % columns)), Math.floor(i2 / columns) + (i2 % 1)]
+    [ceil(columns - (abs(i2) % columns)), ceil(i2 / columns)],
+    [columns, ceil(i2 / columns)],
+    [columns, ceil(i1 / columns)],
+    [ceil(columns - (abs(i1) % columns)), ceil(i1 / columns)],
+    [ceil(columns - (abs(i1) % columns)), floor(i1 / columns) + (i1 % 1)],
+    [floor(columns - (abs(i1) % columns)), floor(i1 / columns) + (i1 % 1)],
+    [floor(columns - (abs(i1) % columns)), floor(i1 / columns)],
+    [0, floor(i1 / columns)],
+    [0, floor(i2 / columns)],
+    [floor(columns - (abs(i2) % columns)), floor(i2 / columns)],
+    [floor(columns - (abs(i2) % columns)), floor(i2 / columns) + (i2 % 1)],
+    [ceil(columns - (abs(i2) % columns)), floor(i2 / columns) + (i2 % 1)]
   ];
 }
 
+function abs(x) {
+  return Math.abs(x);
+}
+
+function ceil(x) {
+  return (x < 0 ? Math.floor : Math.ceil)(x);
+}
+
+function floor(x) {
+  return (x < 0 ? Math.ceil : Math.floor)(x);
+}
+
 export function waffleY(data, options = {}) {
   if (!hasXY(options)) options = {...options, x: indexOf, y2: identity};
   return new WaffleY(data, maybeStackY(maybeIntervalY(maybeIdentityY(options))));
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
new file mode 100644
index 0000000000..556f6116be
--- /dev/null
+++ b/test/output/waffleShorthand.svg
@@ -0,0 +1,90 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,343.48484848484844)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,316.96969696969694)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,290.45454545454544)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,263.93939393939394)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,237.4242424242424)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,210.9090909090909)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,184.3939393939394)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,157.87878787878788)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,131.36363636363637)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,104.84848484848486)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,78.33333333333331)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,51.81818181818183)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,25.303030303030297)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,370)">0</text>
+    <text y="0.32em" transform="translate(40,343.48484848484844)">5</text>
+    <text y="0.32em" transform="translate(40,316.96969696969694)">10</text>
+    <text y="0.32em" transform="translate(40,290.45454545454544)">15</text>
+    <text y="0.32em" transform="translate(40,263.93939393939394)">20</text>
+    <text y="0.32em" transform="translate(40,237.4242424242424)">25</text>
+    <text y="0.32em" transform="translate(40,210.9090909090909)">30</text>
+    <text y="0.32em" transform="translate(40,184.3939393939394)">35</text>
+    <text y="0.32em" transform="translate(40,157.87878787878788)">40</text>
+    <text y="0.32em" transform="translate(40,131.36363636363637)">45</text>
+    <text y="0.32em" transform="translate(40,104.84848484848486)">50</text>
+    <text y="0.32em" transform="translate(40,78.33333333333331)">55</text>
+    <text y="0.32em" transform="translate(40,51.81818181818183)">60</text>
+    <text y="0.32em" transform="translate(40,25.303030303030297)">65</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
+    <path transform="translate(50,370)" d="M0,0L0,6"></path>
+    <path transform="translate(145,370)" d="M0,0L0,6"></path>
+    <path transform="translate(240,370)" d="M0,0L0,6"></path>
+    <path transform="translate(335,370)" d="M0,0L0,6"></path>
+    <path transform="translate(430,370)" d="M0,0L0,6"></path>
+    <path transform="translate(525,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,9.5)">
+    <text y="0.71em" transform="translate(50,370)">0</text>
+    <text y="0.71em" transform="translate(145,370)">1</text>
+    <text y="0.71em" transform="translate(240,370)">2</text>
+    <text y="0.71em" transform="translate(335,370)">3</text>
+    <text y="0.71em" transform="translate(430,370)">4</text>
+    <text y="0.71em" transform="translate(525,370)">5</text>
+  </g>
+  <g aria-label="bar">
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-1" x="50.57575757575751">
+      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    </pattern>
+    <path d="M135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L50.57575757575751,369L50.57575757575751,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875Z" fill="url(#plot-waffle-1)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-2" x="145.5757575757575">
+      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    </pattern>
+    <path d="M209.21212121212125,305.36363636363626L230.4242424242425,305.36363636363626L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L145.5757575757575,369L145.5757575757575,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575Z" fill="url(#plot-waffle-2)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-3" x="240.5757575757575">
+      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    </pattern>
+    <path d="M325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L240.5757575757575,369L240.5757575757575,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252Z" fill="url(#plot-waffle-3)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-4" x="335.5757575757575">
+      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    </pattern>
+    <path d="M378,114.45454545454504L420.4242424242425,114.45454545454504L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L335.5757575757575,369L335.5757575757575,135.6666666666663L378,135.6666666666663L378,135.6666666666663L378,135.6666666666663Z" fill="url(#plot-waffle-4)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-5" x="430.5757575757575">
+      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    </pattern>
+    <path d="M473,8.393939393938808L515.4242424242425,8.393939393938808L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L430.5757575757575,369L430.5757575757575,29.606060606060055L473,29.606060606060055L473,29.606060606060055L473,29.606060606060055Z" fill="url(#plot-waffle-5)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-6" x="525.5757575757575">
+      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    </pattern>
+    <path d="M546.7878787878788,326.5757575757575L610.4242424242425,326.5757575757575L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L525.5757575757575,369L525.5757575757575,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875Z" fill="url(#plot-waffle-6)"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
new file mode 100644
index 0000000000..f7a12fafbb
--- /dev/null
+++ b/test/output/waffleShorthandNegative.svg
@@ -0,0 +1,90 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,374.6969696969697)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,348.1818181818182)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,321.6666666666667)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,295.1515151515151)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,268.6363636363637)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,242.12121212121212)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,215.6060606060606)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,189.09090909090912)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,162.57575757575756)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,136.06060606060603)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,109.54545454545456)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,83.03030303030302)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,56.51515151515153)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,30)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,374.6969696969697)">−65</text>
+    <text y="0.32em" transform="translate(40,348.1818181818182)">−60</text>
+    <text y="0.32em" transform="translate(40,321.6666666666667)">−55</text>
+    <text y="0.32em" transform="translate(40,295.1515151515151)">−50</text>
+    <text y="0.32em" transform="translate(40,268.6363636363637)">−45</text>
+    <text y="0.32em" transform="translate(40,242.12121212121212)">−40</text>
+    <text y="0.32em" transform="translate(40,215.6060606060606)">−35</text>
+    <text y="0.32em" transform="translate(40,189.09090909090912)">−30</text>
+    <text y="0.32em" transform="translate(40,162.57575757575756)">−25</text>
+    <text y="0.32em" transform="translate(40,136.06060606060603)">−20</text>
+    <text y="0.32em" transform="translate(40,109.54545454545456)">−15</text>
+    <text y="0.32em" transform="translate(40,83.03030303030302)">−10</text>
+    <text y="0.32em" transform="translate(40,56.51515151515153)">−5</text>
+    <text y="0.32em" transform="translate(40,30)">0</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,1)">
+    <path transform="translate(50,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(145,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(240,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(335,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(430,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(525,30)" d="M0,0L0,-6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,-8.5)">
+    <text transform="translate(50,30)">0</text>
+    <text transform="translate(145,30)">1</text>
+    <text transform="translate(240,30)">2</text>
+    <text transform="translate(335,30)">3</text>
+    <text transform="translate(430,30)">4</text>
+    <text transform="translate(525,30)">5</text>
+  </g>
+  <g aria-label="bar">
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-7" x="50.57575757575762">
+      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    </pattern>
+    <path d="M135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L50.57575757575762,29L50.57575757575762,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119Z" fill="url(#plot-waffle-7)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-8" x="145.57575757575762">
+      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    </pattern>
+    <path d="M209.2121212121212,92.63636363636357L230.42424242424238,92.63636363636357L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L145.57575757575762,29L145.57575757575762,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238Z" fill="url(#plot-waffle-8)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-9" x="240.57575757575762">
+      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    </pattern>
+    <path d="M325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L240.57575757575762,29L240.57575757575762,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714Z" fill="url(#plot-waffle-9)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-10" x="335.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    </pattern>
+    <path d="M378,283.5454545454543L420.4242424242424,283.5454545454543L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L335.5757575757576,29L335.5757575757576,262.3333333333331L378,262.3333333333331L378,262.3333333333331L378,262.3333333333331Z" fill="url(#plot-waffle-10)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-11" x="430.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    </pattern>
+    <path d="M473,389.6060606060602L515.4242424242424,389.6060606060602L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L430.5757575757576,29L430.5757575757576,368.39393939393904L473,368.39393939393904L473,368.39393939393904L473,368.39393939393904Z" fill="url(#plot-waffle-11)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-12" x="525.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    </pattern>
+    <path d="M546.7878787878788,71.42424242424238L610.4242424242424,71.42424242424238L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L525.5757575757576,29L525.5757575757576,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119Z" fill="url(#plot-waffle-12)"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index 8ce688cbeb..97172b8ec0 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -64,26 +64,26 @@
     <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
   </g>
   <g aria-label="bar">
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-1" x="56.90384743172373">
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-13" x="56.90384743172373">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M130.16452920459793,170.14957804505576L151.09615256827627,170.14957804505576L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L56.90384743172373,369L56.90384743172373,180.61538972689493L119.69871752275876,180.61538972689493L119.69871752275876,173.60329590006282L130.16452920459793,173.60329590006282Z" fill="url(#plot-waffle-1)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-2" x="169.90384743172373">
+    <path d="M130.16452920459793,170.14957804505576L151.09615256827627,170.14957804505576L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L56.90384743172373,369L56.90384743172373,180.61538972689493L119.69871752275876,180.61538972689493L119.69871752275876,173.60329590006282L130.16452920459793,173.60329590006282Z" fill="url(#plot-waffle-13)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-14" x="169.90384743172373">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M232.69871752275876,13.162402817468205L264.09615256827624,13.162402817468205L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L169.90384743172373,369L169.90384743172373,23.628214499307376L222.23290584091959,23.628214499307376L222.23290584091959,13.371719051104776L232.69871752275876,13.371719051104776Z" fill="url(#plot-waffle-2)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-3" x="282.90384743172376">
+    <path d="M232.69871752275876,13.162402817468205L264.09615256827624,13.162402817468205L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L169.90384743172373,369L169.90384743172373,23.628214499307376L222.23290584091959,23.628214499307376L222.23290584091959,13.371719051104776L232.69871752275876,13.371719051104776Z" fill="url(#plot-waffle-14)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-15" x="282.90384743172376">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M324.76709415908044,128.28633131769908L377.0961525682763,128.28633131769908L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L282.90384743172376,369L282.90384743172376,138.75214299953825L314.3012824772413,138.75214299953825L314.3012824772413,133.10060469134518L324.76709415908044,133.10060469134518Z" fill="url(#plot-waffle-3)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-4" x="395.90384743172376">
+    <path d="M324.76709415908044,128.28633131769908L377.0961525682763,128.28633131769908L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L282.90384743172376,369L282.90384743172376,138.75214299953825L314.3012824772413,138.75214299953825L314.3012824772413,133.10060469134518L324.76709415908044,133.10060469134518Z" fill="url(#plot-waffle-15)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-16" x="395.90384743172376">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M416.8354707954021,222.4786364542516L490.0961525682763,222.4786364542516L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L395.90384743172376,369L395.90384743172376,232.94444813609078L406.36965911356293,232.94444813609078L406.36965911356293,227.08359359426083L416.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-4)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-5" x="508.90384743172376">
+    <path d="M416.8354707954021,222.4786364542516L490.0961525682763,222.4786364542516L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L395.90384743172376,369L395.90384743172376,232.94444813609078L406.36965911356293,232.94444813609078L406.36965911356293,227.08359359426083L416.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-16)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-17" x="508.90384743172376">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M529.8354707954021,222.4786364542516L603.0961525682762,222.4786364542516L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L508.90384743172376,369L508.90384743172376,232.94444813609078L519.3696591135629,232.94444813609078L519.3696591135629,227.08359359426083L529.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-5)"></path>
+    <path d="M529.8354707954021,222.4786364542516L603.0961525682762,222.4786364542516L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L508.90384743172376,369L508.90384743172376,232.94444813609078L519.3696591135629,232.94444813609078L519.3696591135629,227.08359359426083L529.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-17)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
new file mode 100644
index 0000000000..cf07be9e0f
--- /dev/null
+++ b/test/output/waffleYGrouped.svg
@@ -0,0 +1,224 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="470" viewBox="0 0 640 470" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,340.3766398645789)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,310.75327972915784)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,281.1299195937368)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,251.5065594583157)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,221.88319932289463)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,192.25983918747355)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,162.6364790520525)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,133.0131189166314)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,103.3897587812103)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,73.76639864578925)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,44.14303851036817)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,370)">0</text>
+    <text y="0.32em" transform="translate(40,340.3766398645789)">200</text>
+    <text y="0.32em" transform="translate(40,310.75327972915784)">400</text>
+    <text y="0.32em" transform="translate(40,281.1299195937368)">600</text>
+    <text y="0.32em" transform="translate(40,251.5065594583157)">800</text>
+    <text y="0.32em" transform="translate(40,221.88319932289463)">1,000</text>
+    <text y="0.32em" transform="translate(40,192.25983918747355)">1,200</text>
+    <text y="0.32em" transform="translate(40,162.6364790520525)">1,400</text>
+    <text y="0.32em" transform="translate(40,133.0131189166314)">1,600</text>
+    <text y="0.32em" transform="translate(40,103.3897587812103)">1,800</text>
+    <text y="0.32em" transform="translate(40,73.76639864578925)">2,000</text>
+    <text y="0.32em" transform="translate(40,44.14303851036817)">2,200</text>
+  </g>
+  <g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
+    <text y="0.71em" transform="translate(40,20)">↑ Frequency</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(9.5,0)">
+    <path transform="translate(51,370)" d="M0,0L0,6"></path>
+    <path transform="translate(71,370)" d="M0,0L0,6"></path>
+    <path transform="translate(91,370)" d="M0,0L0,6"></path>
+    <path transform="translate(111,370)" d="M0,0L0,6"></path>
+    <path transform="translate(131,370)" d="M0,0L0,6"></path>
+    <path transform="translate(151,370)" d="M0,0L0,6"></path>
+    <path transform="translate(171,370)" d="M0,0L0,6"></path>
+    <path transform="translate(191,370)" d="M0,0L0,6"></path>
+    <path transform="translate(211,370)" d="M0,0L0,6"></path>
+    <path transform="translate(231,370)" d="M0,0L0,6"></path>
+    <path transform="translate(251,370)" d="M0,0L0,6"></path>
+    <path transform="translate(271,370)" d="M0,0L0,6"></path>
+    <path transform="translate(291,370)" d="M0,0L0,6"></path>
+    <path transform="translate(311,370)" d="M0,0L0,6"></path>
+    <path transform="translate(331,370)" d="M0,0L0,6"></path>
+    <path transform="translate(351,370)" d="M0,0L0,6"></path>
+    <path transform="translate(371,370)" d="M0,0L0,6"></path>
+    <path transform="translate(391,370)" d="M0,0L0,6"></path>
+    <path transform="translate(411,370)" d="M0,0L0,6"></path>
+    <path transform="translate(431,370)" d="M0,0L0,6"></path>
+    <path transform="translate(451,370)" d="M0,0L0,6"></path>
+    <path transform="translate(471,370)" d="M0,0L0,6"></path>
+    <path transform="translate(491,370)" d="M0,0L0,6"></path>
+    <path transform="translate(511,370)" d="M0,0L0,6"></path>
+    <path transform="translate(531,370)" d="M0,0L0,6"></path>
+    <path transform="translate(551,370)" d="M0,0L0,6"></path>
+    <path transform="translate(571,370)" d="M0,0L0,6"></path>
+    <path transform="translate(591,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" text-anchor="end" transform="translate(9.5,9.5)">
+    <text y="0.32em" transform="translate(51,370) rotate(-90)">aquatics</text>
+    <text y="0.32em" transform="translate(71,370) rotate(-90)">archery</text>
+    <text y="0.32em" transform="translate(91,370) rotate(-90)">athletics</text>
+    <text y="0.32em" transform="translate(111,370) rotate(-90)">badminton</text>
+    <text y="0.32em" transform="translate(131,370) rotate(-90)">basketball</text>
+    <text y="0.32em" transform="translate(151,370) rotate(-90)">boxing</text>
+    <text y="0.32em" transform="translate(171,370) rotate(-90)">canoe</text>
+    <text y="0.32em" transform="translate(191,370) rotate(-90)">cycling</text>
+    <text y="0.32em" transform="translate(211,370) rotate(-90)">equestrian</text>
+    <text y="0.32em" transform="translate(231,370) rotate(-90)">fencing</text>
+    <text y="0.32em" transform="translate(251,370) rotate(-90)">football</text>
+    <text y="0.32em" transform="translate(271,370) rotate(-90)">golf</text>
+    <text y="0.32em" transform="translate(291,370) rotate(-90)">gymnastics</text>
+    <text y="0.32em" transform="translate(311,370) rotate(-90)">handball</text>
+    <text y="0.32em" transform="translate(331,370) rotate(-90)">hockey</text>
+    <text y="0.32em" transform="translate(351,370) rotate(-90)">judo</text>
+    <text y="0.32em" transform="translate(371,370) rotate(-90)">modern pentathlon</text>
+    <text y="0.32em" transform="translate(391,370) rotate(-90)">rowing</text>
+    <text y="0.32em" transform="translate(411,370) rotate(-90)">rugby sevens</text>
+    <text y="0.32em" transform="translate(431,370) rotate(-90)">sailing</text>
+    <text y="0.32em" transform="translate(451,370) rotate(-90)">shooting</text>
+    <text y="0.32em" transform="translate(471,370) rotate(-90)">table tennis</text>
+    <text y="0.32em" transform="translate(491,370) rotate(-90)">taekwondo</text>
+    <text y="0.32em" transform="translate(511,370) rotate(-90)">tennis</text>
+    <text y="0.32em" transform="translate(531,370) rotate(-90)">triathlon</text>
+    <text y="0.32em" transform="translate(551,370) rotate(-90)">volleyball</text>
+    <text y="0.32em" transform="translate(571,370) rotate(-90)">weightlifting</text>
+    <text y="0.32em" transform="translate(591,370) rotate(-90)">wrestling</text>
+  </g>
+  <g aria-label="bar">
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-18" x="93.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M97.77824798984335,17.96318239524942L106.66525603046995,17.96318239524942L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L93.33474396953005,369L93.33474396953005,22.406686415562717L93.33474396953005,22.406686415562717L93.33474396953005,21.073635209468705L97.77824798984335,21.073635209468705Z" fill="url(#plot-waffle-18)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-19" x="233.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M246.66525603046995,329.0084638171803L246.66525603046995,329.0084638171803L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L233.33474396953005,369L233.33474396953005,333.4519678374936L242.22175201015665,333.4519678374936L242.22175201015665,330.78586542530564L246.66525603046995,330.78586542530564Z" fill="url(#plot-waffle-19)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-20" x="493.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M506.66525603046995,346.7824798984335L506.66525603046995,346.7824798984335L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L493.33474396953005,369L493.33474396953005,351.2259839187468L502.22175201015665,351.2259839187468L502.22175201015665,347.67118070249614L506.66525603046995,347.67118070249614Z" fill="url(#plot-waffle-20)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-21" x="193.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M202.22175201015665,289.0169276343606L206.66525603046995,289.0169276343606L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L193.33474396953005,369L193.33474396953005,293.4604316546739L197.77824798984335,293.4604316546739L197.77824798984335,291.2386796445173L202.22175201015665,291.2386796445173Z" fill="url(#plot-waffle-21)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-22" x="533.3347439695301">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M537.7782479898434,351.2259839187468L546.66525603047,351.2259839187468L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L533.3347439695301,369L533.3347439695301,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601Z" fill="url(#plot-waffle-22)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-23" x="553.3347439695301">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M557.7782479898434,311.2344477359271L566.66525603047,311.2344477359271L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L553.3347439695301,369L553.3347439695301,315.6779517562404L553.3347439695301,315.6779517562404L553.3347439695301,313.9005501481151L557.7782479898434,313.9005501481151Z" fill="url(#plot-waffle-23)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-24" x="53.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M66.66525603046995,151.26830300464837L66.66525603046995,151.26830300464837L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L53.33474396953005,369L53.33474396953005,155.71180702496167L62.22175201015665,155.71180702496167L62.22175201015665,153.49005501480502L66.66525603046995,153.49005501480502Z" fill="url(#plot-waffle-24)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-25" x="413.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L413.33474396953005,369L413.33474396953005,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867Z" fill="url(#plot-waffle-25)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-26" x="593.3347439695301">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M597.7782479898434,315.6779517562404L606.66525603047,315.6779517562404L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L593.3347439695301,369L593.3347439695301,320.1214557765537L593.3347439695301,320.1214557765537L593.3347439695301,318.78840457045976L597.7782479898434,318.78840457045976Z" fill="url(#plot-waffle-26)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-27" x="253.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M262.22175201015665,275.68641557342073L266.66525603046995,275.68641557342073L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L253.33474396953005,369L253.33474396953005,280.12991959373403L257.77824798984335,280.12991959373403L257.77824798984335,279.6855691917027L262.22175201015665,279.6855691917027Z" fill="url(#plot-waffle-27)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-28" x="453.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L453.33474396953005,369L453.33474396953005,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271Z" fill="url(#plot-waffle-28)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-29" x="153.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M162.22175201015665,324.564959796867L166.66525603046995,324.564959796867L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L153.33474396953005,369L153.33474396953005,329.0084638171803L157.77824798984335,329.0084638171803L157.77824798984335,326.34236140499235L162.22175201015665,326.34236140499235Z" fill="url(#plot-waffle-29)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-30" x="213.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M222.22175201015665,333.4519678374936L226.66525603046995,333.4519678374936L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L213.33474396953005,369L213.33474396953005,337.8954718578069L217.77824798984335,337.8954718578069L217.77824798984335,337.0067710537443L222.22175201015665,337.0067710537443Z" fill="url(#plot-waffle-30)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-31" x="393.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M406.66525603046995,284.57342361404733L406.66525603046995,284.57342361404733L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L393.33474396953005,369L393.33474396953005,289.0169276343606L402.22175201015665,289.0169276343606L402.22175201015665,285.9064748201413L406.66525603046995,285.9064748201413Z" fill="url(#plot-waffle-31)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-32" x="353.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M366.66525603046995,306.7909437156138L366.66525603046995,306.7909437156138L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L353.33474396953005,369L353.33474396953005,311.2344477359271L362.22175201015665,311.2344477359271L362.22175201015665,310.3457469318644L366.66525603046995,310.3457469318644Z" fill="url(#plot-waffle-32)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-33" x="313.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M326.66525603046995,311.2344477359271L326.66525603046995,311.2344477359271L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L313.33474396953005,369L313.33474396953005,315.6779517562404L322.22175201015665,315.6779517562404L322.22175201015665,314.34490055014646L326.66525603046995,314.34490055014646Z" fill="url(#plot-waffle-33)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-34" x="113.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M117.77824798984335,342.3389758781202L126.66525603046995,342.3389758781202L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L113.33474396953005,369L113.33474396953005,346.7824798984335L113.33474396953005,346.7824798984335L113.33474396953005,345.89377909437087L117.77824798984335,345.89377909437087Z" fill="url(#plot-waffle-34)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-35" x="333.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M342.22175201015665,302.3474396953005L346.66525603046995,302.3474396953005L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L333.33474396953005,369L333.33474396953005,306.7909437156138L337.77824798984335,306.7909437156138L337.77824798984335,305.9022429115511L342.22175201015665,305.9022429115511Z" fill="url(#plot-waffle-35)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-36" x="373.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M382.22175201015665,355.6694879390601L386.66525603046995,355.6694879390601L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L373.33474396953005,369L373.33474396953005,360.1129919593734L377.77824798984335,360.1129919593734L377.77824798984335,359.22429115531077L382.22175201015665,359.22429115531077Z" fill="url(#plot-waffle-36)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-37" x="473.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M477.77824798984335,342.3389758781202L486.66525603046995,342.3389758781202L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L473.33474396953005,369L473.33474396953005,346.7824798984335L473.33474396953005,346.7824798984335L473.33474396953005,345.89377909437087L477.77824798984335,345.89377909437087Z" fill="url(#plot-waffle-37)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-38" x="173.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M186.66525603046995,315.6779517562404L186.66525603046995,315.6779517562404L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L173.33474396953005,369L173.33474396953005,320.1214557765537L182.22175201015665,320.1214557765537L182.22175201015665,319.6771053745224L186.66525603046995,319.6771053745224Z" fill="url(#plot-waffle-38)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-39" x="133.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M142.22175201015665,324.564959796867L146.66525603046995,324.564959796867L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L133.33474396953005,369L133.33474396953005,329.0084638171803L137.77824798984335,329.0084638171803L137.77824798984335,325.45366060092965L142.22175201015665,325.45366060092965Z" fill="url(#plot-waffle-39)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-40" x="273.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L273.33474396953005,369L273.33474396953005,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468Z" fill="url(#plot-waffle-40)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-41" x="73.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M86.66525603046995,346.7824798984335L86.66525603046995,346.7824798984335L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L73.33474396953005,369L73.33474396953005,351.2259839187468L82.22175201015665,351.2259839187468L82.22175201015665,347.67118070249614L86.66525603046995,347.67118070249614Z" fill="url(#plot-waffle-41)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-42" x="573.3347439695301">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M582.2217520101567,329.0084638171803L586.66525603047,329.0084638171803L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L573.3347439695301,369L573.3347439695301,333.4519678374936L577.7782479898434,333.4519678374936L577.7782479898434,329.89716462124295L582.2217520101567,329.89716462124295Z" fill="url(#plot-waffle-42)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-43" x="433.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M437.77824798984335,311.2344477359271L446.66525603046995,311.2344477359271L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L433.33474396953005,369L433.33474396953005,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404Z" fill="url(#plot-waffle-43)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-44" x="513.3347439695301">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M522.2217520101567,337.8954718578069L526.66525603047,337.8954718578069L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L513.3347439695301,369L513.3347439695301,342.3389758781202L517.7782479898434,342.3389758781202L517.7782479898434,339.67287346593224L522.2217520101567,339.67287346593224Z" fill="url(#plot-waffle-44)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-45" x="293.33474396953005">
+      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    </pattern>
+    <path d="M297.77824798984335,320.1214557765537L306.66525603046995,320.1214557765537L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L293.33474396953005,369L293.33474396953005,324.564959796867L293.33474396953005,324.564959796867L293.33474396953005,322.7875581887417L297.77824798984335,322.7875581887417Z" fill="url(#plot-waffle-45)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
+    <line x1="40" x2="620" y1="370" y2="370"></line>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
new file mode 100644
index 0000000000..96ec1e2f15
--- /dev/null
+++ b/test/output/waffleYStacked.html
@@ -0,0 +1,103 @@
+<figure class="plot-d6a7b5-figure" style="max-width: initial;">
+  <div class="plot-swatches plot-swatches-wrap">
+    <style>
+      :where(.plot-swatches) {
+        font-family: system-ui, sans-serif;
+        font-size: 10px;
+        margin-bottom: 0.5em;
+      }
+
+      :where(.plot-swatch > svg) {
+        margin-right: 0.5em;
+        overflow: visible;
+      }
+
+      :where(.plot-swatches-wrap) {
+        display: flex;
+        align-items: center;
+        min-height: 33px;
+        flex-wrap: wrap;
+      }
+
+      :where(.plot-swatches-wrap .plot-swatch) {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 1em;
+      }
+    </style><span class="plot-swatch"><svg width="15" height="15" fill="rgb(110, 64, 170)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>Infants &lt;1</span><span class="plot-swatch"><svg width="15" height="15" fill="rgb(65, 125, 224)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>Children &lt;11</span><span class="plot-swatch"><svg width="15" height="15" fill="rgb(26, 199, 194)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>Teens 12-17</span><span class="plot-swatch"><svg width="15" height="15" fill="rgb(64, 243, 115)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>Adults 18+</span><span class="plot-swatch"><svg width="15" height="15" fill="rgb(175, 240, 91)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>Elderly 65+</span>
+  </div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+      :where(.plot) {
+        --plot-background: white;
+        display: block;
+        height: auto;
+        height: intrinsic;
+        max-width: 100%;
+      }
+
+      :where(.plot text),
+      :where(.plot tspan) {
+        white-space: pre;
+      }
+    </style>
+    <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+      <path transform="translate(40,380)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,340.7975520249154)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,301.59510404983064)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,262.392656074746)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,223.1902080996613)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,183.98776012457665)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,144.78531214949197)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,105.5828641744073)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,66.38041619932265)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,27.177968224238)" d="M0,0L-6,0"></path>
+    </g>
+    <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+      <text y="0.32em" transform="translate(40,380)">0</text>
+      <text y="0.32em" transform="translate(40,340.7975520249154)">100</text>
+      <text y="0.32em" transform="translate(40,301.59510404983064)">200</text>
+      <text y="0.32em" transform="translate(40,262.392656074746)">300</text>
+      <text y="0.32em" transform="translate(40,223.1902080996613)">400</text>
+      <text y="0.32em" transform="translate(40,183.98776012457665)">500</text>
+      <text y="0.32em" transform="translate(40,144.78531214949197)">600</text>
+      <text y="0.32em" transform="translate(40,105.5828641744073)">700</text>
+      <text y="0.32em" transform="translate(40,66.38041619932265)">800</text>
+      <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
+    </g>
+    <g aria-label="bar">
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-46" x="41.36538314949354">
+        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(110, 64, 170)"></rect>
+      </pattern>
+      <path d="M515.3229791682475,302.5552264485881L637.6346168505065,302.5552264485881L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L41.36538314949354,379L41.36538314949354,317.84418115887047L500.034024457965,317.84418115887047L500.034024457965,307.60058150298147L515.3229791682475,307.60058150298147Z" fill="url(#plot-waffle-46)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-47" x="41.36538314949354">
+        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(65, 125, 224)"></rect>
+      </pattern>
+      <path d="M87.23224728034069,195.5325434766114L637.6346168505065,195.5325434766114L637.6346168505065,302.5552264485881L515.3229791682475,302.5552264485881L515.3229791682475,307.60058150298147L500.034024457965,307.60058150298147L500.034024457965,317.84418115887047L41.36538314949354,317.84418115887047L41.36538314949354,210.8214981868938L71.9432925700583,210.8214981868938L71.9432925700583,200.8836776252106L87.23224728034069,200.8836776252106Z" fill="url(#plot-waffle-47)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-48" x="41.36538314949354">
+        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(26, 199, 194)"></rect>
+      </pattern>
+      <path d="M545.9008885888122,103.79881521491711L637.6346168505065,103.79881521491711L637.6346168505065,195.5325434766114L87.23224728034069,195.5325434766114L87.23224728034069,200.8836776252106L71.9432925700583,200.8836776252106L71.9432925700583,210.8214981868938L41.36538314949354,210.8214981868938L41.36538314949354,119.0877699251995L530.6119338785297,119.0877699251995L530.6119338785297,116.18286853024676L545.9008885888122,116.18286853024676Z" fill="url(#plot-waffle-48)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-49" x="41.36538314949354">
+        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(64, 243, 115)"></rect>
+      </pattern>
+      <path d="M438.8782056168355,57.931951084069965L637.6346168505065,57.931951084069965L637.6346168505065,103.79881521491711L545.9008885888122,103.79881521491711L545.9008885888122,116.18286853024676L530.6119338785297,116.18286853024676L530.6119338785297,119.0877699251995L41.36538314949354,119.0877699251995L41.36538314949354,73.22090579435235L423.5892509065531,73.22090579435235L423.5892509065531,61.75418976164053L438.8782056168355,61.75418976164053Z" fill="url(#plot-waffle-49)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-50" x="41.36538314949354">
+        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(175, 240, 91)"></rect>
+      </pattern>
+      <path d="M316.5665679345764,12.065086953222817L637.6346168505065,12.065086953222817L637.6346168505065,57.931951084069965L438.8782056168355,57.931951084069965L438.8782056168355,61.75418976164053L423.5892509065531,61.75418976164053L423.5892509065531,73.22090579435235L41.36538314949354,73.22090579435235L41.36538314949354,27.3540416635052L301.27761322429404,27.3540416635052L301.27761322429404,22.6144657033185L316.5665679345764,22.6144657033185Z" fill="url(#plot-waffle-50)"></path>
+    </g>
+    <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
+      <line x1="40" x2="639" y1="380" y2="380"></line>
+    </g>
+  </svg>
+</figure>
\ No newline at end of file
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index b7674fafb7..9e3c158ecb 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -1,22 +1,48 @@
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 
-export function waffleY() {
-  const data = d3.csvParse(
-    `group,label,freq
+const demographics = d3.csvParse(
+  `group,label,freq
 Infants <1,0-1,16467
 Children <11,1-11,30098
 Teens 12-17,12-17,20354
 Adults 18+,18+,12456
 Elderly 65+,65+,12456`,
-    d3.autoType
-  );
+  d3.autoType
+);
+
+export function waffleShorthand() {
+  return Plot.waffleY([4, 9, 24, 46, 66, 7]).plot();
+}
+
+export function waffleShorthandNegative() {
+  return Plot.waffleY([-4, -9, -24, -46, -66, -7]).plot({x: {axis: "top"}});
+}
+
+export function waffleY() {
   return Plot.plot({
     x: {label: null},
     color: {scheme: "cool"},
     marks: [
-      Plot.waffleY(data, {x: "group", fill: "group", y: (d) => d.freq / 100, sort: {x: null, color: null}}),
+      Plot.waffleY(demographics, {x: "group", fill: "group", y: (d) => d.freq / 100, sort: {x: null, color: null}}),
       Plot.ruleY([0])
     ]
   });
 }
+
+export function waffleYStacked() {
+  return Plot.plot({
+    x: {label: null},
+    color: {scheme: "cool", legend: true},
+    marks: [Plot.waffleY(demographics, {fill: "group", y: (d) => d.freq / 100, sort: {color: null}}), Plot.ruleY([0])]
+  });
+}
+
+export async function waffleYGrouped() {
+  const athletes = await d3.csv<any>("data/athletes.csv", d3.autoType);
+  return Plot.plot({
+    marginBottom: 100,
+    x: {tickRotate: -90, label: null},
+    marks: [Plot.waffleY(athletes, Plot.groupX({y: "count"}, {x: "sport", unit: 10})), Plot.ruleY([0])]
+  });
+}

From 750a3a3ed1bf0fb1cc245f7d1c1c1de34b8bb1ba Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 15:08:35 -0400
Subject: [PATCH 08/22] lazy clone waffleX

---
 src/index.js                            |   2 +-
 src/marks/waffle.d.ts                   |  55 ++++++++++--
 src/marks/waffle.js                     |  93 ++++++++++++++++++--
 test/output/waffleShorthand.svg         |  24 ++---
 test/output/waffleShorthandNegative.svg |  24 ++---
 test/output/waffleX.svg                 |  73 +++++++++++++++
 test/output/waffleXStacked.svg          |  65 ++++++++++++++
 test/output/waffleY.svg                 |  20 ++---
 test/output/waffleYGrouped.svg          | 112 ++++++++++++------------
 test/output/waffleYStacked.html         |  20 ++---
 test/plots/waffle.ts                    |  21 +++++
 11 files changed, 396 insertions(+), 113 deletions(-)
 create mode 100644 test/output/waffleX.svg
 create mode 100644 test/output/waffleXStacked.svg

diff --git a/src/index.js b/src/index.js
index 47f610834b..a95fdbc035 100644
--- a/src/index.js
+++ b/src/index.js
@@ -38,7 +38,7 @@ export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
 export {Tip, tip} from "./marks/tip.js";
 export {tree, cluster} from "./marks/tree.js";
 export {Vector, vector, vectorX, vectorY, spike} from "./marks/vector.js";
-export {waffleY} from "./marks/waffle.js";
+export {WaffleX, WaffleY, waffleX, waffleY} from "./marks/waffle.js";
 export {valueof, column, identity, indexOf} from "./options.js";
 export {filter, reverse, sort, shuffle, basic as transform, initializer} from "./transforms/basic.js";
 export {bin, binX, binY} from "./transforms/bin.js";
diff --git a/src/marks/waffle.d.ts b/src/marks/waffle.d.ts
index e8696574e3..e6fa8d1718 100644
--- a/src/marks/waffle.d.ts
+++ b/src/marks/waffle.d.ts
@@ -1,18 +1,24 @@
 import type {Data, RenderableMark} from "../mark.js";
-import type {BarYOptions} from "./bar.js";
+import type {BarXOptions, BarYOptions} from "./bar.js";
 
-/** Options for the waffleY mark. */
-export interface WaffleYOptions extends BarYOptions {
+/** Options for the waffleX and waffleY mark. */
+interface WaffleOptions {
   /** The quantity each cell represents; defaults to 1. */
   unit?: number;
   /** The gap in pixels between cells; defaults to 1. */
   gap?: number;
 }
 
+/** Options for the waffleX mark. */
+export interface WaffleXOptions extends BarXOptions, WaffleOptions {}
+
+/** Options for the waffleY mark. */
+export interface WaffleYOptions extends BarYOptions, WaffleOptions {}
+
 /**
  * Returns a new vertical waffle mark for the given *data* and *options*; the
- * required *y* values should be quantitative or temporal, and the optional *x*
- * values should be ordinal. For example, for a vertical waffle chart of Olympic
+ * required *y* values should be quantitative, and the optional *x* values
+ * should be ordinal. For example, for a vertical waffle chart of Olympic
  * athletes by sport:
  *
  * ```js
@@ -30,7 +36,8 @@ export interface WaffleYOptions extends BarYOptions {
  * The optional **x** ordinal channel specifies the horizontal position; it is
  * typically bound to the *x* scale, which must be a *band* scale. If the **x**
  * channel is not specified, the waffle will span the horizontal extent of the
- * plot’s frame.
+ * plot’s frame. Because a waffle represents a discrete number of square cells,
+ * it may not use all of the available bandwidth.
  *
  * If *options* is undefined, then **x** defaults to the zero-based index of
  * *data* [0, 1, 2, …], allowing a quick waffle chart from an array of numbers:
@@ -41,5 +48,41 @@ export interface WaffleYOptions extends BarYOptions {
  */
 export function waffleY(data?: Data, options?: WaffleYOptions): WaffleY;
 
+/**
+ * Returns a new horizonta waffle mark for the given *data* and *options*; the
+ * required *x* values should be quantitative, and the optional *y* values
+ * should be ordinal. For example, for a horizontal waffle chart of Olympic
+ * athletes by sport:
+ *
+ * ```js
+ * Plot.waffleX(olympians, Plot.groupY({x: "count"}, {y: "sport"}))
+ * ```
+ *
+ * If neither **x1** nor **x2** nor **interval** is specified, an implicit
+ * stackX transform is applied and **x** defaults to the identity function,
+ * assuming that *data* = [*x₀*, *x₁*, *x₂*, …]. Otherwise if an **interval** is
+ * specified, then **x1** and **x2** are derived from **x**, representing the
+ * lower and upper bound of the containing interval, respectively. Otherwise, if
+ * only one of **x1** or **x2** is specified, the other defaults to **x**, which
+ * defaults to zero.
+ *
+ * The optional **y** ordinal channel specifies the vertical position; it is
+ * typically bound to the *y* scale, which must be a *band* scale. If the **y**
+ * channel is not specified, the waffle will span the vertical extent of the
+ * plot’s frame. Because a waffle represents a discrete number of square cells,
+ * it may not use all of the available bandwidth.
+ *
+ * If *options* is undefined, then **y** defaults to the zero-based index of
+ * *data* [0, 1, 2, …], allowing a quick waffle chart from an array of numbers:
+ *
+ * ```js
+ * Plot.waffleX([4, 9, 24, 46, 66, 7])
+ * ```
+ */
+export function waffleX(data?: Data, options?: WaffleXOptions): WaffleX;
+
+/** The waffleX mark. */
+export class WaffleX extends RenderableMark {}
+
 /** The waffleY mark. */
 export class WaffleY extends RenderableMark {}
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index e6b71f2833..405b456060 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -1,11 +1,87 @@
 import {namespaces} from "d3";
 import {hasXY, identity, indexOf} from "../options.js";
-import {maybeIdentityY} from "../transforms/identity.js";
-import {maybeIntervalY} from "../transforms/interval.js";
-import {maybeStackY} from "../transforms/stack.js";
-import {BarY} from "./bar.js";
+import {getClipId} from "../style.js";
+import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
+import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
+import {maybeStackX, maybeStackY} from "../transforms/stack.js";
+import {BarX, BarY} from "./bar.js";
 
-let nextWaffleId = 0;
+export class WaffleX extends BarX {
+  constructor(data, {unit = 1, gap = 1, ...options} = {}) {
+    super(data, {...options, stroke: "none"});
+    this.unit = Math.max(0, unit);
+    this.gap = +gap;
+  }
+  render(index, scales, channels, dimensions, context) {
+    const {unit, gap} = this;
+    const {document} = context;
+    const g = super.render(index, scales, channels, dimensions, context);
+
+    // We might not use all the available bandwidth if the cells don’t fit evenly.
+    const bandwidth = this._height(scales, channels, dimensions);
+
+    // The length of a unit along x in pixels.
+    const scale = Math.abs(scales.x(0) - scales.x(unit));
+
+    // The number of cells on each row of the waffle.
+    const columns = Math.floor(Math.sqrt(bandwidth / scale));
+
+    // The outer size of each square cell, in pixels, including the gap.
+    const cellsize = scale * columns;
+
+    // TODO rx, ry, insets?
+    const X1 = channels.channels.x1.value;
+    const X2 = channels.channels.x2.value;
+    const ww = columns * cellsize;
+    const wy = (bandwidth - ww) / 2;
+    let rect = g.firstElementChild;
+    const x0 = scales.x(0) - gap;
+    const basePattern = document.createElementNS(namespaces.svg, "pattern");
+    basePattern.setAttribute("width", cellsize);
+    basePattern.setAttribute("height", cellsize);
+    basePattern.setAttribute("patternUnits", "userSpaceOnUse");
+    basePattern.setAttribute("x", x0);
+    const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
+    basePatternRect.setAttribute("x", gap / 2);
+    basePatternRect.setAttribute("y", gap / 2);
+    basePatternRect.setAttribute("width", cellsize - gap);
+    basePatternRect.setAttribute("height", cellsize - gap);
+    for (const i of index) {
+      const y0 = +rect.getAttribute("y") + wy;
+      const fill = rect.getAttribute("fill");
+      const patternId = getClipId(); // TODO lazy
+      const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
+      const patternRect = pattern.firstChild;
+      pattern.setAttribute("id", patternId);
+      pattern.setAttribute("y", y0);
+      patternRect.setAttribute("fill", fill);
+      const path = document.createElementNS(namespaces.svg, "path");
+      for (const a of rect.attributes) {
+        switch (a.name) {
+          case "x":
+          case "y":
+          case "width":
+          case "height":
+          case "fill":
+            continue;
+        }
+        path.setAttribute(a.name, a.value);
+      }
+      path.setAttribute(
+        "d",
+        `M${wafflePoints(X1[i] / unit, X2[i] / unit, columns)
+          .map(([y, x]) => [x * cellsize + x0, y0 + y * cellsize])
+          .join("L")}Z`
+      );
+      path.setAttribute("fill", `url(#${patternId})`);
+      const nextRect = rect.nextElementSibling;
+      rect.replaceWith(path);
+      rect = nextRect;
+    }
+
+    return g;
+  }
+}
 
 export class WaffleY extends BarY {
   constructor(data, {unit = 1, gap = 1, ...options} = {}) {
@@ -50,7 +126,7 @@ export class WaffleY extends BarY {
     for (const i of index) {
       const x0 = +rect.getAttribute("x") + wx;
       const fill = rect.getAttribute("fill");
-      const patternId = `plot-waffle-${++nextWaffleId}`;
+      const patternId = getClipId(); // TODO lazy
       const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
       const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
@@ -149,6 +225,11 @@ function floor(x) {
   return (x < 0 ? Math.ceil : Math.floor)(x);
 }
 
+export function waffleX(data, options = {}) {
+  if (!hasXY(options)) options = {...options, y: indexOf, x2: identity};
+  return new WaffleX(data, maybeStackX(maybeIntervalX(maybeIdentityX(options))));
+}
+
 export function waffleY(data, options = {}) {
   if (!hasXY(options)) options = {...options, x: indexOf, y2: identity};
   return new WaffleY(data, maybeStackY(maybeIntervalY(maybeIdentityY(options))));
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index 556f6116be..70c894cb24 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -62,29 +62,29 @@
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-1" x="50.57575757575751">
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="50.57575757575751">
       <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
     </pattern>
-    <path d="M135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L50.57575757575751,369L50.57575757575751,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875Z" fill="url(#plot-waffle-1)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-2" x="145.5757575757575">
+    <path d="M135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L50.57575757575751,369L50.57575757575751,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875Z" fill="url(#plot-clip-299)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="145.5757575757575">
       <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
     </pattern>
-    <path d="M209.21212121212125,305.36363636363626L230.4242424242425,305.36363636363626L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L145.5757575757575,369L145.5757575757575,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575Z" fill="url(#plot-waffle-2)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-3" x="240.5757575757575">
+    <path d="M209.21212121212125,305.36363636363626L230.4242424242425,305.36363636363626L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L145.5757575757575,369L145.5757575757575,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575Z" fill="url(#plot-clip-300)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="240.5757575757575">
       <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
     </pattern>
-    <path d="M325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L240.5757575757575,369L240.5757575757575,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252Z" fill="url(#plot-waffle-3)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-4" x="335.5757575757575">
+    <path d="M325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L240.5757575757575,369L240.5757575757575,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252Z" fill="url(#plot-clip-301)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="335.5757575757575">
       <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
     </pattern>
-    <path d="M378,114.45454545454504L420.4242424242425,114.45454545454504L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L335.5757575757575,369L335.5757575757575,135.6666666666663L378,135.6666666666663L378,135.6666666666663L378,135.6666666666663Z" fill="url(#plot-waffle-4)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-5" x="430.5757575757575">
+    <path d="M378,114.45454545454504L420.4242424242425,114.45454545454504L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L335.5757575757575,369L335.5757575757575,135.6666666666663L378,135.6666666666663L378,135.6666666666663L378,135.6666666666663Z" fill="url(#plot-clip-302)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="430.5757575757575">
       <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
     </pattern>
-    <path d="M473,8.393939393938808L515.4242424242425,8.393939393938808L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L430.5757575757575,369L430.5757575757575,29.606060606060055L473,29.606060606060055L473,29.606060606060055L473,29.606060606060055Z" fill="url(#plot-waffle-5)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-6" x="525.5757575757575">
+    <path d="M473,8.393939393938808L515.4242424242425,8.393939393938808L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L430.5757575757575,369L430.5757575757575,29.606060606060055L473,29.606060606060055L473,29.606060606060055L473,29.606060606060055Z" fill="url(#plot-clip-303)"></path>
+    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="525.5757575757575">
       <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
     </pattern>
-    <path d="M546.7878787878788,326.5757575757575L610.4242424242425,326.5757575757575L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L525.5757575757575,369L525.5757575757575,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875Z" fill="url(#plot-waffle-6)"></path>
+    <path d="M546.7878787878788,326.5757575757575L610.4242424242425,326.5757575757575L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L525.5757575757575,369L525.5757575757575,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875Z" fill="url(#plot-clip-304)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
index f7a12fafbb..322f537255 100644
--- a/test/output/waffleShorthandNegative.svg
+++ b/test/output/waffleShorthandNegative.svg
@@ -62,29 +62,29 @@
     <text transform="translate(525,30)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-7" x="50.57575757575762">
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-1" x="50.57575757575762">
       <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
     </pattern>
-    <path d="M135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L50.57575757575762,29L50.57575757575762,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119Z" fill="url(#plot-waffle-7)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-8" x="145.57575757575762">
+    <path d="M135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L50.57575757575762,29L50.57575757575762,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119Z" fill="url(#plot-clip-305)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-2" x="145.57575757575762">
       <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
     </pattern>
-    <path d="M209.2121212121212,92.63636363636357L230.42424242424238,92.63636363636357L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L145.57575757575762,29L145.57575757575762,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238Z" fill="url(#plot-waffle-8)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-9" x="240.57575757575762">
+    <path d="M209.2121212121212,92.63636363636357L230.42424242424238,92.63636363636357L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L145.57575757575762,29L145.57575757575762,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238Z" fill="url(#plot-clip-306)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-3" x="240.57575757575762">
       <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
     </pattern>
-    <path d="M325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L240.57575757575762,29L240.57575757575762,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714Z" fill="url(#plot-waffle-9)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-10" x="335.5757575757576">
+    <path d="M325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L240.57575757575762,29L240.57575757575762,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714Z" fill="url(#plot-clip-307)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-4" x="335.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
     </pattern>
-    <path d="M378,283.5454545454543L420.4242424242424,283.5454545454543L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L335.5757575757576,29L335.5757575757576,262.3333333333331L378,262.3333333333331L378,262.3333333333331L378,262.3333333333331Z" fill="url(#plot-waffle-10)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-11" x="430.5757575757576">
+    <path d="M378,283.5454545454543L420.4242424242424,283.5454545454543L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L335.5757575757576,29L335.5757575757576,262.3333333333331L378,262.3333333333331L378,262.3333333333331L378,262.3333333333331Z" fill="url(#plot-clip-308)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-5" x="430.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
     </pattern>
-    <path d="M473,389.6060606060602L515.4242424242424,389.6060606060602L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L430.5757575757576,29L430.5757575757576,368.39393939393904L473,368.39393939393904L473,368.39393939393904L473,368.39393939393904Z" fill="url(#plot-waffle-11)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-waffle-12" x="525.5757575757576">
+    <path d="M473,389.6060606060602L515.4242424242424,389.6060606060602L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L430.5757575757576,29L430.5757575757576,368.39393939393904L473,368.39393939393904L473,368.39393939393904L473,368.39393939393904Z" fill="url(#plot-clip-309)"></path>
+    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-6" x="525.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
     </pattern>
-    <path d="M546.7878787878788,71.42424242424238L610.4242424242424,71.42424242424238L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L525.5757575757576,29L525.5757575757576,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119Z" fill="url(#plot-waffle-12)"></path>
+    <path d="M546.7878787878788,71.42424242424238L610.4242424242424,71.42424242424238L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L525.5757575757576,29L525.5757575757576,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119Z" fill="url(#plot-clip-310)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
new file mode 100644
index 0000000000..7b73e70c9a
--- /dev/null
+++ b/test/output/waffleX.svg
@@ -0,0 +1,73 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="160" viewBox="0 0 640 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,10)">
+    <path transform="translate(80,34)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,55)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,76)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,97)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,118)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" transform="translate(-8.5,10)">
+    <text y="0.32em" transform="translate(80,34)">Infants &lt;1</text>
+    <text y="0.32em" transform="translate(80,55)">Children &lt;11</text>
+    <text y="0.32em" transform="translate(80,76)">Teens 12-17</text>
+    <text y="0.32em" transform="translate(80,97)">Adults 18+</text>
+    <text y="0.32em" transform="translate(80,118)">Elderly 65+</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,1)">
+    <path transform="translate(80,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(169.70695727290848,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(259.413914545817,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(349.1208718187255,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(438.827829091634,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(528.5347863645425,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(618.241743637451,30)" d="M0,0L0,-6"></path>
+  </g>
+  <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)">
+    <text transform="translate(80,30)">0</text>
+    <text transform="translate(169.70695727290848,30)">50</text>
+    <text transform="translate(259.413914545817,30)">100</text>
+    <text transform="translate(349.1208718187255,30)">150</text>
+    <text transform="translate(438.827829091634,30)">200</text>
+    <text transform="translate(528.5347863645425,30)">250</text>
+    <text transform="translate(618.241743637451,30)">300</text>
+  </g>
+  <g aria-label="bar">
+    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-1" y="35.42637384543821">
+      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(110, 64, 170)"></rect>
+    </pattern>
+    <path d="M375.03295900059885,40.80879128181274L375.03295900059885,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,35.42637384543821L369.65054156422434,35.42637384543821L369.65054156422434,35.42637384543821L373.2567612465952,35.42637384543821L373.2567612465952,40.80879128181274Z" fill="url(#plot-clip-311)"></path>
+    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-2" y="56.42637384543821">
+      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(65, 125, 224)"></rect>
+    </pattern>
+    <path d="M622.6241610738269,72.5736261545618L622.6241610738269,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,56.42637384543821L617.2417436374524,56.42637384543821L617.2417436374524,67.19120871818726L622.5165127250996,67.19120871818726L622.5165127250996,72.5736261545618Z" fill="url(#plot-clip-312)"></path>
+    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-3" y="77.4263738454382">
+      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(26, 199, 194)"></rect>
+    </pattern>
+    <path d="M445.00438567346765,82.80879128181273L445.00438567346765,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,77.4263738454382L439.62196823709314,77.4263738454382L439.62196823709314,77.4263738454382L442.52847365273533,77.4263738454382L442.52847365273533,82.80879128181273Z" fill="url(#plot-clip-313)"></path>
+    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-4" y="98.4263738454382">
+      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(64, 243, 115)"></rect>
+    </pattern>
+    <path d="M305.06153232773,109.19120871818726L305.06153232773,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,98.4263738454382L299.6791148913555,98.4263738454382L299.6791148913555,103.80879128181273L302.6932686557252,103.80879128181273L302.6932686557252,109.19120871818726Z" fill="url(#plot-clip-314)"></path>
+    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-5" y="119.4263738454382">
+      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(175, 240, 91)"></rect>
+    </pattern>
+    <path d="M305.06153232773,130.19120871818726L305.06153232773,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,119.4263738454382L299.6791148913555,119.4263738454382L299.6791148913555,124.80879128181273L302.6932686557252,124.80879128181273L302.6932686557252,130.19120871818726Z" fill="url(#plot-clip-315)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
+    <line x1="80" x2="80" y1="30" y2="140"></line>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
new file mode 100644
index 0000000000..6f890ee180
--- /dev/null
+++ b/test/output/waffleXStacked.svg
@@ -0,0 +1,65 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="240" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)">
+    <path transform="translate(20,210)" d="M0,0L0,6"></path>
+    <path transform="translate(85.33741329180778,210)" d="M0,0L0,6"></path>
+    <path transform="translate(150.67482658361556,210)" d="M0,0L0,6"></path>
+    <path transform="translate(216.01223987542335,210)" d="M0,0L0,6"></path>
+    <path transform="translate(281.3496531672311,210)" d="M0,0L0,6"></path>
+    <path transform="translate(346.6870664590389,210)" d="M0,0L0,6"></path>
+    <path transform="translate(412.0244797508467,210)" d="M0,0L0,6"></path>
+    <path transform="translate(477.3618930426545,210)" d="M0,0L0,6"></path>
+    <path transform="translate(542.6993063344622,210)" d="M0,0L0,6"></path>
+    <path transform="translate(608.03671962627,210)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
+    <text y="0.71em" transform="translate(20,210)">0</text>
+    <text y="0.71em" transform="translate(85.33741329180778,210)">100</text>
+    <text y="0.71em" transform="translate(150.67482658361556,210)">200</text>
+    <text y="0.71em" transform="translate(216.01223987542335,210)">300</text>
+    <text y="0.71em" transform="translate(281.3496531672311,210)">400</text>
+    <text y="0.71em" transform="translate(346.6870664590389,210)">500</text>
+    <text y="0.71em" transform="translate(412.0244797508467,210)">600</text>
+    <text y="0.71em" transform="translate(477.3618930426545,210)">700</text>
+    <text y="0.71em" transform="translate(542.6993063344622,210)">800</text>
+    <text y="0.71em" transform="translate(608.03671962627,210)">900</text>
+  </g>
+  <g aria-label="bar">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-1" y="10.587437793337756">
+      <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(110, 64, 170)"></rect>
+    </pattern>
+    <path d="M130.07360259607321,77.2315993509817L130.07360259607321,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,10.587437793337756L118.9662423364659,10.587437793337756L118.9662423364659,66.12423909137436L126.40817371040266,66.12423909137436L126.40817371040266,77.2315993509817Z" fill="url(#plot-clip-316)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-2" y="10.587437793337756">
+      <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(65, 125, 224)"></rect>
+    </pattern>
+    <path d="M330.00608726900504,132.7684006490183L330.00608726900504,199.41256220666224L130.07360259607321,199.41256220666224L130.07360259607321,77.2315993509817L126.40817371040266,77.2315993509817L126.40817371040266,66.12423909137436L118.9662423364659,66.12423909137436L118.9662423364659,10.587437793337756L318.8987270093977,10.587437793337756L318.8987270093977,121.66104038941097L326.1185111781422,121.66104038941097L326.1185111781422,132.7684006490183Z" fill="url(#plot-clip-317)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-3" y="10.587437793337756">
+      <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(26, 199, 194)"></rect>
+    </pattern>
+    <path d="M463.29441038429286,132.7684006490183L463.29441038429286,199.41256220666224L330.00608726900504,199.41256220666224L330.00608726900504,132.7684006490183L326.1185111781422,132.7684006490183L326.1185111781422,121.66104038941097L318.8987270093977,121.66104038941097L318.8987270093977,10.587437793337756L452.1870501246856,10.587437793337756L452.1870501246856,121.66104038941097L454.2974485740103,121.66104038941097L454.2974485740103,132.7684006490183Z" fill="url(#plot-clip-318)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-4" y="10.587437793337756">
+      <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(64, 243, 115)"></rect>
+    </pattern>
+    <path d="M541.0459322015441,77.2315993509817L541.0459322015441,199.41256220666224L463.29441038429286,199.41256220666224L463.29441038429286,132.7684006490183L454.2974485740103,132.7684006490183L454.2974485740103,121.66104038941097L452.1870501246856,121.66104038941097L452.1870501246856,10.587437793337756L529.9385719419367,10.587437793337756L529.9385719419367,66.12423909137436L538.2690921366423,66.12423909137436L538.2690921366423,77.2315993509817Z" fill="url(#plot-clip-319)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-5" y="10.587437793337756">
+      <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(175, 240, 91)"></rect>
+    </pattern>
+    <path d="M629.9048142784027,199.41256220666224L629.9048142784027,199.41256220666224L541.0459322015441,199.41256220666224L541.0459322015441,77.2315993509817L538.2690921366423,77.2315993509817L538.2690921366423,66.12423909137436L529.9385719419367,66.12423909137436L529.9385719419367,10.587437793337756L618.7974540187954,10.587437793337756L618.7974540187954,188.3052019470549L622.240735699273,188.3052019470549L622.240735699273,199.41256220666224Z" fill="url(#plot-clip-320)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
+    <line x1="20" x2="20" y1="0" y2="210"></line>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index 97172b8ec0..059936d282 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -64,26 +64,26 @@
     <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
   </g>
   <g aria-label="bar">
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-13" x="56.90384743172373">
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="56.90384743172373">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M130.16452920459793,170.14957804505576L151.09615256827627,170.14957804505576L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L56.90384743172373,369L56.90384743172373,180.61538972689493L119.69871752275876,180.61538972689493L119.69871752275876,173.60329590006282L130.16452920459793,173.60329590006282Z" fill="url(#plot-waffle-13)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-14" x="169.90384743172373">
+    <path d="M130.16452920459793,170.14957804505576L151.09615256827627,170.14957804505576L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L56.90384743172373,369L56.90384743172373,180.61538972689493L119.69871752275876,180.61538972689493L119.69871752275876,173.60329590006282L130.16452920459793,173.60329590006282Z" fill="url(#plot-clip-321)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="169.90384743172373">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M232.69871752275876,13.162402817468205L264.09615256827624,13.162402817468205L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L169.90384743172373,369L169.90384743172373,23.628214499307376L222.23290584091959,23.628214499307376L222.23290584091959,13.371719051104776L232.69871752275876,13.371719051104776Z" fill="url(#plot-waffle-14)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-15" x="282.90384743172376">
+    <path d="M232.69871752275876,13.162402817468205L264.09615256827624,13.162402817468205L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L169.90384743172373,369L169.90384743172373,23.628214499307376L222.23290584091959,23.628214499307376L222.23290584091959,13.371719051104776L232.69871752275876,13.371719051104776Z" fill="url(#plot-clip-322)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="282.90384743172376">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M324.76709415908044,128.28633131769908L377.0961525682763,128.28633131769908L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L282.90384743172376,369L282.90384743172376,138.75214299953825L314.3012824772413,138.75214299953825L314.3012824772413,133.10060469134518L324.76709415908044,133.10060469134518Z" fill="url(#plot-waffle-15)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-16" x="395.90384743172376">
+    <path d="M324.76709415908044,128.28633131769908L377.0961525682763,128.28633131769908L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L282.90384743172376,369L282.90384743172376,138.75214299953825L314.3012824772413,138.75214299953825L314.3012824772413,133.10060469134518L324.76709415908044,133.10060469134518Z" fill="url(#plot-clip-323)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="395.90384743172376">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M416.8354707954021,222.4786364542516L490.0961525682763,222.4786364542516L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L395.90384743172376,369L395.90384743172376,232.94444813609078L406.36965911356293,232.94444813609078L406.36965911356293,227.08359359426083L416.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-16)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-17" x="508.90384743172376">
+    <path d="M416.8354707954021,222.4786364542516L490.0961525682763,222.4786364542516L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L395.90384743172376,369L395.90384743172376,232.94444813609078L406.36965911356293,232.94444813609078L406.36965911356293,227.08359359426083L416.8354707954021,227.08359359426083Z" fill="url(#plot-clip-324)"></path>
+    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="508.90384743172376">
       <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M529.8354707954021,222.4786364542516L603.0961525682762,222.4786364542516L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L508.90384743172376,369L508.90384743172376,232.94444813609078L519.3696591135629,232.94444813609078L519.3696591135629,227.08359359426083L529.8354707954021,227.08359359426083Z" fill="url(#plot-waffle-17)"></path>
+    <path d="M529.8354707954021,222.4786364542516L603.0961525682762,222.4786364542516L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L508.90384743172376,369L508.90384743172376,232.94444813609078L519.3696591135629,232.94444813609078L519.3696591135629,227.08359359426083L529.8354707954021,227.08359359426083Z" fill="url(#plot-clip-325)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index cf07be9e0f..7cf9bd690d 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -105,118 +105,118 @@
     <text y="0.32em" transform="translate(591,370) rotate(-90)">wrestling</text>
   </g>
   <g aria-label="bar">
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-18" x="93.33474396953005">
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="93.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M97.77824798984335,17.96318239524942L106.66525603046995,17.96318239524942L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L93.33474396953005,369L93.33474396953005,22.406686415562717L93.33474396953005,22.406686415562717L93.33474396953005,21.073635209468705L97.77824798984335,21.073635209468705Z" fill="url(#plot-waffle-18)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-19" x="233.33474396953005">
+    <path d="M97.77824798984335,17.96318239524942L106.66525603046995,17.96318239524942L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L93.33474396953005,369L93.33474396953005,22.406686415562717L93.33474396953005,22.406686415562717L93.33474396953005,21.073635209468705L97.77824798984335,21.073635209468705Z" fill="url(#plot-clip-326)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="233.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M246.66525603046995,329.0084638171803L246.66525603046995,329.0084638171803L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L233.33474396953005,369L233.33474396953005,333.4519678374936L242.22175201015665,333.4519678374936L242.22175201015665,330.78586542530564L246.66525603046995,330.78586542530564Z" fill="url(#plot-waffle-19)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-20" x="493.33474396953005">
+    <path d="M246.66525603046995,329.0084638171803L246.66525603046995,329.0084638171803L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L233.33474396953005,369L233.33474396953005,333.4519678374936L242.22175201015665,333.4519678374936L242.22175201015665,330.78586542530564L246.66525603046995,330.78586542530564Z" fill="url(#plot-clip-327)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="493.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M506.66525603046995,346.7824798984335L506.66525603046995,346.7824798984335L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L493.33474396953005,369L493.33474396953005,351.2259839187468L502.22175201015665,351.2259839187468L502.22175201015665,347.67118070249614L506.66525603046995,347.67118070249614Z" fill="url(#plot-waffle-20)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-21" x="193.33474396953005">
+    <path d="M506.66525603046995,346.7824798984335L506.66525603046995,346.7824798984335L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L493.33474396953005,369L493.33474396953005,351.2259839187468L502.22175201015665,351.2259839187468L502.22175201015665,347.67118070249614L506.66525603046995,347.67118070249614Z" fill="url(#plot-clip-328)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="193.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M202.22175201015665,289.0169276343606L206.66525603046995,289.0169276343606L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L193.33474396953005,369L193.33474396953005,293.4604316546739L197.77824798984335,293.4604316546739L197.77824798984335,291.2386796445173L202.22175201015665,291.2386796445173Z" fill="url(#plot-waffle-21)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-22" x="533.3347439695301">
+    <path d="M202.22175201015665,289.0169276343606L206.66525603046995,289.0169276343606L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L193.33474396953005,369L193.33474396953005,293.4604316546739L197.77824798984335,293.4604316546739L197.77824798984335,291.2386796445173L202.22175201015665,291.2386796445173Z" fill="url(#plot-clip-329)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="533.3347439695301">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M537.7782479898434,351.2259839187468L546.66525603047,351.2259839187468L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L533.3347439695301,369L533.3347439695301,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601Z" fill="url(#plot-waffle-22)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-23" x="553.3347439695301">
+    <path d="M537.7782479898434,351.2259839187468L546.66525603047,351.2259839187468L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L533.3347439695301,369L533.3347439695301,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601Z" fill="url(#plot-clip-330)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="553.3347439695301">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M557.7782479898434,311.2344477359271L566.66525603047,311.2344477359271L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L553.3347439695301,369L553.3347439695301,315.6779517562404L553.3347439695301,315.6779517562404L553.3347439695301,313.9005501481151L557.7782479898434,313.9005501481151Z" fill="url(#plot-waffle-23)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-24" x="53.33474396953005">
+    <path d="M557.7782479898434,311.2344477359271L566.66525603047,311.2344477359271L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L553.3347439695301,369L553.3347439695301,315.6779517562404L553.3347439695301,315.6779517562404L553.3347439695301,313.9005501481151L557.7782479898434,313.9005501481151Z" fill="url(#plot-clip-331)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-7" x="53.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M66.66525603046995,151.26830300464837L66.66525603046995,151.26830300464837L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L53.33474396953005,369L53.33474396953005,155.71180702496167L62.22175201015665,155.71180702496167L62.22175201015665,153.49005501480502L66.66525603046995,153.49005501480502Z" fill="url(#plot-waffle-24)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-25" x="413.33474396953005">
+    <path d="M66.66525603046995,151.26830300464837L66.66525603046995,151.26830300464837L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L53.33474396953005,369L53.33474396953005,155.71180702496167L62.22175201015665,155.71180702496167L62.22175201015665,153.49005501480502L66.66525603046995,153.49005501480502Z" fill="url(#plot-clip-332)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-8" x="413.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L413.33474396953005,369L413.33474396953005,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867Z" fill="url(#plot-waffle-25)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-26" x="593.3347439695301">
+    <path d="M426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L413.33474396953005,369L413.33474396953005,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867Z" fill="url(#plot-clip-333)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-9" x="593.3347439695301">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M597.7782479898434,315.6779517562404L606.66525603047,315.6779517562404L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L593.3347439695301,369L593.3347439695301,320.1214557765537L593.3347439695301,320.1214557765537L593.3347439695301,318.78840457045976L597.7782479898434,318.78840457045976Z" fill="url(#plot-waffle-26)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-27" x="253.33474396953005">
+    <path d="M597.7782479898434,315.6779517562404L606.66525603047,315.6779517562404L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L593.3347439695301,369L593.3347439695301,320.1214557765537L593.3347439695301,320.1214557765537L593.3347439695301,318.78840457045976L597.7782479898434,318.78840457045976Z" fill="url(#plot-clip-334)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-10" x="253.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M262.22175201015665,275.68641557342073L266.66525603046995,275.68641557342073L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L253.33474396953005,369L253.33474396953005,280.12991959373403L257.77824798984335,280.12991959373403L257.77824798984335,279.6855691917027L262.22175201015665,279.6855691917027Z" fill="url(#plot-waffle-27)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-28" x="453.33474396953005">
+    <path d="M262.22175201015665,275.68641557342073L266.66525603046995,275.68641557342073L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L253.33474396953005,369L253.33474396953005,280.12991959373403L257.77824798984335,280.12991959373403L257.77824798984335,279.6855691917027L262.22175201015665,279.6855691917027Z" fill="url(#plot-clip-335)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-11" x="453.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L453.33474396953005,369L453.33474396953005,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271Z" fill="url(#plot-waffle-28)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-29" x="153.33474396953005">
+    <path d="M466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L453.33474396953005,369L453.33474396953005,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271Z" fill="url(#plot-clip-336)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-12" x="153.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M162.22175201015665,324.564959796867L166.66525603046995,324.564959796867L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L153.33474396953005,369L153.33474396953005,329.0084638171803L157.77824798984335,329.0084638171803L157.77824798984335,326.34236140499235L162.22175201015665,326.34236140499235Z" fill="url(#plot-waffle-29)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-30" x="213.33474396953005">
+    <path d="M162.22175201015665,324.564959796867L166.66525603046995,324.564959796867L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L153.33474396953005,369L153.33474396953005,329.0084638171803L157.77824798984335,329.0084638171803L157.77824798984335,326.34236140499235L162.22175201015665,326.34236140499235Z" fill="url(#plot-clip-337)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-13" x="213.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M222.22175201015665,333.4519678374936L226.66525603046995,333.4519678374936L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L213.33474396953005,369L213.33474396953005,337.8954718578069L217.77824798984335,337.8954718578069L217.77824798984335,337.0067710537443L222.22175201015665,337.0067710537443Z" fill="url(#plot-waffle-30)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-31" x="393.33474396953005">
+    <path d="M222.22175201015665,333.4519678374936L226.66525603046995,333.4519678374936L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L213.33474396953005,369L213.33474396953005,337.8954718578069L217.77824798984335,337.8954718578069L217.77824798984335,337.0067710537443L222.22175201015665,337.0067710537443Z" fill="url(#plot-clip-338)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-14" x="393.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M406.66525603046995,284.57342361404733L406.66525603046995,284.57342361404733L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L393.33474396953005,369L393.33474396953005,289.0169276343606L402.22175201015665,289.0169276343606L402.22175201015665,285.9064748201413L406.66525603046995,285.9064748201413Z" fill="url(#plot-waffle-31)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-32" x="353.33474396953005">
+    <path d="M406.66525603046995,284.57342361404733L406.66525603046995,284.57342361404733L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L393.33474396953005,369L393.33474396953005,289.0169276343606L402.22175201015665,289.0169276343606L402.22175201015665,285.9064748201413L406.66525603046995,285.9064748201413Z" fill="url(#plot-clip-339)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-15" x="353.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M366.66525603046995,306.7909437156138L366.66525603046995,306.7909437156138L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L353.33474396953005,369L353.33474396953005,311.2344477359271L362.22175201015665,311.2344477359271L362.22175201015665,310.3457469318644L366.66525603046995,310.3457469318644Z" fill="url(#plot-waffle-32)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-33" x="313.33474396953005">
+    <path d="M366.66525603046995,306.7909437156138L366.66525603046995,306.7909437156138L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L353.33474396953005,369L353.33474396953005,311.2344477359271L362.22175201015665,311.2344477359271L362.22175201015665,310.3457469318644L366.66525603046995,310.3457469318644Z" fill="url(#plot-clip-340)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-16" x="313.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M326.66525603046995,311.2344477359271L326.66525603046995,311.2344477359271L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L313.33474396953005,369L313.33474396953005,315.6779517562404L322.22175201015665,315.6779517562404L322.22175201015665,314.34490055014646L326.66525603046995,314.34490055014646Z" fill="url(#plot-waffle-33)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-34" x="113.33474396953005">
+    <path d="M326.66525603046995,311.2344477359271L326.66525603046995,311.2344477359271L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L313.33474396953005,369L313.33474396953005,315.6779517562404L322.22175201015665,315.6779517562404L322.22175201015665,314.34490055014646L326.66525603046995,314.34490055014646Z" fill="url(#plot-clip-341)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-17" x="113.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M117.77824798984335,342.3389758781202L126.66525603046995,342.3389758781202L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L113.33474396953005,369L113.33474396953005,346.7824798984335L113.33474396953005,346.7824798984335L113.33474396953005,345.89377909437087L117.77824798984335,345.89377909437087Z" fill="url(#plot-waffle-34)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-35" x="333.33474396953005">
+    <path d="M117.77824798984335,342.3389758781202L126.66525603046995,342.3389758781202L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L113.33474396953005,369L113.33474396953005,346.7824798984335L113.33474396953005,346.7824798984335L113.33474396953005,345.89377909437087L117.77824798984335,345.89377909437087Z" fill="url(#plot-clip-342)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-18" x="333.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M342.22175201015665,302.3474396953005L346.66525603046995,302.3474396953005L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L333.33474396953005,369L333.33474396953005,306.7909437156138L337.77824798984335,306.7909437156138L337.77824798984335,305.9022429115511L342.22175201015665,305.9022429115511Z" fill="url(#plot-waffle-35)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-36" x="373.33474396953005">
+    <path d="M342.22175201015665,302.3474396953005L346.66525603046995,302.3474396953005L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L333.33474396953005,369L333.33474396953005,306.7909437156138L337.77824798984335,306.7909437156138L337.77824798984335,305.9022429115511L342.22175201015665,305.9022429115511Z" fill="url(#plot-clip-343)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-19" x="373.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M382.22175201015665,355.6694879390601L386.66525603046995,355.6694879390601L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L373.33474396953005,369L373.33474396953005,360.1129919593734L377.77824798984335,360.1129919593734L377.77824798984335,359.22429115531077L382.22175201015665,359.22429115531077Z" fill="url(#plot-waffle-36)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-37" x="473.33474396953005">
+    <path d="M382.22175201015665,355.6694879390601L386.66525603046995,355.6694879390601L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L373.33474396953005,369L373.33474396953005,360.1129919593734L377.77824798984335,360.1129919593734L377.77824798984335,359.22429115531077L382.22175201015665,359.22429115531077Z" fill="url(#plot-clip-344)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-20" x="473.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M477.77824798984335,342.3389758781202L486.66525603046995,342.3389758781202L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L473.33474396953005,369L473.33474396953005,346.7824798984335L473.33474396953005,346.7824798984335L473.33474396953005,345.89377909437087L477.77824798984335,345.89377909437087Z" fill="url(#plot-waffle-37)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-38" x="173.33474396953005">
+    <path d="M477.77824798984335,342.3389758781202L486.66525603046995,342.3389758781202L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L473.33474396953005,369L473.33474396953005,346.7824798984335L473.33474396953005,346.7824798984335L473.33474396953005,345.89377909437087L477.77824798984335,345.89377909437087Z" fill="url(#plot-clip-345)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-21" x="173.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M186.66525603046995,315.6779517562404L186.66525603046995,315.6779517562404L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L173.33474396953005,369L173.33474396953005,320.1214557765537L182.22175201015665,320.1214557765537L182.22175201015665,319.6771053745224L186.66525603046995,319.6771053745224Z" fill="url(#plot-waffle-38)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-39" x="133.33474396953005">
+    <path d="M186.66525603046995,315.6779517562404L186.66525603046995,315.6779517562404L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L173.33474396953005,369L173.33474396953005,320.1214557765537L182.22175201015665,320.1214557765537L182.22175201015665,319.6771053745224L186.66525603046995,319.6771053745224Z" fill="url(#plot-clip-346)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-22" x="133.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M142.22175201015665,324.564959796867L146.66525603046995,324.564959796867L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L133.33474396953005,369L133.33474396953005,329.0084638171803L137.77824798984335,329.0084638171803L137.77824798984335,325.45366060092965L142.22175201015665,325.45366060092965Z" fill="url(#plot-waffle-39)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-40" x="273.33474396953005">
+    <path d="M142.22175201015665,324.564959796867L146.66525603046995,324.564959796867L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L133.33474396953005,369L133.33474396953005,329.0084638171803L137.77824798984335,329.0084638171803L137.77824798984335,325.45366060092965L142.22175201015665,325.45366060092965Z" fill="url(#plot-clip-347)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-23" x="273.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L273.33474396953005,369L273.33474396953005,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468Z" fill="url(#plot-waffle-40)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-41" x="73.33474396953005">
+    <path d="M286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L273.33474396953005,369L273.33474396953005,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468Z" fill="url(#plot-clip-348)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-24" x="73.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M86.66525603046995,346.7824798984335L86.66525603046995,346.7824798984335L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L73.33474396953005,369L73.33474396953005,351.2259839187468L82.22175201015665,351.2259839187468L82.22175201015665,347.67118070249614L86.66525603046995,347.67118070249614Z" fill="url(#plot-waffle-41)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-42" x="573.3347439695301">
+    <path d="M86.66525603046995,346.7824798984335L86.66525603046995,346.7824798984335L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L73.33474396953005,369L73.33474396953005,351.2259839187468L82.22175201015665,351.2259839187468L82.22175201015665,347.67118070249614L86.66525603046995,347.67118070249614Z" fill="url(#plot-clip-349)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-25" x="573.3347439695301">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M582.2217520101567,329.0084638171803L586.66525603047,329.0084638171803L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L573.3347439695301,369L573.3347439695301,333.4519678374936L577.7782479898434,333.4519678374936L577.7782479898434,329.89716462124295L582.2217520101567,329.89716462124295Z" fill="url(#plot-waffle-42)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-43" x="433.33474396953005">
+    <path d="M582.2217520101567,329.0084638171803L586.66525603047,329.0084638171803L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L573.3347439695301,369L573.3347439695301,333.4519678374936L577.7782479898434,333.4519678374936L577.7782479898434,329.89716462124295L582.2217520101567,329.89716462124295Z" fill="url(#plot-clip-350)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-26" x="433.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M437.77824798984335,311.2344477359271L446.66525603046995,311.2344477359271L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L433.33474396953005,369L433.33474396953005,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404Z" fill="url(#plot-waffle-43)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-44" x="513.3347439695301">
+    <path d="M437.77824798984335,311.2344477359271L446.66525603046995,311.2344477359271L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L433.33474396953005,369L433.33474396953005,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404Z" fill="url(#plot-clip-351)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-27" x="513.3347439695301">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M522.2217520101567,337.8954718578069L526.66525603047,337.8954718578069L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L513.3347439695301,369L513.3347439695301,342.3389758781202L517.7782479898434,342.3389758781202L517.7782479898434,339.67287346593224L522.2217520101567,339.67287346593224Z" fill="url(#plot-waffle-44)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-waffle-45" x="293.33474396953005">
+    <path d="M522.2217520101567,337.8954718578069L526.66525603047,337.8954718578069L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L513.3347439695301,369L513.3347439695301,342.3389758781202L517.7782479898434,342.3389758781202L517.7782479898434,339.67287346593224L522.2217520101567,339.67287346593224Z" fill="url(#plot-clip-352)"></path>
+    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-28" x="293.33474396953005">
       <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
     </pattern>
-    <path d="M297.77824798984335,320.1214557765537L306.66525603046995,320.1214557765537L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L293.33474396953005,369L293.33474396953005,324.564959796867L293.33474396953005,324.564959796867L293.33474396953005,322.7875581887417L297.77824798984335,322.7875581887417Z" fill="url(#plot-waffle-45)"></path>
+    <path d="M297.77824798984335,320.1214557765537L306.66525603046995,320.1214557765537L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L293.33474396953005,369L293.33474396953005,324.564959796867L293.33474396953005,324.564959796867L293.33474396953005,322.7875581887417L297.77824798984335,322.7875581887417Z" fill="url(#plot-clip-353)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 96ec1e2f15..0a5caeacc2 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -75,26 +75,26 @@
       <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
     </g>
     <g aria-label="bar">
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-46" x="41.36538314949354">
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-1" x="41.36538314949354">
         <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <path d="M515.3229791682475,302.5552264485881L637.6346168505065,302.5552264485881L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L41.36538314949354,379L41.36538314949354,317.84418115887047L500.034024457965,317.84418115887047L500.034024457965,307.60058150298147L515.3229791682475,307.60058150298147Z" fill="url(#plot-waffle-46)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-47" x="41.36538314949354">
+      <path d="M515.3229791682475,302.5552264485881L637.6346168505065,302.5552264485881L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L41.36538314949354,379L41.36538314949354,317.84418115887047L500.034024457965,317.84418115887047L500.034024457965,307.60058150298147L515.3229791682475,307.60058150298147Z" fill="url(#plot-clip-354)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-2" x="41.36538314949354">
         <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <path d="M87.23224728034069,195.5325434766114L637.6346168505065,195.5325434766114L637.6346168505065,302.5552264485881L515.3229791682475,302.5552264485881L515.3229791682475,307.60058150298147L500.034024457965,307.60058150298147L500.034024457965,317.84418115887047L41.36538314949354,317.84418115887047L41.36538314949354,210.8214981868938L71.9432925700583,210.8214981868938L71.9432925700583,200.8836776252106L87.23224728034069,200.8836776252106Z" fill="url(#plot-waffle-47)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-48" x="41.36538314949354">
+      <path d="M87.23224728034069,195.5325434766114L637.6346168505065,195.5325434766114L637.6346168505065,302.5552264485881L515.3229791682475,302.5552264485881L515.3229791682475,307.60058150298147L500.034024457965,307.60058150298147L500.034024457965,317.84418115887047L41.36538314949354,317.84418115887047L41.36538314949354,210.8214981868938L71.9432925700583,210.8214981868938L71.9432925700583,200.8836776252106L87.23224728034069,200.8836776252106Z" fill="url(#plot-clip-355)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-3" x="41.36538314949354">
         <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <path d="M545.9008885888122,103.79881521491711L637.6346168505065,103.79881521491711L637.6346168505065,195.5325434766114L87.23224728034069,195.5325434766114L87.23224728034069,200.8836776252106L71.9432925700583,200.8836776252106L71.9432925700583,210.8214981868938L41.36538314949354,210.8214981868938L41.36538314949354,119.0877699251995L530.6119338785297,119.0877699251995L530.6119338785297,116.18286853024676L545.9008885888122,116.18286853024676Z" fill="url(#plot-waffle-48)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-49" x="41.36538314949354">
+      <path d="M545.9008885888122,103.79881521491711L637.6346168505065,103.79881521491711L637.6346168505065,195.5325434766114L87.23224728034069,195.5325434766114L87.23224728034069,200.8836776252106L71.9432925700583,200.8836776252106L71.9432925700583,210.8214981868938L41.36538314949354,210.8214981868938L41.36538314949354,119.0877699251995L530.6119338785297,119.0877699251995L530.6119338785297,116.18286853024676L545.9008885888122,116.18286853024676Z" fill="url(#plot-clip-356)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-4" x="41.36538314949354">
         <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <path d="M438.8782056168355,57.931951084069965L637.6346168505065,57.931951084069965L637.6346168505065,103.79881521491711L545.9008885888122,103.79881521491711L545.9008885888122,116.18286853024676L530.6119338785297,116.18286853024676L530.6119338785297,119.0877699251995L41.36538314949354,119.0877699251995L41.36538314949354,73.22090579435235L423.5892509065531,73.22090579435235L423.5892509065531,61.75418976164053L438.8782056168355,61.75418976164053Z" fill="url(#plot-waffle-49)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-waffle-50" x="41.36538314949354">
+      <path d="M438.8782056168355,57.931951084069965L637.6346168505065,57.931951084069965L637.6346168505065,103.79881521491711L545.9008885888122,103.79881521491711L545.9008885888122,116.18286853024676L530.6119338785297,116.18286853024676L530.6119338785297,119.0877699251995L41.36538314949354,119.0877699251995L41.36538314949354,73.22090579435235L423.5892509065531,73.22090579435235L423.5892509065531,61.75418976164053L438.8782056168355,61.75418976164053Z" fill="url(#plot-clip-357)"></path>
+      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-5" x="41.36538314949354">
         <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path d="M316.5665679345764,12.065086953222817L637.6346168505065,12.065086953222817L637.6346168505065,57.931951084069965L438.8782056168355,57.931951084069965L438.8782056168355,61.75418976164053L423.5892509065531,61.75418976164053L423.5892509065531,73.22090579435235L41.36538314949354,73.22090579435235L41.36538314949354,27.3540416635052L301.27761322429404,27.3540416635052L301.27761322429404,22.6144657033185L316.5665679345764,22.6144657033185Z" fill="url(#plot-waffle-50)"></path>
+      <path d="M316.5665679345764,12.065086953222817L637.6346168505065,12.065086953222817L637.6346168505065,57.931951084069965L438.8782056168355,57.931951084069965L438.8782056168355,61.75418976164053L423.5892509065531,61.75418976164053L423.5892509065531,73.22090579435235L41.36538314949354,73.22090579435235L41.36538314949354,27.3540416635052L301.27761322429404,27.3540416635052L301.27761322429404,22.6144657033185L316.5665679345764,22.6144657033185Z" fill="url(#plot-clip-358)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index 9e3c158ecb..12ce547efc 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -19,6 +19,27 @@ export function waffleShorthandNegative() {
   return Plot.waffleY([-4, -9, -24, -46, -66, -7]).plot({x: {axis: "top"}});
 }
 
+export function waffleX() {
+  return Plot.plot({
+    marginLeft: 80,
+    x: {axis: "top"},
+    y: {label: null},
+    color: {scheme: "cool"},
+    marks: [
+      Plot.waffleX(demographics, {y: "group", fill: "group", x: (d) => d.freq / 100, sort: {y: null, color: null}}),
+      Plot.ruleX([0])
+    ]
+  });
+}
+
+export function waffleXStacked() {
+  return Plot.plot({
+    height: 240,
+    color: {scheme: "cool"},
+    marks: [Plot.waffleX(demographics, {fill: "group", x: (d) => d.freq / 100, sort: {color: null}}), Plot.ruleX([0])]
+  });
+}
+
 export function waffleY() {
   return Plot.plot({
     x: {label: null},

From bbac238ff636649c6f2e330f465a598765297ad6 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 15:22:46 -0400
Subject: [PATCH 09/22] waffle docs

---
 docs/marks/waffle.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index f7b53b32d9..91214332b9 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -6,6 +6,25 @@ TODO
 
 For required channels, see the [bar mark](./bar.md). The waffle mark supports the [standard mark options](../features/marks.md). It does not support [insets](../features/marks.md#insets), [rounded corners](../features/marks.md#rounded-corners), or **stroke**. The **fill** defaults to *currentColor*.
 
+## waffleX(*data*, *options*) {#waffleX}
+
+```js
+Plot.waffleX(olympians, Plot.groupY({x: "count"}, {y: "sport"}))
+```
+
+Returns a new horizontal→ waffle with the given *data* and *options*. The following channels are required:
+
+* **x1** - the starting horizontal position; bound to the *x* scale
+* **x2** - the ending horizontal position; bound to the *x* scale
+
+The following optional channels are supported:
+
+* **y** - the vertical position; bound to the *y* scale, which must be *band*
+
+If neither the **x1** nor **x2** option is specified, the **x** option may be specified as shorthand to apply an implicit [stackX transform](../transforms/stack.md); this is the typical configuration for a horizontal waffle chart with columns aligned at *x* = 0. If the **x** option is not specified, it defaults to [identity](../features/transforms.md#identity). If *options* is undefined, then it defaults to **x2** as identity and **y** as the zero-based index [0, 1, 2, …]; this allows an array of numbers to be passed to waffleX to make a quick sequential waffle chart. If the **y** channel is not specified, the column will span the full vertical extent of the plot (or facet).
+
+If an **interval** is specified, such as d3.utcDay, **x1** and **x2** can be derived from **x**: *interval*.floor(*x*) is invoked for each *x* to produce *x1*, and *interval*.offset(*x1*) is invoked for each *x1* to produce *x2*. If the interval is specified as a number *n*, *x1* and *x2* are taken as the two consecutive multiples of *n* that bracket *x*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
+
 ## waffleY(*data*, *options*) {#waffleY}
 
 ```js

From f8d4e04b8aaba36736e22994dbdaeba5379c0927 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 15:58:58 -0400
Subject: [PATCH 10/22] fix zero columns

---
 docs/marks/waffle.md | 18 +++++++++++++++++-
 src/marks/waffle.js  |  4 ++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index 91214332b9..781448be9b 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -1,4 +1,20 @@
-# Waffle mark
+<script setup>
+
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import alphabet from "../data/alphabet.ts";
+
+</script>
+
+# Waffle mark <VersionBadge pr="2040" />
+
+The **waffle mark** is similar to the [bar mark](./bar.md), but subdivides each bar into discrete square cells that are more easily counted. It comes in two orientations: waffleY extends vertically↑, while waffleX extends horizontally→. For example, the waffle chart below shows TKTK.
+
+:::plot
+```js
+Plot.waffleY([1, 2, 32, 400, 5]).plot()
+```
+:::
 
 TODO
 
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 405b456060..29a18cc25f 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -24,7 +24,7 @@ export class WaffleX extends BarX {
     const scale = Math.abs(scales.x(0) - scales.x(unit));
 
     // The number of cells on each row of the waffle.
-    const columns = Math.floor(Math.sqrt(bandwidth / scale));
+    const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
 
     // The outer size of each square cell, in pixels, including the gap.
     const cellsize = scale * columns;
@@ -101,7 +101,7 @@ export class WaffleY extends BarY {
     const scale = Math.abs(scales.y(0) - scales.y(unit));
 
     // The number of cells on each row of the waffle.
-    const columns = Math.floor(Math.sqrt(bandwidth / scale));
+    const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
 
     // The outer size of each square cell, in pixels, including the gap.
     const cellsize = scale * columns;

From 4b8145d6d8539d49721405aaa1d43456a3b2e2de Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 22:25:18 -0400
Subject: [PATCH 11/22] fix rounding errors

---
 docs/marks/waffle.md                    |  32 ++++-
 src/marks/waffle.js                     |  15 ++-
 test/output/waffleShorthand.svg         |  36 ++---
 test/output/waffleShorthandNegative.svg |  36 ++---
 test/output/waffleX.svg                 |  30 ++---
 test/output/waffleY.svg                 |  30 ++---
 test/output/waffleYGrouped.svg          | 168 ++++++++++++------------
 test/output/waffleYStacked.html         |  30 ++---
 8 files changed, 207 insertions(+), 170 deletions(-)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index 781448be9b..00b9fe5739 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -2,13 +2,23 @@
 
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
+import {shallowRef, onMounted} from "vue";
 import alphabet from "../data/alphabet.ts";
 
+const olympians = shallowRef([
+  {weight: 31, height: 1.21, sex: "female"},
+  {weight: 170, height: 2.21, sex: "male"}
+]);
+
+onMounted(() => {
+  d3.csv("../data/athletes.csv", d3.autoType).then((data) => (olympians.value = data));
+});
+
 </script>
 
 # Waffle mark <VersionBadge pr="2040" />
 
-The **waffle mark** is similar to the [bar mark](./bar.md), but subdivides each bar into discrete square cells that are more easily counted. It comes in two orientations: waffleY extends vertically↑, while waffleX extends horizontally→. For example, the waffle chart below shows TKTK.
+The **waffle mark** is similar to the [bar mark](./bar.md), but subdivides values into discrete square cells that are more easily counted.
 
 :::plot
 ```js
@@ -16,7 +26,25 @@ Plot.waffleY([1, 2, 32, 400, 5]).plot()
 ```
 :::
 
-TODO
+The waffle mark is often used in conjunction with the group transform.
+
+:::plot
+```js
+Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: (d) => Math.floor(d.date_of_birth?.getUTCFullYear() / 10) * 10, unit: 10})).plot({round: true, x: {tickFormat: ""}})
+```
+:::
+
+The waffle mark comes in two orientations: waffleY extends vertically↑, while waffleX extends horizontally→.
+
+Waffles typically used to represent countable integer values, such as people or days, though they can also encode fractional values with a partial first or last cell.
+
+:::plot
+```js
+Plot.waffleY([1.5, 2, 32, 400, 5]).plot()
+```
+:::
+
+Waffles can be stacked.
 
 ## Waffle options
 
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 29a18cc25f..3bc4abe10f 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -1,4 +1,4 @@
-import {namespaces} from "d3";
+import {extent, namespaces} from "d3";
 import {hasXY, identity, indexOf} from "../options.js";
 import {getClipId} from "../style.js";
 import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
@@ -21,7 +21,7 @@ export class WaffleX extends BarX {
     const bandwidth = this._height(scales, channels, dimensions);
 
     // The length of a unit along x in pixels.
-    const scale = Math.abs(scales.x(0) - scales.x(unit));
+    const scale = unit * scaleof(scales.scales.x);
 
     // The number of cells on each row of the waffle.
     const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
@@ -98,7 +98,7 @@ export class WaffleY extends BarY {
     const bandwidth = this._width(scales, channels, dimensions);
 
     // The length of a unit along y in pixels.
-    const scale = Math.abs(scales.y(0) - scales.y(unit));
+    const scale = unit * scaleof(scales.scales.y);
 
     // The number of cells on each row of the waffle.
     const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
@@ -213,6 +213,15 @@ function wafflePoints(i1, i2, columns) {
   ];
 }
 
+function scaleof({domain, range}) {
+  return spread(range) / spread(domain);
+}
+
+function spread(domain) {
+  const [min, max] = extent(domain);
+  return max - min;
+}
+
 function abs(x) {
   return Math.abs(x);
 }
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index 70c894cb24..290a22ecba 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -62,29 +62,29 @@
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="50.57575757575751">
-      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="50.57575757575758">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L135.4242424242425,369L50.57575757575751,369L50.57575757575751,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875L135.4242424242425,347.78787878787875Z" fill="url(#plot-clip-299)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="145.5757575757575">
-      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    <path d="M135.42424242424244,347.7878787878788L135.42424242424244,347.7878787878788L135.42424242424244,369L135.42424242424244,369L135.42424242424244,369L135.42424242424244,369L135.42424242424244,369L50.57575757575758,369L50.57575757575758,347.7878787878788L135.42424242424244,347.7878787878788L135.42424242424244,347.7878787878788L135.42424242424244,347.7878787878788Z" fill="url(#plot-clip-299)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="145.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M209.21212121212125,305.36363636363626L230.4242424242425,305.36363636363626L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L230.4242424242425,369L145.5757575757575,369L145.5757575757575,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575L209.21212121212125,326.5757575757575Z" fill="url(#plot-clip-300)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="240.5757575757575">
-      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    <path d="M209.2121212121212,305.3636363636364L230.4242424242424,305.3636363636364L230.4242424242424,369L230.4242424242424,369L230.4242424242424,369L230.4242424242424,369L230.4242424242424,369L145.57575757575756,369L145.57575757575756,326.57575757575756L209.2121212121212,326.57575757575756L209.2121212121212,326.57575757575756L209.2121212121212,326.57575757575756Z" fill="url(#plot-clip-300)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="240.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L325.4242424242425,369L240.5757575757575,369L240.5757575757575,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252L325.4242424242425,241.72727272727252Z" fill="url(#plot-clip-301)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="335.5757575757575">
-      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    <path d="M325.4242424242424,241.72727272727275L325.4242424242424,241.72727272727275L325.4242424242424,369L325.4242424242424,369L325.4242424242424,369L325.4242424242424,369L325.4242424242424,369L240.57575757575756,369L240.57575757575756,241.72727272727275L325.4242424242424,241.72727272727275L325.4242424242424,241.72727272727275L325.4242424242424,241.72727272727275Z" fill="url(#plot-clip-301)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="335.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M378,114.45454545454504L420.4242424242425,114.45454545454504L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L420.4242424242425,369L335.5757575757575,369L335.5757575757575,135.6666666666663L378,135.6666666666663L378,135.6666666666663L378,135.6666666666663Z" fill="url(#plot-clip-302)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="430.5757575757575">
-      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    <path d="M378,114.45454545454547L420.4242424242424,114.45454545454547L420.4242424242424,369L420.4242424242424,369L420.4242424242424,369L420.4242424242424,369L420.4242424242424,369L335.57575757575756,369L335.57575757575756,135.66666666666669L378,135.66666666666669L378,135.66666666666669L378,135.66666666666669Z" fill="url(#plot-clip-302)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="430.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M473,8.393939393938808L515.4242424242425,8.393939393938808L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L515.4242424242425,369L430.5757575757575,369L430.5757575757575,29.606060606060055L473,29.606060606060055L473,29.606060606060055L473,29.606060606060055Z" fill="url(#plot-clip-303)"></path>
-    <pattern width="21.212121212121247" height="21.212121212121247" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="525.5757575757575">
-      <rect x="0.5" y="0.5" width="20.212121212121247" height="20.212121212121247" fill="null"></rect>
+    <path d="M473,8.393939393939434L515.4242424242424,8.393939393939434L515.4242424242424,369L515.4242424242424,369L515.4242424242424,369L515.4242424242424,369L515.4242424242424,369L430.57575757575756,369L430.57575757575756,29.606060606060623L473,29.606060606060623L473,29.606060606060623L473,29.606060606060623Z" fill="url(#plot-clip-303)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="525.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M546.7878787878788,326.5757575757575L610.4242424242425,326.5757575757575L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L525.5757575757575,369L525.5757575757575,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875L546.7878787878788,347.78787878787875Z" fill="url(#plot-clip-304)"></path>
+    <path d="M546.7878787878789,326.57575757575756L610.4242424242425,326.57575757575756L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L525.5757575757576,369L525.5757575757576,347.7878787878788L546.7878787878789,347.7878787878788L546.7878787878789,347.7878787878788L546.7878787878789,347.7878787878788Z" fill="url(#plot-clip-304)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
index 322f537255..76a3a4714e 100644
--- a/test/output/waffleShorthandNegative.svg
+++ b/test/output/waffleShorthandNegative.svg
@@ -62,29 +62,29 @@
     <text transform="translate(525,30)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-1" x="50.57575757575762">
-      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-1" x="50.57575757575758">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L135.42424242424238,29L50.57575757575762,29L50.57575757575762,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119L135.42424242424238,50.21212121212119Z" fill="url(#plot-clip-305)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-2" x="145.57575757575762">
-      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    <path d="M135.42424242424244,50.21212121212121L135.42424242424244,50.21212121212121L135.42424242424244,29L135.42424242424244,29L135.42424242424244,29L135.42424242424244,29L135.42424242424244,29L50.57575757575758,29L50.57575757575758,50.21212121212121L135.42424242424244,50.21212121212121L135.42424242424244,50.21212121212121L135.42424242424244,50.21212121212121Z" fill="url(#plot-clip-305)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-2" x="145.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M209.2121212121212,92.63636363636357L230.42424242424238,92.63636363636357L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L230.42424242424238,29L145.57575757575762,29L145.57575757575762,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238L209.2121212121212,71.42424242424238Z" fill="url(#plot-clip-306)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-3" x="240.57575757575762">
-      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    <path d="M209.2121212121212,92.63636363636363L230.4242424242424,92.63636363636363L230.4242424242424,29L230.4242424242424,29L230.4242424242424,29L230.4242424242424,29L230.4242424242424,29L145.57575757575756,29L145.57575757575756,71.42424242424242L209.2121212121212,71.42424242424242L209.2121212121212,71.42424242424242L209.2121212121212,71.42424242424242Z" fill="url(#plot-clip-306)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-3" x="240.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L240.57575757575762,29L240.57575757575762,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714L325.4242424242424,156.27272727272714Z" fill="url(#plot-clip-307)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-4" x="335.5757575757576">
-      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    <path d="M325.4242424242424,156.27272727272725L325.4242424242424,156.27272727272725L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L240.57575757575756,29L240.57575757575756,156.27272727272725L325.4242424242424,156.27272727272725L325.4242424242424,156.27272727272725L325.4242424242424,156.27272727272725Z" fill="url(#plot-clip-307)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-4" x="335.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M378,283.5454545454543L420.4242424242424,283.5454545454543L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L335.5757575757576,29L335.5757575757576,262.3333333333331L378,262.3333333333331L378,262.3333333333331L378,262.3333333333331Z" fill="url(#plot-clip-308)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-5" x="430.5757575757576">
-      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    <path d="M378,283.5454545454545L420.4242424242424,283.5454545454545L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L335.57575757575756,29L335.57575757575756,262.3333333333333L378,262.3333333333333L378,262.3333333333333L378,262.3333333333333Z" fill="url(#plot-clip-308)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-5" x="430.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M473,389.6060606060602L515.4242424242424,389.6060606060602L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L430.5757575757576,29L430.5757575757576,368.39393939393904L473,368.39393939393904L473,368.39393939393904L473,368.39393939393904Z" fill="url(#plot-clip-309)"></path>
-    <pattern width="21.21212121212119" height="21.21212121212119" patternUnits="userSpaceOnUse" y="29" id="plot-clip-6" x="525.5757575757576">
-      <rect x="0.5" y="0.5" width="20.21212121212119" height="20.21212121212119" fill="null"></rect>
+    <path d="M473,389.60606060606057L515.4242424242424,389.60606060606057L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L430.57575757575756,29L430.57575757575756,368.3939393939394L473,368.3939393939394L473,368.3939393939394L473,368.3939393939394Z" fill="url(#plot-clip-309)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-6" x="525.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M546.7878787878788,71.42424242424238L610.4242424242424,71.42424242424238L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L610.4242424242424,29L525.5757575757576,29L525.5757575757576,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119L546.7878787878788,50.21212121212119Z" fill="url(#plot-clip-310)"></path>
+    <path d="M546.7878787878789,71.42424242424242L610.4242424242425,71.42424242424242L610.4242424242425,29L610.4242424242425,29L610.4242424242425,29L610.4242424242425,29L610.4242424242425,29L525.5757575757576,29L525.5757575757576,50.21212121212121L546.7878787878789,50.21212121212121L546.7878787878789,50.21212121212121L546.7878787878789,50.21212121212121Z" fill="url(#plot-clip-310)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index 7b73e70c9a..c55d9ebcd7 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -46,26 +46,26 @@
     <text transform="translate(618.241743637451,30)">300</text>
   </g>
   <g aria-label="bar">
-    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-1" y="35.42637384543821">
-      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(110, 64, 170)"></rect>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-1" y="35.426373845438235">
+      <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M375.03295900059885,40.80879128181274L375.03295900059885,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,51.57362615456179L79,35.42637384543821L369.65054156422434,35.42637384543821L369.65054156422434,35.42637384543821L373.2567612465952,35.42637384543821L373.2567612465952,40.80879128181274Z" fill="url(#plot-clip-311)"></path>
-    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-2" y="56.42637384543821">
-      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(65, 125, 224)"></rect>
+    <path d="M375.03295900059805,40.808791281812745L375.03295900059805,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,35.426373845438235L369.65054156422354,35.426373845438235L369.65054156422354,35.426373845438235L373.2567612465944,35.426373845438235L373.2567612465944,40.808791281812745Z" fill="url(#plot-clip-311)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-2" y="56.426373845438235">
+      <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M622.6241610738269,72.5736261545618L622.6241610738269,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,72.5736261545618L79,56.42637384543821L617.2417436374524,56.42637384543821L617.2417436374524,67.19120871818726L622.5165127250996,67.19120871818726L622.5165127250996,72.5736261545618Z" fill="url(#plot-clip-312)"></path>
-    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-3" y="77.4263738454382">
-      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(26, 199, 194)"></rect>
+    <path d="M622.6241610738255,72.57362615456177L622.6241610738255,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,56.426373845438235L617.241743637451,56.426373845438235L617.241743637451,67.19120871818726L622.5165127250981,67.19120871818726L622.5165127250981,72.57362615456177Z" fill="url(#plot-clip-312)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-3" y="77.42637384543823">
+      <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M445.00438567346765,82.80879128181273L445.00438567346765,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,93.57362615456178L79,77.4263738454382L439.62196823709314,77.4263738454382L439.62196823709314,77.4263738454382L442.52847365273533,77.4263738454382L442.52847365273533,82.80879128181273Z" fill="url(#plot-clip-313)"></path>
-    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-4" y="98.4263738454382">
-      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(64, 243, 115)"></rect>
+    <path d="M445.0043856734667,82.80879128181274L445.0043856734667,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,77.42637384543823L439.6219682370922,77.42637384543823L439.6219682370922,77.42637384543823L442.52847365273436,77.42637384543823L442.52847365273436,82.80879128181274Z" fill="url(#plot-clip-313)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-4" y="98.42637384543823">
+      <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M305.06153232773,109.19120871818726L305.06153232773,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,114.57362615456178L79,98.4263738454382L299.6791148913555,98.4263738454382L299.6791148913555,103.80879128181273L302.6932686557252,103.80879128181273L302.6932686557252,109.19120871818726Z" fill="url(#plot-clip-314)"></path>
-    <pattern width="5.382417436374524" height="5.382417436374524" patternUnits="userSpaceOnUse" x="79" id="plot-clip-5" y="119.4263738454382">
-      <rect x="0.5" y="0.5" width="4.382417436374524" height="4.382417436374524" fill="rgb(175, 240, 91)"></rect>
+    <path d="M305.0615323277294,109.19120871818726L305.0615323277294,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,98.42637384543823L299.6791148913549,98.42637384543823L299.6791148913549,103.80879128181274L302.69326865572464,103.80879128181274L302.69326865572464,109.19120871818726Z" fill="url(#plot-clip-314)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-5" y="119.42637384543823">
+      <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M305.06153232773,130.19120871818726L305.06153232773,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,135.5736261545618L79,119.4263738454382L299.6791148913555,119.4263738454382L299.6791148913555,124.80879128181273L302.6932686557252,124.80879128181273L302.6932686557252,130.19120871818726Z" fill="url(#plot-clip-315)"></path>
+    <path d="M305.0615323277294,130.19120871818726L305.0615323277294,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,119.42637384543823L299.6791148913549,119.42637384543823L299.6791148913549,124.80879128181274L302.69326865572464,124.80879128181274L302.69326865572464,130.19120871818726Z" fill="url(#plot-clip-315)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="80" x2="80" y1="30" y2="140"></line>
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index 059936d282..de5ed60083 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -64,26 +64,26 @@
     <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
   </g>
   <g aria-label="bar">
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="56.90384743172373">
-      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(110, 64, 170)"></rect>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="56.90384743172304">
+      <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M130.16452920459793,170.14957804505576L151.09615256827627,170.14957804505576L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L151.09615256827627,369L56.90384743172373,369L56.90384743172373,180.61538972689493L119.69871752275876,180.61538972689493L119.69871752275876,173.60329590006282L130.16452920459793,173.60329590006282Z" fill="url(#plot-clip-321)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="169.90384743172373">
-      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(65, 125, 224)"></rect>
+    <path d="M130.1645292045983,170.14957804505283L151.09615256827698,170.14957804505283L151.09615256827698,369L151.09615256827698,369L151.09615256827698,369L151.09615256827698,369L151.09615256827698,369L56.90384743172304,369L56.90384743172304,180.61538972689215L119.69871752275898,180.61538972689215L119.69871752275898,173.60329590005995L130.1645292045983,173.60329590005995Z" fill="url(#plot-clip-321)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="169.90384743172302">
+      <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M232.69871752275876,13.162402817468205L264.09615256827624,13.162402817468205L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L264.09615256827624,369L169.90384743172373,369L169.90384743172373,23.628214499307376L222.23290584091959,23.628214499307376L222.23290584091959,13.371719051104776L232.69871752275876,13.371719051104776Z" fill="url(#plot-clip-322)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="282.90384743172376">
-      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(26, 199, 194)"></rect>
+    <path d="M232.69871752275895,13.162402817462976L264.0961525682769,13.162402817462976L264.0961525682769,369L264.0961525682769,369L264.0961525682769,369L264.0961525682769,369L264.0961525682769,369L169.90384743172302,369L169.90384743172302,23.62821449930226L222.23290584091964,23.62821449930226L222.23290584091964,13.371719051099547L232.69871752275895,13.371719051099547Z" fill="url(#plot-clip-322)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="282.903847431723">
+      <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M324.76709415908044,128.28633131769908L377.0961525682763,128.28633131769908L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L377.0961525682763,369L282.90384743172376,369L282.90384743172376,138.75214299953825L314.3012824772413,138.75214299953825L314.3012824772413,133.10060469134518L324.76709415908044,133.10060469134518Z" fill="url(#plot-clip-323)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="395.90384743172376">
-      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(64, 243, 115)"></rect>
+    <path d="M324.76709415908033,128.28633131769553L377.0961525682769,128.28633131769553L377.0961525682769,369L377.0961525682769,369L377.0961525682769,369L377.0961525682769,369L377.0961525682769,369L282.903847431723,369L282.903847431723,138.75214299953484L314.301282477241,138.75214299953484L314.301282477241,133.1006046913417L324.76709415908033,133.1006046913417Z" fill="url(#plot-clip-323)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="395.903847431723">
+      <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M416.8354707954021,222.4786364542516L490.0961525682763,222.4786364542516L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L490.0961525682763,369L395.90384743172376,369L395.90384743172376,232.94444813609078L406.36965911356293,232.94444813609078L406.36965911356293,227.08359359426083L416.8354707954021,227.08359359426083Z" fill="url(#plot-clip-324)"></path>
-    <pattern width="10.46581168183917" height="10.46581168183917" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="508.90384743172376">
-      <rect x="0.5" y="0.5" width="9.46581168183917" height="9.46581168183917" fill="rgb(175, 240, 91)"></rect>
+    <path d="M416.83547079540165,222.47863645424945L490.0961525682769,222.47863645424945L490.0961525682769,369L490.0961525682769,369L490.0961525682769,369L490.0961525682769,369L490.0961525682769,369L395.903847431723,369L395.903847431723,232.94444813608877L406.36965911356236,232.94444813608877L406.36965911356236,227.08359359425873L416.83547079540165,227.08359359425873Z" fill="url(#plot-clip-324)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="508.903847431723">
+      <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M529.8354707954021,222.4786364542516L603.0961525682762,222.4786364542516L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L603.0961525682762,369L508.90384743172376,369L508.90384743172376,232.94444813609078L519.3696591135629,232.94444813609078L519.3696591135629,227.08359359426083L529.8354707954021,227.08359359426083Z" fill="url(#plot-clip-325)"></path>
+    <path d="M529.8354707954016,222.47863645424945L603.0961525682769,222.47863645424945L603.0961525682769,369L603.0961525682769,369L603.0961525682769,369L603.0961525682769,369L603.0961525682769,369L508.903847431723,369L508.903847431723,232.94444813608877L519.3696591135623,232.94444813608877L519.3696591135623,227.08359359425873L529.8354707954016,227.08359359425873Z" fill="url(#plot-clip-325)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index 7cf9bd690d..af519cd96e 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -105,118 +105,118 @@
     <text y="0.32em" transform="translate(591,370) rotate(-90)">wrestling</text>
   </g>
   <g aria-label="bar">
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="93.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="93.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M97.77824798984335,17.96318239524942L106.66525603046995,17.96318239524942L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L106.66525603046995,369L93.33474396953005,369L93.33474396953005,22.406686415562717L93.33474396953005,22.406686415562717L93.33474396953005,21.073635209468705L97.77824798984335,21.073635209468705Z" fill="url(#plot-clip-326)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="233.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M97.77824798984341,17.96318239526022L106.66525603046973,17.96318239526022L106.66525603046973,369L106.66525603046973,369L106.66525603046973,369L106.66525603046973,369L106.66525603046973,369L93.33474396953025,369L93.33474396953025,22.406686415573404L93.33474396953025,22.406686415573404L93.33474396953025,21.07363520947939L97.77824798984341,21.07363520947939Z" fill="url(#plot-clip-326)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="233.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M246.66525603046995,329.0084638171803L246.66525603046995,329.0084638171803L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L246.66525603046995,369L233.33474396953005,369L233.33474396953005,333.4519678374936L242.22175201015665,333.4519678374936L242.22175201015665,330.78586542530564L246.66525603046995,330.78586542530564Z" fill="url(#plot-clip-327)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="493.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M246.66525603046975,329.00846381718156L246.66525603046975,329.00846381718156L246.66525603046975,369L246.66525603046975,369L246.66525603046975,369L246.66525603046975,369L246.66525603046975,369L233.33474396953025,369L233.33474396953025,333.4519678374947L242.22175201015656,333.4519678374947L242.22175201015656,330.7858654253068L246.66525603046975,330.7858654253068Z" fill="url(#plot-clip-327)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="493.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M506.66525603046995,346.7824798984335L506.66525603046995,346.7824798984335L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L506.66525603046995,369L493.33474396953005,369L493.33474396953005,351.2259839187468L502.22175201015665,351.2259839187468L502.22175201015665,347.67118070249614L506.66525603046995,347.67118070249614Z" fill="url(#plot-clip-328)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="193.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M506.6652560304698,346.7824798984342L506.6652560304698,346.7824798984342L506.6652560304698,369L506.6652560304698,369L506.6652560304698,369L506.6652560304698,369L506.6652560304698,369L493.3347439695303,369L493.3347439695303,351.2259839187474L502.2217520101566,351.2259839187474L502.2217520101566,347.6711807024968L506.6652560304698,347.6711807024968Z" fill="url(#plot-clip-328)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="193.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M202.22175201015665,289.0169276343606L206.66525603046995,289.0169276343606L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L206.66525603046995,369L193.33474396953005,369L193.33474396953005,293.4604316546739L197.77824798984335,293.4604316546739L197.77824798984335,291.2386796445173L202.22175201015665,291.2386796445173Z" fill="url(#plot-clip-329)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="533.3347439695301">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M202.22175201015656,289.01692763436307L206.66525603046975,289.01692763436307L206.66525603046975,369L206.66525603046975,369L206.66525603046975,369L206.66525603046975,369L206.66525603046975,369L193.33474396953025,369L193.33474396953025,293.46043165467626L197.7782479898434,293.46043165467626L197.7782479898434,291.23867964451966L202.22175201015656,291.23867964451966Z" fill="url(#plot-clip-329)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="533.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M537.7782479898434,351.2259839187468L546.66525603047,351.2259839187468L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L546.66525603047,369L533.3347439695301,369L533.3347439695301,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601L537.7782479898434,355.6694879390601Z" fill="url(#plot-clip-330)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="553.3347439695301">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M537.7782479898434,351.2259839187474L546.6652560304697,351.2259839187474L546.6652560304697,369L546.6652560304697,369L546.6652560304697,369L546.6652560304697,369L546.6652560304697,369L533.3347439695302,369L533.3347439695302,355.6694879390605L537.7782479898434,355.6694879390605L537.7782479898434,355.6694879390605L537.7782479898434,355.6694879390605Z" fill="url(#plot-clip-330)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="553.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M557.7782479898434,311.2344477359271L566.66525603047,311.2344477359271L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L566.66525603047,369L553.3347439695301,369L553.3347439695301,315.6779517562404L553.3347439695301,315.6779517562404L553.3347439695301,313.9005501481151L557.7782479898434,313.9005501481151Z" fill="url(#plot-clip-331)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-7" x="53.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M557.7782479898434,311.2344477359289L566.6652560304697,311.2344477359289L566.6652560304697,369L566.6652560304697,369L566.6652560304697,369L566.6652560304697,369L566.6652560304697,369L553.3347439695302,369L553.3347439695302,315.67795175624207L553.3347439695302,315.67795175624207L553.3347439695302,313.9005501481168L557.7782479898434,313.9005501481168Z" fill="url(#plot-clip-331)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-7" x="53.33474396953026">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M66.66525603046995,151.26830300464837L66.66525603046995,151.26830300464837L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L66.66525603046995,369L53.33474396953005,369L53.33474396953005,155.71180702496167L62.22175201015665,155.71180702496167L62.22175201015665,153.49005501480502L66.66525603046995,153.49005501480502Z" fill="url(#plot-clip-332)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-8" x="413.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M66.66525603046975,151.26830300465508L66.66525603046975,151.26830300465508L66.66525603046975,369L66.66525603046975,369L66.66525603046975,369L66.66525603046975,369L66.66525603046975,369L53.33474396953026,369L53.33474396953026,155.71180702496824L62.22175201015658,155.71180702496824L62.22175201015658,153.49005501481165L66.66525603046975,153.49005501481165Z" fill="url(#plot-clip-332)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-8" x="413.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L426.66525603046995,369L413.33474396953005,369L413.33474396953005,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867L426.66525603046995,324.564959796867Z" fill="url(#plot-clip-333)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-9" x="593.3347439695301">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M426.6652560304698,324.5649597968684L426.6652560304698,324.5649597968684L426.6652560304698,369L426.6652560304698,369L426.6652560304698,369L426.6652560304698,369L426.6652560304698,369L413.3347439695303,369L413.3347439695303,324.5649597968684L426.6652560304698,324.5649597968684L426.6652560304698,324.5649597968684L426.6652560304698,324.5649597968684Z" fill="url(#plot-clip-333)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-9" x="593.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M597.7782479898434,315.6779517562404L606.66525603047,315.6779517562404L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L606.66525603047,369L593.3347439695301,369L593.3347439695301,320.1214557765537L593.3347439695301,320.1214557765537L593.3347439695301,318.78840457045976L597.7782479898434,318.78840457045976Z" fill="url(#plot-clip-334)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-10" x="253.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M597.7782479898434,315.67795175624207L606.6652560304697,315.67795175624207L606.6652560304697,369L606.6652560304697,369L606.6652560304697,369L606.6652560304697,369L606.6652560304697,369L593.3347439695302,369L593.3347439695302,320.1214557765552L593.3347439695302,320.1214557765552L593.3347439695302,318.7884045704613L597.7782479898434,318.7884045704613Z" fill="url(#plot-clip-334)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-10" x="253.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M262.22175201015665,275.68641557342073L266.66525603046995,275.68641557342073L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L266.66525603046995,369L253.33474396953005,369L253.33474396953005,280.12991959373403L257.77824798984335,280.12991959373403L257.77824798984335,279.6855691917027L262.22175201015665,279.6855691917027Z" fill="url(#plot-clip-335)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-11" x="453.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M262.2217520101566,275.6864155734236L266.6652560304697,275.6864155734236L266.6652560304697,369L266.6652560304697,369L266.6652560304697,369L266.6652560304697,369L266.6652560304697,369L253.33474396953025,369L253.33474396953025,280.12991959373676L257.7782479898434,280.12991959373676L257.7782479898434,279.68556919170544L262.2217520101566,279.68556919170544Z" fill="url(#plot-clip-335)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-11" x="453.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L466.66525603046995,369L453.33474396953005,369L453.33474396953005,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271L466.66525603046995,311.2344477359271Z" fill="url(#plot-clip-336)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-12" x="153.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M466.6652560304698,311.2344477359289L466.6652560304698,311.2344477359289L466.6652560304698,369L466.6652560304698,369L466.6652560304698,369L466.6652560304698,369L466.6652560304698,369L453.3347439695303,369L453.3347439695303,311.2344477359289L466.6652560304698,311.2344477359289L466.6652560304698,311.2344477359289L466.6652560304698,311.2344477359289Z" fill="url(#plot-clip-336)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-12" x="153.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M162.22175201015665,324.564959796867L166.66525603046995,324.564959796867L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L166.66525603046995,369L153.33474396953005,369L153.33474396953005,329.0084638171803L157.77824798984335,329.0084638171803L157.77824798984335,326.34236140499235L162.22175201015665,326.34236140499235Z" fill="url(#plot-clip-337)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-13" x="213.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M162.22175201015656,324.5649597968684L166.66525603046975,324.5649597968684L166.66525603046975,369L166.66525603046975,369L166.66525603046975,369L166.66525603046975,369L166.66525603046975,369L153.33474396953025,369L153.33474396953025,329.00846381718156L157.7782479898434,329.00846381718156L157.7782479898434,326.34236140499365L162.22175201015656,326.34236140499365Z" fill="url(#plot-clip-337)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-13" x="213.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M222.22175201015665,333.4519678374936L226.66525603046995,333.4519678374936L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L226.66525603046995,369L213.33474396953005,369L213.33474396953005,337.8954718578069L217.77824798984335,337.8954718578069L217.77824798984335,337.0067710537443L222.22175201015665,337.0067710537443Z" fill="url(#plot-clip-338)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-14" x="393.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M222.22175201015656,333.4519678374947L226.66525603046975,333.4519678374947L226.66525603046975,369L226.66525603046975,369L226.66525603046975,369L226.66525603046975,369L226.66525603046975,369L213.33474396953025,369L213.33474396953025,337.8954718578079L217.7782479898434,337.8954718578079L217.7782479898434,337.00677105374524L222.22175201015656,337.00677105374524Z" fill="url(#plot-clip-338)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-14" x="393.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M406.66525603046995,284.57342361404733L406.66525603046995,284.57342361404733L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L406.66525603046995,369L393.33474396953005,369L393.33474396953005,289.0169276343606L402.22175201015665,289.0169276343606L402.22175201015665,285.9064748201413L406.66525603046995,285.9064748201413Z" fill="url(#plot-clip-339)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-15" x="353.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M406.6652560304698,284.57342361404994L406.6652560304698,284.57342361404994L406.6652560304698,369L406.6652560304698,369L406.6652560304698,369L406.6652560304698,369L406.6652560304698,369L393.3347439695303,369L393.3347439695303,289.01692763436307L402.2217520101566,289.01692763436307L402.2217520101566,285.90647482014384L406.6652560304698,285.90647482014384Z" fill="url(#plot-clip-339)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-15" x="353.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M366.66525603046995,306.7909437156138L366.66525603046995,306.7909437156138L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L366.66525603046995,369L353.33474396953005,369L353.33474396953005,311.2344477359271L362.22175201015665,311.2344477359271L362.22175201015665,310.3457469318644L366.66525603046995,310.3457469318644Z" fill="url(#plot-clip-340)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-16" x="313.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M366.6652560304698,306.79094371561575L366.6652560304698,306.79094371561575L366.6652560304698,369L366.6652560304698,369L366.6652560304698,369L366.6652560304698,369L366.6652560304698,369L353.3347439695303,369L353.3347439695303,311.2344477359289L362.2217520101566,311.2344477359289L362.2217520101566,310.34574693186624L366.6652560304698,310.34574693186624Z" fill="url(#plot-clip-340)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-16" x="313.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M326.66525603046995,311.2344477359271L326.66525603046995,311.2344477359271L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L326.66525603046995,369L313.33474396953005,369L313.33474396953005,315.6779517562404L322.22175201015665,315.6779517562404L322.22175201015665,314.34490055014646L326.66525603046995,314.34490055014646Z" fill="url(#plot-clip-341)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-17" x="113.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M326.6652560304698,311.2344477359289L326.6652560304698,311.2344477359289L326.6652560304698,369L326.6652560304698,369L326.6652560304698,369L326.6652560304698,369L326.6652560304698,369L313.3347439695303,369L313.3347439695303,315.67795175624207L322.2217520101566,315.67795175624207L322.2217520101566,314.3449005501481L326.6652560304698,314.3449005501481Z" fill="url(#plot-clip-341)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-17" x="113.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M117.77824798984335,342.3389758781202L126.66525603046995,342.3389758781202L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L126.66525603046995,369L113.33474396953005,369L113.33474396953005,346.7824798984335L113.33474396953005,346.7824798984335L113.33474396953005,345.89377909437087L117.77824798984335,345.89377909437087Z" fill="url(#plot-clip-342)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-18" x="333.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M117.77824798984341,342.338975878121L126.66525603046973,342.338975878121L126.66525603046973,369L126.66525603046973,369L126.66525603046973,369L126.66525603046973,369L126.66525603046973,369L113.33474396953025,369L113.33474396953025,346.7824798984342L113.33474396953025,346.7824798984342L113.33474396953025,345.89377909437155L117.77824798984341,345.89377909437155Z" fill="url(#plot-clip-342)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-18" x="333.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M342.22175201015665,302.3474396953005L346.66525603046995,302.3474396953005L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L346.66525603046995,369L333.33474396953005,369L333.33474396953005,306.7909437156138L337.77824798984335,306.7909437156138L337.77824798984335,305.9022429115511L342.22175201015665,305.9022429115511Z" fill="url(#plot-clip-343)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-19" x="373.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M342.2217520101566,302.34743969530257L346.6652560304698,302.34743969530257L346.6652560304698,369L346.6652560304698,369L346.6652560304698,369L346.6652560304698,369L346.6652560304698,369L333.3347439695303,369L333.3347439695303,306.79094371561575L337.77824798984346,306.79094371561575L337.77824798984346,305.9022429115531L342.2217520101566,305.9022429115531Z" fill="url(#plot-clip-343)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-19" x="373.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M382.22175201015665,355.6694879390601L386.66525603046995,355.6694879390601L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L386.66525603046995,369L373.33474396953005,369L373.33474396953005,360.1129919593734L377.77824798984335,360.1129919593734L377.77824798984335,359.22429115531077L382.22175201015665,359.22429115531077Z" fill="url(#plot-clip-344)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-20" x="473.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M382.2217520101566,355.6694879390605L386.6652560304698,355.6694879390605L386.6652560304698,369L386.6652560304698,369L386.6652560304698,369L386.6652560304698,369L386.6652560304698,369L373.3347439695303,369L373.3347439695303,360.1129919593737L377.77824798984346,360.1129919593737L377.77824798984346,359.22429115531105L382.2217520101566,359.22429115531105Z" fill="url(#plot-clip-344)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-20" x="473.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M477.77824798984335,342.3389758781202L486.66525603046995,342.3389758781202L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L486.66525603046995,369L473.33474396953005,369L473.33474396953005,346.7824798984335L473.33474396953005,346.7824798984335L473.33474396953005,345.89377909437087L477.77824798984335,345.89377909437087Z" fill="url(#plot-clip-345)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-21" x="173.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M477.77824798984346,342.338975878121L486.6652560304698,342.338975878121L486.6652560304698,369L486.6652560304698,369L486.6652560304698,369L486.6652560304698,369L486.6652560304698,369L473.3347439695303,369L473.3347439695303,346.7824798984342L473.3347439695303,346.7824798984342L473.3347439695303,345.89377909437155L477.77824798984346,345.89377909437155Z" fill="url(#plot-clip-345)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-21" x="173.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M186.66525603046995,315.6779517562404L186.66525603046995,315.6779517562404L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L186.66525603046995,369L173.33474396953005,369L173.33474396953005,320.1214557765537L182.22175201015665,320.1214557765537L182.22175201015665,319.6771053745224L186.66525603046995,319.6771053745224Z" fill="url(#plot-clip-346)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-22" x="133.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M186.66525603046975,315.67795175624207L186.66525603046975,315.67795175624207L186.66525603046975,369L186.66525603046975,369L186.66525603046975,369L186.66525603046975,369L186.66525603046975,369L173.33474396953025,369L173.33474396953025,320.1214557765552L182.22175201015656,320.1214557765552L182.22175201015656,319.6771053745239L186.66525603046975,319.6771053745239Z" fill="url(#plot-clip-346)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-22" x="133.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M142.22175201015665,324.564959796867L146.66525603046995,324.564959796867L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L146.66525603046995,369L133.33474396953005,369L133.33474396953005,329.0084638171803L137.77824798984335,329.0084638171803L137.77824798984335,325.45366060092965L142.22175201015665,325.45366060092965Z" fill="url(#plot-clip-347)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-23" x="273.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M142.22175201015656,324.5649597968684L146.66525603046975,324.5649597968684L146.66525603046975,369L146.66525603046975,369L146.66525603046975,369L146.66525603046975,369L146.66525603046975,369L133.33474396953025,369L133.33474396953025,329.00846381718156L137.7782479898434,329.00846381718156L137.7782479898434,325.453660600931L142.22175201015656,325.453660600931Z" fill="url(#plot-clip-347)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-23" x="273.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L286.66525603046995,369L273.33474396953005,369L273.33474396953005,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468L286.66525603046995,351.2259839187468Z" fill="url(#plot-clip-348)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-24" x="73.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M286.6652560304698,351.2259839187474L286.6652560304698,351.2259839187474L286.6652560304698,369L286.6652560304698,369L286.6652560304698,369L286.6652560304698,369L286.6652560304698,369L273.3347439695303,369L273.3347439695303,351.2259839187474L286.6652560304698,351.2259839187474L286.6652560304698,351.2259839187474L286.6652560304698,351.2259839187474Z" fill="url(#plot-clip-348)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-24" x="73.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M86.66525603046995,346.7824798984335L86.66525603046995,346.7824798984335L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L86.66525603046995,369L73.33474396953005,369L73.33474396953005,351.2259839187468L82.22175201015665,351.2259839187468L82.22175201015665,347.67118070249614L86.66525603046995,347.67118070249614Z" fill="url(#plot-clip-349)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-25" x="573.3347439695301">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M86.66525603046973,346.7824798984342L86.66525603046973,346.7824798984342L86.66525603046973,369L86.66525603046973,369L86.66525603046973,369L86.66525603046973,369L86.66525603046973,369L73.33474396953025,369L73.33474396953025,351.2259839187474L82.22175201015658,351.2259839187474L82.22175201015658,347.6711807024968L86.66525603046973,347.6711807024968Z" fill="url(#plot-clip-349)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-25" x="573.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M582.2217520101567,329.0084638171803L586.66525603047,329.0084638171803L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L586.66525603047,369L573.3347439695301,369L573.3347439695301,333.4519678374936L577.7782479898434,333.4519678374936L577.7782479898434,329.89716462124295L582.2217520101567,329.89716462124295Z" fill="url(#plot-clip-350)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-26" x="433.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M582.2217520101566,329.00846381718156L586.6652560304697,329.00846381718156L586.6652560304697,369L586.6652560304697,369L586.6652560304697,369L586.6652560304697,369L586.6652560304697,369L573.3347439695302,369L573.3347439695302,333.4519678374947L577.7782479898434,333.4519678374947L577.7782479898434,329.8971646212442L582.2217520101566,329.8971646212442Z" fill="url(#plot-clip-350)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-26" x="433.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M437.77824798984335,311.2344477359271L446.66525603046995,311.2344477359271L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L446.66525603046995,369L433.33474396953005,369L433.33474396953005,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404L437.77824798984335,315.6779517562404Z" fill="url(#plot-clip-351)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-27" x="513.3347439695301">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M437.77824798984346,311.2344477359289L446.6652560304698,311.2344477359289L446.6652560304698,369L446.6652560304698,369L446.6652560304698,369L446.6652560304698,369L446.6652560304698,369L433.3347439695303,369L433.3347439695303,315.67795175624207L437.77824798984346,315.67795175624207L437.77824798984346,315.67795175624207L437.77824798984346,315.67795175624207Z" fill="url(#plot-clip-351)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-27" x="513.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M522.2217520101567,337.8954718578069L526.66525603047,337.8954718578069L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L526.66525603047,369L513.3347439695301,369L513.3347439695301,342.3389758781202L517.7782479898434,342.3389758781202L517.7782479898434,339.67287346593224L522.2217520101567,339.67287346593224Z" fill="url(#plot-clip-352)"></path>
-    <pattern width="4.4435040203132985" height="4.4435040203132985" patternUnits="userSpaceOnUse" y="369" id="plot-clip-28" x="293.33474396953005">
-      <rect x="0.5" y="0.5" width="3.4435040203132985" height="3.4435040203132985" fill="null"></rect>
+    <path d="M522.2217520101566,337.8954718578079L526.6652560304697,337.8954718578079L526.6652560304697,369L526.6652560304697,369L526.6652560304697,369L526.6652560304697,369L526.6652560304697,369L513.3347439695302,369L513.3347439695302,342.338975878121L517.7782479898434,342.338975878121L517.7782479898434,339.67287346593315L522.2217520101566,339.67287346593315Z" fill="url(#plot-clip-352)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-28" x="293.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M297.77824798984335,320.1214557765537L306.66525603046995,320.1214557765537L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L306.66525603046995,369L293.33474396953005,369L293.33474396953005,324.564959796867L293.33474396953005,324.564959796867L293.33474396953005,322.7875581887417L297.77824798984335,322.7875581887417Z" fill="url(#plot-clip-353)"></path>
+    <path d="M297.77824798984346,320.1214557765552L306.6652560304698,320.1214557765552L306.6652560304698,369L306.6652560304698,369L306.6652560304698,369L306.6652560304698,369L306.6652560304698,369L293.3347439695303,369L293.3347439695303,324.5649597968684L293.3347439695303,324.5649597968684L293.3347439695303,322.7875581887431L297.77824798984346,322.7875581887431Z" fill="url(#plot-clip-353)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 0a5caeacc2..6e9bdfd447 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -75,26 +75,26 @@
       <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
     </g>
     <g aria-label="bar">
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-1" x="41.36538314949354">
-        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(110, 64, 170)"></rect>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-1" x="41.36538314948109">
+        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <path d="M515.3229791682475,302.5552264485881L637.6346168505065,302.5552264485881L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L637.6346168505065,379L41.36538314949354,379L41.36538314949354,317.84418115887047L500.034024457965,317.84418115887047L500.034024457965,307.60058150298147L515.3229791682475,307.60058150298147Z" fill="url(#plot-clip-354)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-2" x="41.36538314949354">
-        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(65, 125, 224)"></rect>
+      <path d="M515.3229791682547,302.5552264485849L637.6346168505189,302.5552264485849L637.6346168505189,379L637.6346168505189,379L637.6346168505189,379L637.6346168505189,379L637.6346168505189,379L41.36538314948109,379L41.36538314948109,317.8441811588679L500.0340244579718,317.8441811588679L500.0340244579718,307.60058150297846L515.3229791682547,307.60058150297846Z" fill="url(#plot-clip-354)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-2" x="41.36538314948109">
+        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <path d="M87.23224728034069,195.5325434766114L637.6346168505065,195.5325434766114L637.6346168505065,302.5552264485881L515.3229791682475,302.5552264485881L515.3229791682475,307.60058150298147L500.034024457965,307.60058150298147L500.034024457965,317.84418115887047L41.36538314949354,317.84418115887047L41.36538314949354,210.8214981868938L71.9432925700583,210.8214981868938L71.9432925700583,200.8836776252106L87.23224728034069,200.8836776252106Z" fill="url(#plot-clip-355)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-3" x="41.36538314949354">
-        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(26, 199, 194)"></rect>
+      <path d="M87.23224728033016,195.53254347660373L637.6346168505189,195.53254347660373L637.6346168505189,302.5552264485849L515.3229791682547,302.5552264485849L515.3229791682547,307.60058150297846L500.0340244579718,307.60058150297846L500.0340244579718,317.8441811588679L41.36538314948109,317.8441811588679L41.36538314948109,210.82149818688674L71.94329257004713,210.82149818688674L71.94329257004713,200.88367762520315L87.23224728033016,200.88367762520315Z" fill="url(#plot-clip-355)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-3" x="41.36538314948109">
+        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <path d="M545.9008885888122,103.79881521491711L637.6346168505065,103.79881521491711L637.6346168505065,195.5325434766114L87.23224728034069,195.5325434766114L87.23224728034069,200.8836776252106L71.9432925700583,200.8836776252106L71.9432925700583,210.8214981868938L41.36538314949354,210.8214981868938L41.36538314949354,119.0877699251995L530.6119338785297,119.0877699251995L530.6119338785297,116.18286853024676L545.9008885888122,116.18286853024676Z" fill="url(#plot-clip-356)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-4" x="41.36538314949354">
-        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(64, 243, 115)"></rect>
+      <path d="M545.9008885888209,103.79881521490563L637.6346168505189,103.79881521490563L637.6346168505189,195.53254347660373L87.23224728033016,195.53254347660373L87.23224728033016,200.88367762520315L71.94329257004713,200.88367762520315L71.94329257004713,210.82149818688674L41.36538314948109,210.82149818688674L41.36538314948109,119.08776992518864L530.6119338785378,119.08776992518864L530.6119338785378,116.18286853023574L545.9008885888209,116.18286853023574Z" fill="url(#plot-clip-356)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-4" x="41.36538314948109">
+        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <path d="M438.8782056168355,57.931951084069965L637.6346168505065,57.931951084069965L637.6346168505065,103.79881521491711L545.9008885888122,103.79881521491711L545.9008885888122,116.18286853024676L530.6119338785297,116.18286853024676L530.6119338785297,119.0877699251995L41.36538314949354,119.0877699251995L41.36538314949354,73.22090579435235L423.5892509065531,73.22090579435235L423.5892509065531,61.75418976164053L438.8782056168355,61.75418976164053Z" fill="url(#plot-clip-357)"></path>
-      <pattern width="15.288954710282383" height="15.288954710282383" patternUnits="userSpaceOnUse" y="379" id="plot-clip-5" x="41.36538314949354">
-        <rect x="0.5" y="0.5" width="14.288954710282383" height="14.288954710282383" fill="rgb(175, 240, 91)"></rect>
+      <path d="M438.87820561683964,57.93195108405655L637.6346168505189,57.93195108405655L637.6346168505189,103.79881521490563L545.9008885888209,103.79881521490563L545.9008885888209,116.18286853023574L530.6119338785378,116.18286853023574L530.6119338785378,119.08776992518864L41.36538314948109,119.08776992518864L41.36538314948109,73.22090579433956L423.58925090655663,73.22090579433956L423.58925090655663,61.75418976162729L438.87820561683964,61.75418976162729Z" fill="url(#plot-clip-357)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-5" x="41.36538314948109">
+        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path d="M316.5665679345764,12.065086953222817L637.6346168505065,12.065086953222817L637.6346168505065,57.931951084069965L438.8782056168355,57.931951084069965L438.8782056168355,61.75418976164053L423.5892509065531,61.75418976164053L423.5892509065531,73.22090579435235L41.36538314949354,73.22090579435235L41.36538314949354,27.3540416635052L301.27761322429404,27.3540416635052L301.27761322429404,22.6144657033185L316.5665679345764,22.6144657033185Z" fill="url(#plot-clip-358)"></path>
+      <path d="M316.56656793457546,12.06508695320747L637.6346168505189,12.06508695320747L637.6346168505189,57.93195108405655L438.87820561683964,57.93195108405655L438.87820561683964,61.75418976162729L423.58925090655663,61.75418976162729L423.58925090655663,73.22090579433956L41.36538314948109,73.22090579433956L41.36538314948109,27.354041663490477L301.27761322429245,27.354041663490477L301.27761322429245,22.61446570330361L316.56656793457546,22.61446570330361Z" fill="url(#plot-clip-358)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>

From d7b7a33905b8075b3c4baf1e5ca4a201bed1eb18 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Thu, 1 Aug 2024 22:36:53 -0400
Subject: [PATCH 12/22] rx, ry

---
 docs/marks/waffle.md |  2 +-
 src/marks/waffle.js  | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index 00b9fe5739..7cf08e258e 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -30,7 +30,7 @@ The waffle mark is often used in conjunction with the group transform.
 
 :::plot
 ```js
-Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: (d) => Math.floor(d.date_of_birth?.getUTCFullYear() / 10) * 10, unit: 10})).plot({round: true, x: {tickFormat: ""}})
+Plot.waffleY(olympians, Plot.groupX({y: "count"}, {fill: "sex", x: (d) => Math.floor(d.date_of_birth?.getUTCFullYear() / 10) * 10, unit: 10, rx: 10})).plot({round: true, x: {tickFormat: ""}})
 ```
 :::
 
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 3bc4abe10f..bd3670af05 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -13,7 +13,7 @@ export class WaffleX extends BarX {
     this.gap = +gap;
   }
   render(index, scales, channels, dimensions, context) {
-    const {unit, gap} = this;
+    const {unit, gap, rx, ry} = this;
     const {document} = context;
     const g = super.render(index, scales, channels, dimensions, context);
 
@@ -29,7 +29,7 @@ export class WaffleX extends BarX {
     // The outer size of each square cell, in pixels, including the gap.
     const cellsize = scale * columns;
 
-    // TODO rx, ry, insets?
+    // TODO insets?
     const X1 = channels.channels.x1.value;
     const X2 = channels.channels.x2.value;
     const ww = columns * cellsize;
@@ -46,6 +46,8 @@ export class WaffleX extends BarX {
     basePatternRect.setAttribute("y", gap / 2);
     basePatternRect.setAttribute("width", cellsize - gap);
     basePatternRect.setAttribute("height", cellsize - gap);
+    if (rx != null) basePatternRect.setAttribute("rx", rx);
+    if (ry != null) basePatternRect.setAttribute("ry", ry);
     for (const i of index) {
       const y0 = +rect.getAttribute("y") + wy;
       const fill = rect.getAttribute("fill");
@@ -90,7 +92,7 @@ export class WaffleY extends BarY {
     this.gap = +gap;
   }
   render(index, scales, channels, dimensions, context) {
-    const {unit, gap} = this;
+    const {unit, gap, rx, ry} = this;
     const {document} = context;
     const g = super.render(index, scales, channels, dimensions, context);
 
@@ -106,7 +108,7 @@ export class WaffleY extends BarY {
     // The outer size of each square cell, in pixels, including the gap.
     const cellsize = scale * columns;
 
-    // TODO rx, ry, insets?
+    // TODO insets?
     const Y1 = channels.channels.y1.value;
     const Y2 = channels.channels.y2.value;
     const ww = columns * cellsize;
@@ -123,6 +125,8 @@ export class WaffleY extends BarY {
     basePatternRect.setAttribute("y", gap / 2);
     basePatternRect.setAttribute("width", cellsize - gap);
     basePatternRect.setAttribute("height", cellsize - gap);
+    if (rx != null) basePatternRect.setAttribute("rx", rx);
+    if (ry != null) basePatternRect.setAttribute("ry", ry);
     for (const i of index) {
       const x0 = +rect.getAttribute("x") + wx;
       const fill = rect.getAttribute("fill");

From d636c9b2fdcb80f7453dd8355d8e172366f0168c Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 10:00:50 -0400
Subject: [PATCH 13/22] flip waffle orientation

---
 docs/marks/waffle.md                    | 43 +++++++++++++--
 src/marks/waffle.js                     | 71 +++++++++++++------------
 test/output/waffleShorthand.svg         | 12 ++---
 test/output/waffleShorthandNegative.svg | 12 ++---
 test/output/waffleX.svg                 | 10 ++--
 test/output/waffleXStacked.svg          | 10 ++--
 test/output/waffleY.svg                 | 10 ++--
 test/output/waffleYGrouped.svg          | 56 +++++++++----------
 test/output/waffleYStacked.html         | 10 ++--
 9 files changed, 136 insertions(+), 98 deletions(-)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index 7cf08e258e..06a23583a9 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -3,13 +3,19 @@
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 import {shallowRef, onMounted} from "vue";
-import alphabet from "../data/alphabet.ts";
 
 const olympians = shallowRef([
   {weight: 31, height: 1.21, sex: "female"},
   {weight: 170, height: 2.21, sex: "male"}
 ]);
 
+const survey = [
+  {question: "don’t go out after dark", yes: 96},
+  {question: "do no activities other than school", yes: 89},
+  {question: "engage in political discussion and social movements, including online", yes: 10},
+  {question: "would like to do activities but are prevented by safety concerns", yes: 73}
+];
+
 onMounted(() => {
   d3.csv("../data/athletes.csv", d3.autoType).then((data) => (olympians.value = data));
 });
@@ -18,7 +24,7 @@ onMounted(() => {
 
 # Waffle mark <VersionBadge pr="2040" />
 
-The **waffle mark** is similar to the [bar mark](./bar.md), but subdivides values into discrete square cells that are more easily counted.
+The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or two) for a given category; but unlike a bar, a waffle is subdivided into many square cells that allow discrete values to be more easily counted.
 
 :::plot
 ```js
@@ -30,12 +36,20 @@ The waffle mark is often used in conjunction with the group transform.
 
 :::plot
 ```js
-Plot.waffleY(olympians, Plot.groupX({y: "count"}, {fill: "sex", x: (d) => Math.floor(d.date_of_birth?.getUTCFullYear() / 10) * 10, unit: 10, rx: 10})).plot({round: true, x: {tickFormat: ""}})
+Plot.waffleY(olympians, Plot.groupX({y: "count"}, {fill: "sex", x: (d) => Math.floor(d.date_of_birth?.getUTCFullYear() / 10) * 10, unit: 10})).plot({round: true, x: {tickFormat: ""}})
 ```
 :::
 
 The waffle mark comes in two orientations: waffleY extends vertically↑, while waffleX extends horizontally→.
 
+Waffles use patterns and thus are dramatically more performant when rendering many points.
+
+:::plot
+```js
+Plot.waffleY(olympians, Plot.groupX({y: "count"}, {fill: "sex", x: "sex"})).plot()
+```
+:::
+
 Waffles typically used to represent countable integer values, such as people or days, though they can also encode fractional values with a partial first or last cell.
 
 :::plot
@@ -44,6 +58,29 @@ Plot.waffleY([1.5, 2, 32, 400, 5]).plot()
 ```
 :::
 
+Waffles representing proportion. Waffles with rounded corners.
+
+:::plot
+```js
+Plot.plot({
+  axis: null,
+  label: null,
+  height: 260,
+  marginTop: 20,
+  marginBottom: 80,
+  title: "Subdued",
+  subtitle: "Of 120 surveyed Syrian teenagers:",
+  caption: "A recreation of a chart in “Teens in Syria” published by The Economist on August 19, 2015.",
+  marks: [
+    Plot.axisFx({lineWidth: 10, anchor: "bottom", dy: 20}),
+    Plot.waffleY({length: 1}, {y: 120, fillOpacity: 0.4, rx: "100%"}),
+    Plot.waffleY(survey, {fx: "question", y: "yes", rx: "100%", fill: "orange"}),
+    Plot.text(survey, {fx: "question", text: (d) => (d.yes / 120).toLocaleString("en-US", {style: "percent"}), frameAnchor: "bottom", lineAnchor: "top", dy: 6, fill: "orange", fontSize: 24, fontWeight: "bold"}),
+  ]
+})
+```
+:::
+
 Waffles can be stacked.
 
 ## Waffle options
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index bd3670af05..dc97aa2ee7 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -164,56 +164,57 @@ export class WaffleY extends BarY {
   }
 }
 
-// A waffle is generally a rectangular shape, but may have one or two corner
-// cuts if the number of units in the starting or ending value of the waffle
-// is not an even multiple of the number of columns (the width of the waffle
-// in cells). We can represent any waffle by seven points. Below is a waffle
-// of five columns representing the interval 2–11:
+// A waffle is a approximately rectangular shape, but may have one or two corner
+// cuts if the starting or ending value is not an even multiple of the number of
+// columns (the width of the waffle in cells). We can represent any waffle by
+// 8 points; below is a waffle of five columns representing the interval 2–11:
 //
-//         0-1
-// 6-------7•|
+// 1-0
+// |•7-------6
 // |• • • • •|
-// |• • •3---2
-// 5-----4
+// 2---3• • •|
+//     4-----5
 //
-// Note that points 0 and 1 always have the same y-value, points 1 and 2
-// have the same x-value, and so on, so we don’t need to materialize the x-
-// and y-values of all points. Also note that we can’t use the already-
-// projected y-values because these assume that y-values are distributed
-// linearly along y rather than wrapping around in columns.
+// Note that points 0 and 1 always have the same y-value, points 1 and 2 have
+// the same x-value, and so on, so we don’t need to materialize the x- and y-
+// values of all points. Also note that we can’t use the already-projected y-
+// values because these assume that y-values are distributed linearly along y
+// rather than wrapping around in columns.
 //
-// The corner points may be coincident. If the ending value is an even
-// multiple of the number of columns, say representing the interval 2–10,
-// then points 6, 7, and 0 are the same.
+// The corner points may be coincident. If the ending value is an even multiple
+// of the number of columns, say representing the interval 2–10, then points 6,
+// 7, and 0 are the same.
 //
-// 6/7/0-----1
+// 1-----0/7/6
 // |• • • • •|
-// |• • •3---2
-// 5-----4
+// 2---3• • •|
+//     4-----5
 //
 // Likewise if the starting value is an even multiple, say representing the
 // interval 0–10, points 2–4 are coincident.
 //
-// 6/7/0-----1
+// 1-----0/7/6
 // |• • • • •|
 // |• • • • •|
-// 5-----2/3/4
+// 4/3/2-----5
 //
-// Waffles can also represent fractional intervals (e.g., 2.4–10.1).
+// Waffles can also represent fractional intervals (e.g., 2.4–10.1). These
+// require additional corner cuts, so the implementation below generates a few
+// more points.
 function wafflePoints(i1, i2, columns) {
   return [
-    [ceil(columns - (abs(i2) % columns)), ceil(i2 / columns)],
-    [columns, ceil(i2 / columns)],
-    [columns, ceil(i1 / columns)],
-    [ceil(columns - (abs(i1) % columns)), ceil(i1 / columns)],
-    [ceil(columns - (abs(i1) % columns)), floor(i1 / columns) + (i1 % 1)],
-    [floor(columns - (abs(i1) % columns)), floor(i1 / columns) + (i1 % 1)],
-    [floor(columns - (abs(i1) % columns)), floor(i1 / columns)],
-    [0, floor(i1 / columns)],
-    [0, floor(i2 / columns)],
-    [floor(columns - (abs(i2) % columns)), floor(i2 / columns)],
-    [floor(columns - (abs(i2) % columns)), floor(i2 / columns) + (i2 % 1)],
-    [ceil(columns - (abs(i2) % columns)), floor(i2 / columns) + (i2 % 1)]
+    [floor(abs(i2) % columns), ceil(i2 / columns)],
+    [0, ceil(i2 / columns)],
+    [0, ceil(i1 / columns)],
+    [floor(abs(i1) % columns), ceil(i1 / columns)],
+    [floor(abs(i1) % columns), floor(i1 / columns) + (i1 % 1)],
+    [ceil(abs(i1) % columns), floor(i1 / columns) + (i1 % 1)],
+    [ceil(abs(i1) % columns), floor(i1 / columns)],
+    [columns, floor(i1 / columns)],
+    [columns, floor(i2 / columns)],
+    [ceil(abs(i2) % columns), floor(i2 / columns)],
+    [ceil(abs(i2) % columns), floor(i2 / columns) + (i2 % 1)],
+    [floor(abs(i2) % columns), floor(i2 / columns) + (i2 % 1)]
   ];
 }
 
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index 290a22ecba..28a850c868 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -65,26 +65,26 @@
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="50.57575757575758">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M135.42424242424244,347.7878787878788L135.42424242424244,347.7878787878788L135.42424242424244,369L135.42424242424244,369L135.42424242424244,369L135.42424242424244,369L135.42424242424244,369L50.57575757575758,369L50.57575757575758,347.7878787878788L135.42424242424244,347.7878787878788L135.42424242424244,347.7878787878788L135.42424242424244,347.7878787878788Z" fill="url(#plot-clip-299)"></path>
+    <path d="M50.57575757575758,347.7878787878788L50.57575757575758,347.7878787878788L50.57575757575758,369L50.57575757575758,369L50.57575757575758,369L50.57575757575758,369L50.57575757575758,369L135.42424242424244,369L135.42424242424244,347.7878787878788L50.57575757575758,347.7878787878788L50.57575757575758,347.7878787878788L50.57575757575758,347.7878787878788Z" fill="url(#plot-clip-299)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="145.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M209.2121212121212,305.3636363636364L230.4242424242424,305.3636363636364L230.4242424242424,369L230.4242424242424,369L230.4242424242424,369L230.4242424242424,369L230.4242424242424,369L145.57575757575756,369L145.57575757575756,326.57575757575756L209.2121212121212,326.57575757575756L209.2121212121212,326.57575757575756L209.2121212121212,326.57575757575756Z" fill="url(#plot-clip-300)"></path>
+    <path d="M166.78787878787878,305.3636363636364L145.57575757575756,305.3636363636364L145.57575757575756,369L145.57575757575756,369L145.57575757575756,369L145.57575757575756,369L145.57575757575756,369L230.4242424242424,369L230.4242424242424,326.57575757575756L166.78787878787878,326.57575757575756L166.78787878787878,326.57575757575756L166.78787878787878,326.57575757575756Z" fill="url(#plot-clip-300)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="240.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M325.4242424242424,241.72727272727275L325.4242424242424,241.72727272727275L325.4242424242424,369L325.4242424242424,369L325.4242424242424,369L325.4242424242424,369L325.4242424242424,369L240.57575757575756,369L240.57575757575756,241.72727272727275L325.4242424242424,241.72727272727275L325.4242424242424,241.72727272727275L325.4242424242424,241.72727272727275Z" fill="url(#plot-clip-301)"></path>
+    <path d="M240.57575757575756,241.72727272727275L240.57575757575756,241.72727272727275L240.57575757575756,369L240.57575757575756,369L240.57575757575756,369L240.57575757575756,369L240.57575757575756,369L325.4242424242424,369L325.4242424242424,241.72727272727275L240.57575757575756,241.72727272727275L240.57575757575756,241.72727272727275L240.57575757575756,241.72727272727275Z" fill="url(#plot-clip-301)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="335.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M378,114.45454545454547L420.4242424242424,114.45454545454547L420.4242424242424,369L420.4242424242424,369L420.4242424242424,369L420.4242424242424,369L420.4242424242424,369L335.57575757575756,369L335.57575757575756,135.66666666666669L378,135.66666666666669L378,135.66666666666669L378,135.66666666666669Z" fill="url(#plot-clip-302)"></path>
+    <path d="M378,114.45454545454547L335.57575757575756,114.45454545454547L335.57575757575756,369L335.57575757575756,369L335.57575757575756,369L335.57575757575756,369L335.57575757575756,369L420.4242424242424,369L420.4242424242424,135.66666666666669L378,135.66666666666669L378,135.66666666666669L378,135.66666666666669Z" fill="url(#plot-clip-302)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="430.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M473,8.393939393939434L515.4242424242424,8.393939393939434L515.4242424242424,369L515.4242424242424,369L515.4242424242424,369L515.4242424242424,369L515.4242424242424,369L430.57575757575756,369L430.57575757575756,29.606060606060623L473,29.606060606060623L473,29.606060606060623L473,29.606060606060623Z" fill="url(#plot-clip-303)"></path>
+    <path d="M473,8.393939393939434L430.57575757575756,8.393939393939434L430.57575757575756,369L430.57575757575756,369L430.57575757575756,369L430.57575757575756,369L430.57575757575756,369L515.4242424242424,369L515.4242424242424,29.606060606060623L473,29.606060606060623L473,29.606060606060623L473,29.606060606060623Z" fill="url(#plot-clip-303)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="525.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M546.7878787878789,326.57575757575756L610.4242424242425,326.57575757575756L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L610.4242424242425,369L525.5757575757576,369L525.5757575757576,347.7878787878788L546.7878787878789,347.7878787878788L546.7878787878789,347.7878787878788L546.7878787878789,347.7878787878788Z" fill="url(#plot-clip-304)"></path>
+    <path d="M589.2121212121212,326.57575757575756L525.5757575757576,326.57575757575756L525.5757575757576,369L525.5757575757576,369L525.5757575757576,369L525.5757575757576,369L525.5757575757576,369L610.4242424242425,369L610.4242424242425,347.7878787878788L589.2121212121212,347.7878787878788L589.2121212121212,347.7878787878788L589.2121212121212,347.7878787878788Z" fill="url(#plot-clip-304)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
index 76a3a4714e..e0ddb0b166 100644
--- a/test/output/waffleShorthandNegative.svg
+++ b/test/output/waffleShorthandNegative.svg
@@ -65,26 +65,26 @@
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-1" x="50.57575757575758">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M135.42424242424244,50.21212121212121L135.42424242424244,50.21212121212121L135.42424242424244,29L135.42424242424244,29L135.42424242424244,29L135.42424242424244,29L135.42424242424244,29L50.57575757575758,29L50.57575757575758,50.21212121212121L135.42424242424244,50.21212121212121L135.42424242424244,50.21212121212121L135.42424242424244,50.21212121212121Z" fill="url(#plot-clip-305)"></path>
+    <path d="M50.57575757575758,50.21212121212121L50.57575757575758,50.21212121212121L50.57575757575758,29L50.57575757575758,29L50.57575757575758,29L50.57575757575758,29L50.57575757575758,29L135.42424242424244,29L135.42424242424244,50.21212121212121L50.57575757575758,50.21212121212121L50.57575757575758,50.21212121212121L50.57575757575758,50.21212121212121Z" fill="url(#plot-clip-305)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-2" x="145.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M209.2121212121212,92.63636363636363L230.4242424242424,92.63636363636363L230.4242424242424,29L230.4242424242424,29L230.4242424242424,29L230.4242424242424,29L230.4242424242424,29L145.57575757575756,29L145.57575757575756,71.42424242424242L209.2121212121212,71.42424242424242L209.2121212121212,71.42424242424242L209.2121212121212,71.42424242424242Z" fill="url(#plot-clip-306)"></path>
+    <path d="M166.78787878787878,92.63636363636363L145.57575757575756,92.63636363636363L145.57575757575756,29L145.57575757575756,29L145.57575757575756,29L145.57575757575756,29L145.57575757575756,29L230.4242424242424,29L230.4242424242424,71.42424242424242L166.78787878787878,71.42424242424242L166.78787878787878,71.42424242424242L166.78787878787878,71.42424242424242Z" fill="url(#plot-clip-306)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-3" x="240.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M325.4242424242424,156.27272727272725L325.4242424242424,156.27272727272725L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L325.4242424242424,29L240.57575757575756,29L240.57575757575756,156.27272727272725L325.4242424242424,156.27272727272725L325.4242424242424,156.27272727272725L325.4242424242424,156.27272727272725Z" fill="url(#plot-clip-307)"></path>
+    <path d="M240.57575757575756,156.27272727272725L240.57575757575756,156.27272727272725L240.57575757575756,29L240.57575757575756,29L240.57575757575756,29L240.57575757575756,29L240.57575757575756,29L325.4242424242424,29L325.4242424242424,156.27272727272725L240.57575757575756,156.27272727272725L240.57575757575756,156.27272727272725L240.57575757575756,156.27272727272725Z" fill="url(#plot-clip-307)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-4" x="335.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M378,283.5454545454545L420.4242424242424,283.5454545454545L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L420.4242424242424,29L335.57575757575756,29L335.57575757575756,262.3333333333333L378,262.3333333333333L378,262.3333333333333L378,262.3333333333333Z" fill="url(#plot-clip-308)"></path>
+    <path d="M378,283.5454545454545L335.57575757575756,283.5454545454545L335.57575757575756,29L335.57575757575756,29L335.57575757575756,29L335.57575757575756,29L335.57575757575756,29L420.4242424242424,29L420.4242424242424,262.3333333333333L378,262.3333333333333L378,262.3333333333333L378,262.3333333333333Z" fill="url(#plot-clip-308)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-5" x="430.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M473,389.60606060606057L515.4242424242424,389.60606060606057L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L515.4242424242424,29L430.57575757575756,29L430.57575757575756,368.3939393939394L473,368.3939393939394L473,368.3939393939394L473,368.3939393939394Z" fill="url(#plot-clip-309)"></path>
+    <path d="M473,389.60606060606057L430.57575757575756,389.60606060606057L430.57575757575756,29L430.57575757575756,29L430.57575757575756,29L430.57575757575756,29L430.57575757575756,29L515.4242424242424,29L515.4242424242424,368.3939393939394L473,368.3939393939394L473,368.3939393939394L473,368.3939393939394Z" fill="url(#plot-clip-309)"></path>
     <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-6" x="525.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
     </pattern>
-    <path d="M546.7878787878789,71.42424242424242L610.4242424242425,71.42424242424242L610.4242424242425,29L610.4242424242425,29L610.4242424242425,29L610.4242424242425,29L610.4242424242425,29L525.5757575757576,29L525.5757575757576,50.21212121212121L546.7878787878789,50.21212121212121L546.7878787878789,50.21212121212121L546.7878787878789,50.21212121212121Z" fill="url(#plot-clip-310)"></path>
+    <path d="M589.2121212121212,71.42424242424242L525.5757575757576,71.42424242424242L525.5757575757576,29L525.5757575757576,29L525.5757575757576,29L525.5757575757576,29L525.5757575757576,29L610.4242424242425,29L610.4242424242425,50.21212121212121L589.2121212121212,50.21212121212121L589.2121212121212,50.21212121212121L589.2121212121212,50.21212121212121Z" fill="url(#plot-clip-310)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index c55d9ebcd7..8aa120d2c3 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -49,23 +49,23 @@
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-1" y="35.426373845438235">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M375.03295900059805,40.808791281812745L375.03295900059805,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,51.573626154561765L79,35.426373845438235L369.65054156422354,35.426373845438235L369.65054156422354,35.426373845438235L373.2567612465944,35.426373845438235L373.2567612465944,40.808791281812745Z" fill="url(#plot-clip-311)"></path>
+    <path d="M375.03295900059805,46.191208718187255L375.03295900059805,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,51.573626154561765L369.65054156422354,51.573626154561765L369.65054156422354,51.573626154561765L373.2567612465944,51.573626154561765L373.2567612465944,46.191208718187255Z" fill="url(#plot-clip-311)"></path>
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-2" y="56.426373845438235">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M622.6241610738255,72.57362615456177L622.6241610738255,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,72.57362615456177L79,56.426373845438235L617.241743637451,56.426373845438235L617.241743637451,67.19120871818726L622.5165127250981,67.19120871818726L622.5165127250981,72.57362615456177Z" fill="url(#plot-clip-312)"></path>
+    <path d="M622.6241610738255,56.426373845438235L622.6241610738255,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,72.57362615456177L617.241743637451,72.57362615456177L617.241743637451,61.808791281812745L622.5165127250981,61.808791281812745L622.5165127250981,56.426373845438235Z" fill="url(#plot-clip-312)"></path>
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-3" y="77.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M445.0043856734667,82.80879128181274L445.0043856734667,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,93.57362615456177L79,77.42637384543823L439.6219682370922,77.42637384543823L439.6219682370922,77.42637384543823L442.52847365273436,77.42637384543823L442.52847365273436,82.80879128181274Z" fill="url(#plot-clip-313)"></path>
+    <path d="M445.0043856734667,88.19120871818726L445.0043856734667,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,93.57362615456177L439.6219682370922,93.57362615456177L439.6219682370922,93.57362615456177L442.52847365273436,93.57362615456177L442.52847365273436,88.19120871818726Z" fill="url(#plot-clip-313)"></path>
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-4" y="98.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M305.0615323277294,109.19120871818726L305.0615323277294,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,114.57362615456177L79,98.42637384543823L299.6791148913549,98.42637384543823L299.6791148913549,103.80879128181274L302.69326865572464,103.80879128181274L302.69326865572464,109.19120871818726Z" fill="url(#plot-clip-314)"></path>
+    <path d="M305.0615323277294,103.80879128181274L305.0615323277294,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,114.57362615456177L299.6791148913549,114.57362615456177L299.6791148913549,109.19120871818726L302.69326865572464,109.19120871818726L302.69326865572464,103.80879128181274Z" fill="url(#plot-clip-314)"></path>
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-5" y="119.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M305.0615323277294,130.19120871818726L305.0615323277294,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,135.57362615456177L79,119.42637384543823L299.6791148913549,119.42637384543823L299.6791148913549,124.80879128181274L302.69326865572464,124.80879128181274L302.69326865572464,130.19120871818726Z" fill="url(#plot-clip-315)"></path>
+    <path d="M305.0615323277294,124.80879128181274L305.0615323277294,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,135.57362615456177L299.6791148913549,135.57362615456177L299.6791148913549,130.19120871818726L302.69326865572464,130.19120871818726L302.69326865572464,124.80879128181274Z" fill="url(#plot-clip-315)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="80" x2="80" y1="30" y2="140"></line>
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
index 6f890ee180..4e235081b7 100644
--- a/test/output/waffleXStacked.svg
+++ b/test/output/waffleXStacked.svg
@@ -41,23 +41,23 @@
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-1" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M130.07360259607321,77.2315993509817L130.07360259607321,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,199.41256220666224L19,10.587437793337756L118.9662423364659,10.587437793337756L118.9662423364659,66.12423909137436L126.40817371040266,66.12423909137436L126.40817371040266,77.2315993509817Z" fill="url(#plot-clip-316)"></path>
+    <path d="M130.07360259607321,132.7684006490183L130.07360259607321,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,199.41256220666224L118.9662423364659,199.41256220666224L118.9662423364659,143.87576090862564L126.40817371040266,143.87576090862564L126.40817371040266,132.7684006490183Z" fill="url(#plot-clip-316)"></path>
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-2" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M330.00608726900504,132.7684006490183L330.00608726900504,199.41256220666224L130.07360259607321,199.41256220666224L130.07360259607321,77.2315993509817L126.40817371040266,77.2315993509817L126.40817371040266,66.12423909137436L118.9662423364659,66.12423909137436L118.9662423364659,10.587437793337756L318.8987270093977,10.587437793337756L318.8987270093977,121.66104038941097L326.1185111781422,121.66104038941097L326.1185111781422,132.7684006490183Z" fill="url(#plot-clip-317)"></path>
+    <path d="M330.00608726900504,77.2315993509817L330.00608726900504,10.587437793337756L130.07360259607321,10.587437793337756L130.07360259607321,132.7684006490183L126.40817371040266,132.7684006490183L126.40817371040266,143.87576090862564L118.9662423364659,143.87576090862564L118.9662423364659,199.41256220666224L318.8987270093977,199.41256220666224L318.8987270093977,88.33895961058901L326.1185111781422,88.33895961058901L326.1185111781422,77.2315993509817Z" fill="url(#plot-clip-317)"></path>
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-3" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M463.29441038429286,132.7684006490183L463.29441038429286,199.41256220666224L330.00608726900504,199.41256220666224L330.00608726900504,132.7684006490183L326.1185111781422,132.7684006490183L326.1185111781422,121.66104038941097L318.8987270093977,121.66104038941097L318.8987270093977,10.587437793337756L452.1870501246856,10.587437793337756L452.1870501246856,121.66104038941097L454.2974485740103,121.66104038941097L454.2974485740103,132.7684006490183Z" fill="url(#plot-clip-318)"></path>
+    <path d="M463.29441038429286,77.2315993509817L463.29441038429286,10.587437793337756L330.00608726900504,10.587437793337756L330.00608726900504,77.2315993509817L326.1185111781422,77.2315993509817L326.1185111781422,88.33895961058901L318.8987270093977,88.33895961058901L318.8987270093977,199.41256220666224L452.1870501246856,199.41256220666224L452.1870501246856,88.33895961058901L454.2974485740103,88.33895961058901L454.2974485740103,77.2315993509817Z" fill="url(#plot-clip-318)"></path>
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-4" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M541.0459322015441,77.2315993509817L541.0459322015441,199.41256220666224L463.29441038429286,199.41256220666224L463.29441038429286,132.7684006490183L454.2974485740103,132.7684006490183L454.2974485740103,121.66104038941097L452.1870501246856,121.66104038941097L452.1870501246856,10.587437793337756L529.9385719419367,10.587437793337756L529.9385719419367,66.12423909137436L538.2690921366423,66.12423909137436L538.2690921366423,77.2315993509817Z" fill="url(#plot-clip-319)"></path>
+    <path d="M541.0459322015441,132.7684006490183L541.0459322015441,10.587437793337756L463.29441038429286,10.587437793337756L463.29441038429286,77.2315993509817L454.2974485740103,77.2315993509817L454.2974485740103,88.33895961058901L452.1870501246856,88.33895961058901L452.1870501246856,199.41256220666224L529.9385719419367,199.41256220666224L529.9385719419367,143.87576090862564L538.2690921366423,143.87576090862564L538.2690921366423,132.7684006490183Z" fill="url(#plot-clip-319)"></path>
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-5" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M629.9048142784027,199.41256220666224L629.9048142784027,199.41256220666224L541.0459322015441,199.41256220666224L541.0459322015441,77.2315993509817L538.2690921366423,77.2315993509817L538.2690921366423,66.12423909137436L529.9385719419367,66.12423909137436L529.9385719419367,10.587437793337756L618.7974540187954,10.587437793337756L618.7974540187954,188.3052019470549L622.240735699273,188.3052019470549L622.240735699273,199.41256220666224Z" fill="url(#plot-clip-320)"></path>
+    <path d="M629.9048142784027,10.587437793337756L629.9048142784027,10.587437793337756L541.0459322015441,10.587437793337756L541.0459322015441,132.7684006490183L538.2690921366423,132.7684006490183L538.2690921366423,143.87576090862564L529.9385719419367,143.87576090862564L529.9385719419367,199.41256220666224L618.7974540187954,199.41256220666224L618.7974540187954,21.694798052945078L622.240735699273,21.694798052945078L622.240735699273,10.587437793337756Z" fill="url(#plot-clip-320)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="20" x2="20" y1="0" y2="210"></line>
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index de5ed60083..b0739feb18 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -67,23 +67,23 @@
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="56.90384743172304">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M130.1645292045983,170.14957804505283L151.09615256827698,170.14957804505283L151.09615256827698,369L151.09615256827698,369L151.09615256827698,369L151.09615256827698,369L151.09615256827698,369L56.90384743172304,369L56.90384743172304,180.61538972689215L119.69871752275898,180.61538972689215L119.69871752275898,173.60329590005995L130.1645292045983,173.60329590005995Z" fill="url(#plot-clip-321)"></path>
+    <path d="M77.83547079540169,170.14957804505283L56.90384743172304,170.14957804505283L56.90384743172304,369L56.90384743172304,369L56.90384743172304,369L56.90384743172304,369L56.90384743172304,369L151.09615256827698,369L151.09615256827698,180.61538972689215L88.30128247724102,180.61538972689215L88.30128247724102,173.60329590005995L77.83547079540169,173.60329590005995Z" fill="url(#plot-clip-321)"></path>
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="169.90384743172302">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M232.69871752275895,13.162402817462976L264.0961525682769,13.162402817462976L264.0961525682769,369L264.0961525682769,369L264.0961525682769,369L264.0961525682769,369L264.0961525682769,369L169.90384743172302,369L169.90384743172302,23.62821449930226L222.23290584091964,23.62821449930226L222.23290584091964,13.371719051099547L232.69871752275895,13.371719051099547Z" fill="url(#plot-clip-322)"></path>
+    <path d="M201.301282477241,13.162402817462976L169.90384743172302,13.162402817462976L169.90384743172302,369L169.90384743172302,369L169.90384743172302,369L169.90384743172302,369L169.90384743172302,369L264.0961525682769,369L264.0961525682769,23.62821449930226L211.76709415908033,23.62821449930226L211.76709415908033,13.371719051099547L201.301282477241,13.371719051099547Z" fill="url(#plot-clip-322)"></path>
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="282.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M324.76709415908033,128.28633131769553L377.0961525682769,128.28633131769553L377.0961525682769,369L377.0961525682769,369L377.0961525682769,369L377.0961525682769,369L377.0961525682769,369L282.903847431723,369L282.903847431723,138.75214299953484L314.301282477241,138.75214299953484L314.301282477241,133.1006046913417L324.76709415908033,133.1006046913417Z" fill="url(#plot-clip-323)"></path>
+    <path d="M335.23290584091967,128.28633131769553L282.903847431723,128.28633131769553L282.903847431723,369L282.903847431723,369L282.903847431723,369L282.903847431723,369L282.903847431723,369L377.0961525682769,369L377.0961525682769,138.75214299953484L345.69871752275895,138.75214299953484L345.69871752275895,133.1006046913417L335.23290584091967,133.1006046913417Z" fill="url(#plot-clip-323)"></path>
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="395.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M416.83547079540165,222.47863645424945L490.0961525682769,222.47863645424945L490.0961525682769,369L490.0961525682769,369L490.0961525682769,369L490.0961525682769,369L490.0961525682769,369L395.903847431723,369L395.903847431723,232.94444813608877L406.36965911356236,232.94444813608877L406.36965911356236,227.08359359425873L416.83547079540165,227.08359359425873Z" fill="url(#plot-clip-324)"></path>
+    <path d="M469.1645292045983,222.47863645424945L395.903847431723,222.47863645424945L395.903847431723,369L395.903847431723,369L395.903847431723,369L395.903847431723,369L395.903847431723,369L490.0961525682769,369L490.0961525682769,232.94444813608877L479.63034088643764,232.94444813608877L479.63034088643764,227.08359359425873L469.1645292045983,227.08359359425873Z" fill="url(#plot-clip-324)"></path>
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="508.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M529.8354707954016,222.47863645424945L603.0961525682769,222.47863645424945L603.0961525682769,369L603.0961525682769,369L603.0961525682769,369L603.0961525682769,369L603.0961525682769,369L508.903847431723,369L508.903847431723,232.94444813608877L519.3696591135623,232.94444813608877L519.3696591135623,227.08359359425873L529.8354707954016,227.08359359425873Z" fill="url(#plot-clip-325)"></path>
+    <path d="M582.1645292045982,222.47863645424945L508.903847431723,222.47863645424945L508.903847431723,369L508.903847431723,369L508.903847431723,369L508.903847431723,369L508.903847431723,369L603.0961525682769,369L603.0961525682769,232.94444813608877L592.6303408864376,232.94444813608877L592.6303408864376,227.08359359425873L582.1645292045982,227.08359359425873Z" fill="url(#plot-clip-325)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index af519cd96e..bf15d70cda 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -108,115 +108,115 @@
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="93.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M97.77824798984341,17.96318239526022L106.66525603046973,17.96318239526022L106.66525603046973,369L106.66525603046973,369L106.66525603046973,369L106.66525603046973,369L106.66525603046973,369L93.33474396953025,369L93.33474396953025,22.406686415573404L93.33474396953025,22.406686415573404L93.33474396953025,21.07363520947939L97.77824798984341,21.07363520947939Z" fill="url(#plot-clip-326)"></path>
+    <path d="M102.22175201015658,17.96318239526022L93.33474396953025,17.96318239526022L93.33474396953025,369L93.33474396953025,369L93.33474396953025,369L93.33474396953025,369L93.33474396953025,369L106.66525603046973,369L106.66525603046973,22.406686415573404L106.66525603046973,22.406686415573404L106.66525603046973,21.07363520947939L102.22175201015658,21.07363520947939Z" fill="url(#plot-clip-326)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="233.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M246.66525603046975,329.00846381718156L246.66525603046975,329.00846381718156L246.66525603046975,369L246.66525603046975,369L246.66525603046975,369L246.66525603046975,369L246.66525603046975,369L233.33474396953025,369L233.33474396953025,333.4519678374947L242.22175201015656,333.4519678374947L242.22175201015656,330.7858654253068L246.66525603046975,330.7858654253068Z" fill="url(#plot-clip-327)"></path>
+    <path d="M233.33474396953025,329.00846381718156L233.33474396953025,329.00846381718156L233.33474396953025,369L233.33474396953025,369L233.33474396953025,369L233.33474396953025,369L233.33474396953025,369L246.66525603046975,369L246.66525603046975,333.4519678374947L237.7782479898434,333.4519678374947L237.7782479898434,330.7858654253068L233.33474396953025,330.7858654253068Z" fill="url(#plot-clip-327)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="493.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M506.6652560304698,346.7824798984342L506.6652560304698,346.7824798984342L506.6652560304698,369L506.6652560304698,369L506.6652560304698,369L506.6652560304698,369L506.6652560304698,369L493.3347439695303,369L493.3347439695303,351.2259839187474L502.2217520101566,351.2259839187474L502.2217520101566,347.6711807024968L506.6652560304698,347.6711807024968Z" fill="url(#plot-clip-328)"></path>
+    <path d="M493.3347439695303,346.7824798984342L493.3347439695303,346.7824798984342L493.3347439695303,369L493.3347439695303,369L493.3347439695303,369L493.3347439695303,369L493.3347439695303,369L506.6652560304698,369L506.6652560304698,351.2259839187474L497.77824798984346,351.2259839187474L497.77824798984346,347.6711807024968L493.3347439695303,347.6711807024968Z" fill="url(#plot-clip-328)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="193.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M202.22175201015656,289.01692763436307L206.66525603046975,289.01692763436307L206.66525603046975,369L206.66525603046975,369L206.66525603046975,369L206.66525603046975,369L206.66525603046975,369L193.33474396953025,369L193.33474396953025,293.46043165467626L197.7782479898434,293.46043165467626L197.7782479898434,291.23867964451966L202.22175201015656,291.23867964451966Z" fill="url(#plot-clip-329)"></path>
+    <path d="M197.7782479898434,289.01692763436307L193.33474396953025,289.01692763436307L193.33474396953025,369L193.33474396953025,369L193.33474396953025,369L193.33474396953025,369L193.33474396953025,369L206.66525603046975,369L206.66525603046975,293.46043165467626L202.22175201015656,293.46043165467626L202.22175201015656,291.23867964451966L197.7782479898434,291.23867964451966Z" fill="url(#plot-clip-329)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="533.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M537.7782479898434,351.2259839187474L546.6652560304697,351.2259839187474L546.6652560304697,369L546.6652560304697,369L546.6652560304697,369L546.6652560304697,369L546.6652560304697,369L533.3347439695302,369L533.3347439695302,355.6694879390605L537.7782479898434,355.6694879390605L537.7782479898434,355.6694879390605L537.7782479898434,355.6694879390605Z" fill="url(#plot-clip-330)"></path>
+    <path d="M542.2217520101566,351.2259839187474L533.3347439695302,351.2259839187474L533.3347439695302,369L533.3347439695302,369L533.3347439695302,369L533.3347439695302,369L533.3347439695302,369L546.6652560304697,369L546.6652560304697,355.6694879390605L542.2217520101566,355.6694879390605L542.2217520101566,355.6694879390605L542.2217520101566,355.6694879390605Z" fill="url(#plot-clip-330)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="553.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M557.7782479898434,311.2344477359289L566.6652560304697,311.2344477359289L566.6652560304697,369L566.6652560304697,369L566.6652560304697,369L566.6652560304697,369L566.6652560304697,369L553.3347439695302,369L553.3347439695302,315.67795175624207L553.3347439695302,315.67795175624207L553.3347439695302,313.9005501481168L557.7782479898434,313.9005501481168Z" fill="url(#plot-clip-331)"></path>
+    <path d="M562.2217520101566,311.2344477359289L553.3347439695302,311.2344477359289L553.3347439695302,369L553.3347439695302,369L553.3347439695302,369L553.3347439695302,369L553.3347439695302,369L566.6652560304697,369L566.6652560304697,315.67795175624207L566.6652560304697,315.67795175624207L566.6652560304697,313.9005501481168L562.2217520101566,313.9005501481168Z" fill="url(#plot-clip-331)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-7" x="53.33474396953026">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M66.66525603046975,151.26830300465508L66.66525603046975,151.26830300465508L66.66525603046975,369L66.66525603046975,369L66.66525603046975,369L66.66525603046975,369L66.66525603046975,369L53.33474396953026,369L53.33474396953026,155.71180702496824L62.22175201015658,155.71180702496824L62.22175201015658,153.49005501481165L66.66525603046975,153.49005501481165Z" fill="url(#plot-clip-332)"></path>
+    <path d="M53.33474396953026,151.26830300465508L53.33474396953026,151.26830300465508L53.33474396953026,369L53.33474396953026,369L53.33474396953026,369L53.33474396953026,369L53.33474396953026,369L66.66525603046975,369L66.66525603046975,155.71180702496824L57.77824798984342,155.71180702496824L57.77824798984342,153.49005501481165L53.33474396953026,153.49005501481165Z" fill="url(#plot-clip-332)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-8" x="413.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M426.6652560304698,324.5649597968684L426.6652560304698,324.5649597968684L426.6652560304698,369L426.6652560304698,369L426.6652560304698,369L426.6652560304698,369L426.6652560304698,369L413.3347439695303,369L413.3347439695303,324.5649597968684L426.6652560304698,324.5649597968684L426.6652560304698,324.5649597968684L426.6652560304698,324.5649597968684Z" fill="url(#plot-clip-333)"></path>
+    <path d="M413.3347439695303,324.5649597968684L413.3347439695303,324.5649597968684L413.3347439695303,369L413.3347439695303,369L413.3347439695303,369L413.3347439695303,369L413.3347439695303,369L426.6652560304698,369L426.6652560304698,324.5649597968684L413.3347439695303,324.5649597968684L413.3347439695303,324.5649597968684L413.3347439695303,324.5649597968684Z" fill="url(#plot-clip-333)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-9" x="593.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M597.7782479898434,315.67795175624207L606.6652560304697,315.67795175624207L606.6652560304697,369L606.6652560304697,369L606.6652560304697,369L606.6652560304697,369L606.6652560304697,369L593.3347439695302,369L593.3347439695302,320.1214557765552L593.3347439695302,320.1214557765552L593.3347439695302,318.7884045704613L597.7782479898434,318.7884045704613Z" fill="url(#plot-clip-334)"></path>
+    <path d="M602.2217520101566,315.67795175624207L593.3347439695302,315.67795175624207L593.3347439695302,369L593.3347439695302,369L593.3347439695302,369L593.3347439695302,369L593.3347439695302,369L606.6652560304697,369L606.6652560304697,320.1214557765552L606.6652560304697,320.1214557765552L606.6652560304697,318.7884045704613L602.2217520101566,318.7884045704613Z" fill="url(#plot-clip-334)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-10" x="253.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M262.2217520101566,275.6864155734236L266.6652560304697,275.6864155734236L266.6652560304697,369L266.6652560304697,369L266.6652560304697,369L266.6652560304697,369L266.6652560304697,369L253.33474396953025,369L253.33474396953025,280.12991959373676L257.7782479898434,280.12991959373676L257.7782479898434,279.68556919170544L262.2217520101566,279.68556919170544Z" fill="url(#plot-clip-335)"></path>
+    <path d="M257.7782479898434,275.6864155734236L253.33474396953025,275.6864155734236L253.33474396953025,369L253.33474396953025,369L253.33474396953025,369L253.33474396953025,369L253.33474396953025,369L266.6652560304697,369L266.6652560304697,280.12991959373676L262.2217520101566,280.12991959373676L262.2217520101566,279.68556919170544L257.7782479898434,279.68556919170544Z" fill="url(#plot-clip-335)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-11" x="453.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M466.6652560304698,311.2344477359289L466.6652560304698,311.2344477359289L466.6652560304698,369L466.6652560304698,369L466.6652560304698,369L466.6652560304698,369L466.6652560304698,369L453.3347439695303,369L453.3347439695303,311.2344477359289L466.6652560304698,311.2344477359289L466.6652560304698,311.2344477359289L466.6652560304698,311.2344477359289Z" fill="url(#plot-clip-336)"></path>
+    <path d="M453.3347439695303,311.2344477359289L453.3347439695303,311.2344477359289L453.3347439695303,369L453.3347439695303,369L453.3347439695303,369L453.3347439695303,369L453.3347439695303,369L466.6652560304698,369L466.6652560304698,311.2344477359289L453.3347439695303,311.2344477359289L453.3347439695303,311.2344477359289L453.3347439695303,311.2344477359289Z" fill="url(#plot-clip-336)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-12" x="153.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M162.22175201015656,324.5649597968684L166.66525603046975,324.5649597968684L166.66525603046975,369L166.66525603046975,369L166.66525603046975,369L166.66525603046975,369L166.66525603046975,369L153.33474396953025,369L153.33474396953025,329.00846381718156L157.7782479898434,329.00846381718156L157.7782479898434,326.34236140499365L162.22175201015656,326.34236140499365Z" fill="url(#plot-clip-337)"></path>
+    <path d="M157.7782479898434,324.5649597968684L153.33474396953025,324.5649597968684L153.33474396953025,369L153.33474396953025,369L153.33474396953025,369L153.33474396953025,369L153.33474396953025,369L166.66525603046975,369L166.66525603046975,329.00846381718156L162.22175201015656,329.00846381718156L162.22175201015656,326.34236140499365L157.7782479898434,326.34236140499365Z" fill="url(#plot-clip-337)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-13" x="213.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M222.22175201015656,333.4519678374947L226.66525603046975,333.4519678374947L226.66525603046975,369L226.66525603046975,369L226.66525603046975,369L226.66525603046975,369L226.66525603046975,369L213.33474396953025,369L213.33474396953025,337.8954718578079L217.7782479898434,337.8954718578079L217.7782479898434,337.00677105374524L222.22175201015656,337.00677105374524Z" fill="url(#plot-clip-338)"></path>
+    <path d="M217.7782479898434,333.4519678374947L213.33474396953025,333.4519678374947L213.33474396953025,369L213.33474396953025,369L213.33474396953025,369L213.33474396953025,369L213.33474396953025,369L226.66525603046975,369L226.66525603046975,337.8954718578079L222.22175201015656,337.8954718578079L222.22175201015656,337.00677105374524L217.7782479898434,337.00677105374524Z" fill="url(#plot-clip-338)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-14" x="393.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M406.6652560304698,284.57342361404994L406.6652560304698,284.57342361404994L406.6652560304698,369L406.6652560304698,369L406.6652560304698,369L406.6652560304698,369L406.6652560304698,369L393.3347439695303,369L393.3347439695303,289.01692763436307L402.2217520101566,289.01692763436307L402.2217520101566,285.90647482014384L406.6652560304698,285.90647482014384Z" fill="url(#plot-clip-339)"></path>
+    <path d="M393.3347439695303,284.57342361404994L393.3347439695303,284.57342361404994L393.3347439695303,369L393.3347439695303,369L393.3347439695303,369L393.3347439695303,369L393.3347439695303,369L406.6652560304698,369L406.6652560304698,289.01692763436307L397.77824798984346,289.01692763436307L397.77824798984346,285.90647482014384L393.3347439695303,285.90647482014384Z" fill="url(#plot-clip-339)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-15" x="353.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M366.6652560304698,306.79094371561575L366.6652560304698,306.79094371561575L366.6652560304698,369L366.6652560304698,369L366.6652560304698,369L366.6652560304698,369L366.6652560304698,369L353.3347439695303,369L353.3347439695303,311.2344477359289L362.2217520101566,311.2344477359289L362.2217520101566,310.34574693186624L366.6652560304698,310.34574693186624Z" fill="url(#plot-clip-340)"></path>
+    <path d="M353.3347439695303,306.79094371561575L353.3347439695303,306.79094371561575L353.3347439695303,369L353.3347439695303,369L353.3347439695303,369L353.3347439695303,369L353.3347439695303,369L366.6652560304698,369L366.6652560304698,311.2344477359289L357.77824798984346,311.2344477359289L357.77824798984346,310.34574693186624L353.3347439695303,310.34574693186624Z" fill="url(#plot-clip-340)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-16" x="313.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M326.6652560304698,311.2344477359289L326.6652560304698,311.2344477359289L326.6652560304698,369L326.6652560304698,369L326.6652560304698,369L326.6652560304698,369L326.6652560304698,369L313.3347439695303,369L313.3347439695303,315.67795175624207L322.2217520101566,315.67795175624207L322.2217520101566,314.3449005501481L326.6652560304698,314.3449005501481Z" fill="url(#plot-clip-341)"></path>
+    <path d="M313.3347439695303,311.2344477359289L313.3347439695303,311.2344477359289L313.3347439695303,369L313.3347439695303,369L313.3347439695303,369L313.3347439695303,369L313.3347439695303,369L326.6652560304698,369L326.6652560304698,315.67795175624207L317.77824798984346,315.67795175624207L317.77824798984346,314.3449005501481L313.3347439695303,314.3449005501481Z" fill="url(#plot-clip-341)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-17" x="113.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M117.77824798984341,342.338975878121L126.66525603046973,342.338975878121L126.66525603046973,369L126.66525603046973,369L126.66525603046973,369L126.66525603046973,369L126.66525603046973,369L113.33474396953025,369L113.33474396953025,346.7824798984342L113.33474396953025,346.7824798984342L113.33474396953025,345.89377909437155L117.77824798984341,345.89377909437155Z" fill="url(#plot-clip-342)"></path>
+    <path d="M122.22175201015658,342.338975878121L113.33474396953025,342.338975878121L113.33474396953025,369L113.33474396953025,369L113.33474396953025,369L113.33474396953025,369L113.33474396953025,369L126.66525603046973,369L126.66525603046973,346.7824798984342L126.66525603046973,346.7824798984342L126.66525603046973,345.89377909437155L122.22175201015658,345.89377909437155Z" fill="url(#plot-clip-342)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-18" x="333.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M342.2217520101566,302.34743969530257L346.6652560304698,302.34743969530257L346.6652560304698,369L346.6652560304698,369L346.6652560304698,369L346.6652560304698,369L346.6652560304698,369L333.3347439695303,369L333.3347439695303,306.79094371561575L337.77824798984346,306.79094371561575L337.77824798984346,305.9022429115531L342.2217520101566,305.9022429115531Z" fill="url(#plot-clip-343)"></path>
+    <path d="M337.77824798984346,302.34743969530257L333.3347439695303,302.34743969530257L333.3347439695303,369L333.3347439695303,369L333.3347439695303,369L333.3347439695303,369L333.3347439695303,369L346.6652560304698,369L346.6652560304698,306.79094371561575L342.2217520101566,306.79094371561575L342.2217520101566,305.9022429115531L337.77824798984346,305.9022429115531Z" fill="url(#plot-clip-343)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-19" x="373.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M382.2217520101566,355.6694879390605L386.6652560304698,355.6694879390605L386.6652560304698,369L386.6652560304698,369L386.6652560304698,369L386.6652560304698,369L386.6652560304698,369L373.3347439695303,369L373.3347439695303,360.1129919593737L377.77824798984346,360.1129919593737L377.77824798984346,359.22429115531105L382.2217520101566,359.22429115531105Z" fill="url(#plot-clip-344)"></path>
+    <path d="M377.77824798984346,355.6694879390605L373.3347439695303,355.6694879390605L373.3347439695303,369L373.3347439695303,369L373.3347439695303,369L373.3347439695303,369L373.3347439695303,369L386.6652560304698,369L386.6652560304698,360.1129919593737L382.2217520101566,360.1129919593737L382.2217520101566,359.22429115531105L377.77824798984346,359.22429115531105Z" fill="url(#plot-clip-344)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-20" x="473.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M477.77824798984346,342.338975878121L486.6652560304698,342.338975878121L486.6652560304698,369L486.6652560304698,369L486.6652560304698,369L486.6652560304698,369L486.6652560304698,369L473.3347439695303,369L473.3347439695303,346.7824798984342L473.3347439695303,346.7824798984342L473.3347439695303,345.89377909437155L477.77824798984346,345.89377909437155Z" fill="url(#plot-clip-345)"></path>
+    <path d="M482.2217520101566,342.338975878121L473.3347439695303,342.338975878121L473.3347439695303,369L473.3347439695303,369L473.3347439695303,369L473.3347439695303,369L473.3347439695303,369L486.6652560304698,369L486.6652560304698,346.7824798984342L486.6652560304698,346.7824798984342L486.6652560304698,345.89377909437155L482.2217520101566,345.89377909437155Z" fill="url(#plot-clip-345)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-21" x="173.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M186.66525603046975,315.67795175624207L186.66525603046975,315.67795175624207L186.66525603046975,369L186.66525603046975,369L186.66525603046975,369L186.66525603046975,369L186.66525603046975,369L173.33474396953025,369L173.33474396953025,320.1214557765552L182.22175201015656,320.1214557765552L182.22175201015656,319.6771053745239L186.66525603046975,319.6771053745239Z" fill="url(#plot-clip-346)"></path>
+    <path d="M173.33474396953025,315.67795175624207L173.33474396953025,315.67795175624207L173.33474396953025,369L173.33474396953025,369L173.33474396953025,369L173.33474396953025,369L173.33474396953025,369L186.66525603046975,369L186.66525603046975,320.1214557765552L177.7782479898434,320.1214557765552L177.7782479898434,319.6771053745239L173.33474396953025,319.6771053745239Z" fill="url(#plot-clip-346)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-22" x="133.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M142.22175201015656,324.5649597968684L146.66525603046975,324.5649597968684L146.66525603046975,369L146.66525603046975,369L146.66525603046975,369L146.66525603046975,369L146.66525603046975,369L133.33474396953025,369L133.33474396953025,329.00846381718156L137.7782479898434,329.00846381718156L137.7782479898434,325.453660600931L142.22175201015656,325.453660600931Z" fill="url(#plot-clip-347)"></path>
+    <path d="M137.7782479898434,324.5649597968684L133.33474396953025,324.5649597968684L133.33474396953025,369L133.33474396953025,369L133.33474396953025,369L133.33474396953025,369L133.33474396953025,369L146.66525603046975,369L146.66525603046975,329.00846381718156L142.22175201015656,329.00846381718156L142.22175201015656,325.453660600931L137.7782479898434,325.453660600931Z" fill="url(#plot-clip-347)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-23" x="273.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M286.6652560304698,351.2259839187474L286.6652560304698,351.2259839187474L286.6652560304698,369L286.6652560304698,369L286.6652560304698,369L286.6652560304698,369L286.6652560304698,369L273.3347439695303,369L273.3347439695303,351.2259839187474L286.6652560304698,351.2259839187474L286.6652560304698,351.2259839187474L286.6652560304698,351.2259839187474Z" fill="url(#plot-clip-348)"></path>
+    <path d="M273.3347439695303,351.2259839187474L273.3347439695303,351.2259839187474L273.3347439695303,369L273.3347439695303,369L273.3347439695303,369L273.3347439695303,369L273.3347439695303,369L286.6652560304698,369L286.6652560304698,351.2259839187474L273.3347439695303,351.2259839187474L273.3347439695303,351.2259839187474L273.3347439695303,351.2259839187474Z" fill="url(#plot-clip-348)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-24" x="73.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M86.66525603046973,346.7824798984342L86.66525603046973,346.7824798984342L86.66525603046973,369L86.66525603046973,369L86.66525603046973,369L86.66525603046973,369L86.66525603046973,369L73.33474396953025,369L73.33474396953025,351.2259839187474L82.22175201015658,351.2259839187474L82.22175201015658,347.6711807024968L86.66525603046973,347.6711807024968Z" fill="url(#plot-clip-349)"></path>
+    <path d="M73.33474396953025,346.7824798984342L73.33474396953025,346.7824798984342L73.33474396953025,369L73.33474396953025,369L73.33474396953025,369L73.33474396953025,369L73.33474396953025,369L86.66525603046973,369L86.66525603046973,351.2259839187474L77.77824798984341,351.2259839187474L77.77824798984341,347.6711807024968L73.33474396953025,347.6711807024968Z" fill="url(#plot-clip-349)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-25" x="573.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M582.2217520101566,329.00846381718156L586.6652560304697,329.00846381718156L586.6652560304697,369L586.6652560304697,369L586.6652560304697,369L586.6652560304697,369L586.6652560304697,369L573.3347439695302,369L573.3347439695302,333.4519678374947L577.7782479898434,333.4519678374947L577.7782479898434,329.8971646212442L582.2217520101566,329.8971646212442Z" fill="url(#plot-clip-350)"></path>
+    <path d="M577.7782479898434,329.00846381718156L573.3347439695302,329.00846381718156L573.3347439695302,369L573.3347439695302,369L573.3347439695302,369L573.3347439695302,369L573.3347439695302,369L586.6652560304697,369L586.6652560304697,333.4519678374947L582.2217520101566,333.4519678374947L582.2217520101566,329.8971646212442L577.7782479898434,329.8971646212442Z" fill="url(#plot-clip-350)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-26" x="433.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M437.77824798984346,311.2344477359289L446.6652560304698,311.2344477359289L446.6652560304698,369L446.6652560304698,369L446.6652560304698,369L446.6652560304698,369L446.6652560304698,369L433.3347439695303,369L433.3347439695303,315.67795175624207L437.77824798984346,315.67795175624207L437.77824798984346,315.67795175624207L437.77824798984346,315.67795175624207Z" fill="url(#plot-clip-351)"></path>
+    <path d="M442.2217520101566,311.2344477359289L433.3347439695303,311.2344477359289L433.3347439695303,369L433.3347439695303,369L433.3347439695303,369L433.3347439695303,369L433.3347439695303,369L446.6652560304698,369L446.6652560304698,315.67795175624207L442.2217520101566,315.67795175624207L442.2217520101566,315.67795175624207L442.2217520101566,315.67795175624207Z" fill="url(#plot-clip-351)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-27" x="513.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M522.2217520101566,337.8954718578079L526.6652560304697,337.8954718578079L526.6652560304697,369L526.6652560304697,369L526.6652560304697,369L526.6652560304697,369L526.6652560304697,369L513.3347439695302,369L513.3347439695302,342.338975878121L517.7782479898434,342.338975878121L517.7782479898434,339.67287346593315L522.2217520101566,339.67287346593315Z" fill="url(#plot-clip-352)"></path>
+    <path d="M517.7782479898434,337.8954718578079L513.3347439695302,337.8954718578079L513.3347439695302,369L513.3347439695302,369L513.3347439695302,369L513.3347439695302,369L513.3347439695302,369L526.6652560304697,369L526.6652560304697,342.338975878121L522.2217520101566,342.338975878121L522.2217520101566,339.67287346593315L517.7782479898434,339.67287346593315Z" fill="url(#plot-clip-352)"></path>
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-28" x="293.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
     </pattern>
-    <path d="M297.77824798984346,320.1214557765552L306.6652560304698,320.1214557765552L306.6652560304698,369L306.6652560304698,369L306.6652560304698,369L306.6652560304698,369L306.6652560304698,369L293.3347439695303,369L293.3347439695303,324.5649597968684L293.3347439695303,324.5649597968684L293.3347439695303,322.7875581887431L297.77824798984346,322.7875581887431Z" fill="url(#plot-clip-353)"></path>
+    <path d="M302.2217520101566,320.1214557765552L293.3347439695303,320.1214557765552L293.3347439695303,369L293.3347439695303,369L293.3347439695303,369L293.3347439695303,369L293.3347439695303,369L306.6652560304698,369L306.6652560304698,324.5649597968684L306.6652560304698,324.5649597968684L306.6652560304698,322.7875581887431L302.2217520101566,322.7875581887431Z" fill="url(#plot-clip-353)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 6e9bdfd447..c2ca6c5f30 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -78,23 +78,23 @@
       <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-1" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <path d="M515.3229791682547,302.5552264485849L637.6346168505189,302.5552264485849L637.6346168505189,379L637.6346168505189,379L637.6346168505189,379L637.6346168505189,379L637.6346168505189,379L41.36538314948109,379L41.36538314948109,317.8441811588679L500.0340244579718,317.8441811588679L500.0340244579718,307.60058150297846L515.3229791682547,307.60058150297846Z" fill="url(#plot-clip-354)"></path>
+      <path d="M163.67702083174527,302.5552264485849L41.36538314948109,302.5552264485849L41.36538314948109,379L41.36538314948109,379L41.36538314948109,379L41.36538314948109,379L41.36538314948109,379L637.6346168505189,379L637.6346168505189,317.8441811588679L178.96597554202827,317.8441811588679L178.96597554202827,307.60058150297846L163.67702083174527,307.60058150297846Z" fill="url(#plot-clip-354)"></path>
       <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-2" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <path d="M87.23224728033016,195.53254347660373L637.6346168505189,195.53254347660373L637.6346168505189,302.5552264485849L515.3229791682547,302.5552264485849L515.3229791682547,307.60058150297846L500.0340244579718,307.60058150297846L500.0340244579718,317.8441811588679L41.36538314948109,317.8441811588679L41.36538314948109,210.82149818688674L71.94329257004713,210.82149818688674L71.94329257004713,200.88367762520315L87.23224728033016,200.88367762520315Z" fill="url(#plot-clip-355)"></path>
+      <path d="M591.7677527196698,195.53254347660373L41.36538314948109,195.53254347660373L41.36538314948109,302.5552264485849L163.67702083174527,302.5552264485849L163.67702083174527,307.60058150297846L178.96597554202827,307.60058150297846L178.96597554202827,317.8441811588679L637.6346168505189,317.8441811588679L637.6346168505189,210.82149818688674L607.0567074299529,210.82149818688674L607.0567074299529,200.88367762520315L591.7677527196698,200.88367762520315Z" fill="url(#plot-clip-355)"></path>
       <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-3" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <path d="M545.9008885888209,103.79881521490563L637.6346168505189,103.79881521490563L637.6346168505189,195.53254347660373L87.23224728033016,195.53254347660373L87.23224728033016,200.88367762520315L71.94329257004713,200.88367762520315L71.94329257004713,210.82149818688674L41.36538314948109,210.82149818688674L41.36538314948109,119.08776992518864L530.6119338785378,119.08776992518864L530.6119338785378,116.18286853023574L545.9008885888209,116.18286853023574Z" fill="url(#plot-clip-356)"></path>
+      <path d="M133.09911141117922,103.79881521490563L41.36538314948109,103.79881521490563L41.36538314948109,195.53254347660373L591.7677527196698,195.53254347660373L591.7677527196698,200.88367762520315L607.0567074299529,200.88367762520315L607.0567074299529,210.82149818688674L637.6346168505189,210.82149818688674L637.6346168505189,119.08776992518864L148.38806612146226,119.08776992518864L148.38806612146226,116.18286853023574L133.09911141117922,116.18286853023574Z" fill="url(#plot-clip-356)"></path>
       <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-4" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <path d="M438.87820561683964,57.93195108405655L637.6346168505189,57.93195108405655L637.6346168505189,103.79881521490563L545.9008885888209,103.79881521490563L545.9008885888209,116.18286853023574L530.6119338785378,116.18286853023574L530.6119338785378,119.08776992518864L41.36538314948109,119.08776992518864L41.36538314948109,73.22090579433956L423.58925090655663,73.22090579433956L423.58925090655663,61.75418976162729L438.87820561683964,61.75418976162729Z" fill="url(#plot-clip-357)"></path>
+      <path d="M240.12179438316036,57.93195108405655L41.36538314948109,57.93195108405655L41.36538314948109,103.79881521490563L133.09911141117922,103.79881521490563L133.09911141117922,116.18286853023574L148.38806612146226,116.18286853023574L148.38806612146226,119.08776992518864L637.6346168505189,119.08776992518864L637.6346168505189,73.22090579433956L255.4107490934434,73.22090579433956L255.4107490934434,61.75418976162729L240.12179438316036,61.75418976162729Z" fill="url(#plot-clip-357)"></path>
       <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-5" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path d="M316.56656793457546,12.06508695320747L637.6346168505189,12.06508695320747L637.6346168505189,57.93195108405655L438.87820561683964,57.93195108405655L438.87820561683964,61.75418976162729L423.58925090655663,61.75418976162729L423.58925090655663,73.22090579433956L41.36538314948109,73.22090579433956L41.36538314948109,27.354041663490477L301.27761322429245,27.354041663490477L301.27761322429245,22.61446570330361L316.56656793457546,22.61446570330361Z" fill="url(#plot-clip-358)"></path>
+      <path d="M362.43343206542454,12.06508695320747L41.36538314948109,12.06508695320747L41.36538314948109,57.93195108405655L240.12179438316036,57.93195108405655L240.12179438316036,61.75418976162729L255.4107490934434,61.75418976162729L255.4107490934434,73.22090579433956L637.6346168505189,73.22090579433956L637.6346168505189,27.354041663490477L377.7223867757076,27.354041663490477L377.7223867757076,22.61446570330361L362.43343206542454,22.61446570330361Z" fill="url(#plot-clip-358)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>

From f2a4ce579c1c036d095f2d622fd5d939942ece58 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 12:10:49 -0400
Subject: [PATCH 14/22] more docs; round option

---
 docs/marks/waffle.md  | 77 +++++++++++++++++++++++++++++++++++--------
 src/marks/waffle.d.ts |  2 ++
 src/marks/waffle.js   | 21 ++++++++----
 3 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index 06a23583a9..f64e14dae5 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -2,7 +2,10 @@
 
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
-import {shallowRef, onMounted} from "vue";
+import {ref, shallowRef, onMounted} from "vue";
+
+const apples = ref(512);
+const unit = ref(10);
 
 const olympians = shallowRef([
   {weight: 31, height: 1.21, sex: "female"},
@@ -24,41 +27,60 @@ onMounted(() => {
 
 # Waffle mark <VersionBadge pr="2040" />
 
-The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or two) for a given category; but unlike a bar, a waffle is subdivided into many square cells that allow discrete values to be more easily counted.
+The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or quantitative extent) for a given category; but unlike a bar, a waffle is subdivided into square cells that allow easier counting. Waffles are useful for reading and comparing exact quantities. How quickly can you count the pears 🍐 below? How many more apples 🍎 are there than bananas 🍌?
 
 :::plot
 ```js
-Plot.waffleY([1, 2, 32, 400, 5]).plot()
+Plot.waffleY([212, 207, 315, 11], {x: ["apples", "bananas", "oranges", "pears"]}).plot({height: 420})
 ```
 :::
 
-The waffle mark is often used in conjunction with the group transform.
+The waffle mark is often used in conjunction with the group transform to count things. The chart below compares the number of female and male athletes in the 2012 Olympics.
 
 :::plot
 ```js
-Plot.waffleY(olympians, Plot.groupX({y: "count"}, {fill: "sex", x: (d) => Math.floor(d.date_of_birth?.getUTCFullYear() / 10) * 10, unit: 10})).plot({round: true, x: {tickFormat: ""}})
+Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: "sex"})).plot({x: {label: null}})
 ```
 :::
 
-The waffle mark comes in two orientations: waffleY extends vertically↑, while waffleX extends horizontally→.
+:::info
+Waffles are rendered using SVG patterns, making them more performant than alternatives such as the [dot mark](./dot.md) for rendering many points.
+:::
+
+Use [faceting](../features/facets.md) as an alternative to supplying an ordinal channel (_i.e._, *fx* instead of *x* for a vertical waffleY). The facet scale’s **interval** option then allows grouping by a quantitative or temporal variable, such as the athlete’s year of birth in the chart below.
 
-Waffles use patterns and thus are dramatically more performant when rendering many points.
+The **unit** option determines the quantity each cell represents; it defaults to one. The unit may be set to a value greater than one for large quantities, or to a value less than one (but greater than zero) for small fractional quantities. Try changing the unit below to see its effect.
+
+<p>
+  <span class="label-input">
+    Unit:
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="1" v-model="unit" /> 1</label>
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="2" v-model="unit" /> 2</label>
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="5" v-model="unit" /> 5</label>
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="10" v-model="unit" /> 10</label>
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="25" v-model="unit" /> 25</label>
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="50" v-model="unit" /> 50</label>
+    <label style="margin-left: 0.5em;"><input type="radio" name="unit" value="100" v-model="unit" /> 100</label>
+  </span>
+</p>
 
 :::plot
 ```js
-Plot.waffleY(olympians, Plot.groupX({y: "count"}, {fill: "sex", x: "sex"})).plot()
+Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fx: "date_of_birth", unit})).plot({fx: {interval: "5 years", label: null}})
 ```
 :::
 
-Waffles typically used to represent countable integer values, such as people or days, though they can also encode fractional values with a partial first or last cell.
+While waffles typically represent integer quantities, say to count people or days, they can also encode fractional values with a partial first or last cell. Set the **round** option to true to disable partial cells, or to Math.ceil or Math.floor to round up or down.
+
+Like bars, waffles can be [stacked](../transforms/stack.md), and implicitly apply the stack transform when only a single quantitative channel is supplied.
 
 :::plot
 ```js
-Plot.waffleY([1.5, 2, 32, 400, 5]).plot()
+Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fill: "sex", sort: "sex", fx: "weight", unit: 10})).plot({fx: {interval: 10}, color: {legend: true}})
 ```
 :::
 
-Waffles representing proportion. Waffles with rounded corners.
+TODO Waffles representing proportion. Waffles with rounded corners using **rx** or **ry**. The chart below recreates a graphic of survey responses from [“Teens in Syria”](https://www.economist.com/graphic-detail/2015/08/19/teens-in-syria) by _The Economist_ (August 19, 2015).
 
 :::plot
 ```js
@@ -67,10 +89,9 @@ Plot.plot({
   label: null,
   height: 260,
   marginTop: 20,
-  marginBottom: 80,
+  marginBottom: 70,
   title: "Subdued",
   subtitle: "Of 120 surveyed Syrian teenagers:",
-  caption: "A recreation of a chart in “Teens in Syria” published by The Economist on August 19, 2015.",
   marks: [
     Plot.axisFx({lineWidth: 10, anchor: "bottom", dy: 20}),
     Plot.waffleY({length: 1}, {y: 120, fillOpacity: 0.4, rx: "100%"}),
@@ -81,7 +102,35 @@ Plot.plot({
 ```
 :::
 
-Waffles can be stacked.
+The waffle mark comes in two orientations: waffleY extends vertically↑, while waffleX extends horizontally→. The waffle mark automatically determines the appropriate number of cells per row or per column (depending on orientation) such that the cells are square, don’t overlap, and are consistent with position scales.
+
+<p>
+  <label class="label-input">
+    <span>Apples:</span>
+    <input type="range" v-model.number="apples" min="10" max="1028" step="1" />
+    <span style="font-variant-numeric: tabular-nums;">{{apples}}</span>
+  </label>
+</p>
+
+:::plot
+```js
+Plot.waffleX([apples], {y: ["apples"]}).plot({height: 240})
+```
+:::
+
+:::info
+The number of rows in the waffle above is guaranteed to be an integer, but it might not be a multiple or factor of the *x*-axis tick interval. For example, the waffle might have 15 rows while the *x*-axis shows ticks every 100 units.
+:::
+
+TODO The **gap** option.
+
+TODO Waffle shorthand.
+
+:::plot
+```js
+Plot.waffleY("AAAAGAGTGAAGATGCTGGAGACGAGTGAAGCATTCACTTTAGGGAAAGCGAGGCAAGAGCGTTTCAGAAGACGAAACCTGGTAGGTGCACTCACCACAG", Plot.groupX()).plot()
+```
+:::
 
 ## Waffle options
 
diff --git a/src/marks/waffle.d.ts b/src/marks/waffle.d.ts
index e6fa8d1718..2d32f04712 100644
--- a/src/marks/waffle.d.ts
+++ b/src/marks/waffle.d.ts
@@ -7,6 +7,8 @@ interface WaffleOptions {
   unit?: number;
   /** The gap in pixels between cells; defaults to 1. */
   gap?: number;
+  /** If true, round to integers to avoid partial cells. */
+  round?: boolean | ((value: number) => number);
 }
 
 /** Options for the waffleX mark. */
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index dc97aa2ee7..29958728de 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -7,13 +7,14 @@ import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 import {BarX, BarY} from "./bar.js";
 
 export class WaffleX extends BarX {
-  constructor(data, {unit = 1, gap = 1, ...options} = {}) {
+  constructor(data, {unit = 1, gap = 1, round, ...options} = {}) {
     super(data, {...options, stroke: "none"});
     this.unit = Math.max(0, unit);
     this.gap = +gap;
+    this.round = maybeRound(round);
   }
   render(index, scales, channels, dimensions, context) {
-    const {unit, gap, rx, ry} = this;
+    const {unit, gap, rx, ry, round} = this;
     const {document} = context;
     const g = super.render(index, scales, channels, dimensions, context);
 
@@ -71,7 +72,7 @@ export class WaffleX extends BarX {
       }
       path.setAttribute(
         "d",
-        `M${wafflePoints(X1[i] / unit, X2[i] / unit, columns)
+        `M${wafflePoints(round(X1[i] / unit), round(X2[i] / unit), columns)
           .map(([y, x]) => [x * cellsize + x0, y0 + y * cellsize])
           .join("L")}Z`
       );
@@ -86,13 +87,14 @@ export class WaffleX extends BarX {
 }
 
 export class WaffleY extends BarY {
-  constructor(data, {unit = 1, gap = 1, ...options} = {}) {
+  constructor(data, {unit = 1, gap = 1, round, ...options} = {}) {
     super(data, {...options, stroke: "none"});
     this.unit = Math.max(0, unit);
     this.gap = +gap;
+    this.round = maybeRound(round);
   }
   render(index, scales, channels, dimensions, context) {
-    const {unit, gap, rx, ry} = this;
+    const {unit, gap, rx, ry, round} = this;
     const {document} = context;
     const g = super.render(index, scales, channels, dimensions, context);
 
@@ -150,7 +152,7 @@ export class WaffleY extends BarY {
       }
       path.setAttribute(
         "d",
-        `M${wafflePoints(Y1[i] / unit, Y2[i] / unit, columns)
+        `M${wafflePoints(round(Y1[i] / unit), round(Y2[i] / unit), columns)
           .map(([x, y]) => [x * cellsize + x0, y0 - y * cellsize])
           .join("L")}Z`
       );
@@ -218,6 +220,13 @@ function wafflePoints(i1, i2, columns) {
   ];
 }
 
+function maybeRound(round) {
+  if (round === undefined || round === false) return Number;
+  if (round === true) return Math.round;
+  if (typeof round !== "function") throw new Error(`invalid round: ${round}`);
+  return round;
+}
+
 function scaleof({domain, range}) {
   return spread(range) / spread(domain);
 }

From be09c924d44b7d44166f13ab0224e3dc6a65421b Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 13:20:41 -0400
Subject: [PATCH 15/22] tweak position; support stroke

---
 docs/marks/waffle.md                    |  28 ++--
 src/marks/waffle.js                     |  24 ++--
 test/output/waffleShorthand.svg         |  36 ++---
 test/output/waffleShorthandNegative.svg |  36 ++---
 test/output/waffleStroke.svg            |  90 +++++++++++++
 test/output/waffleStrokeNegative.svg    |  90 +++++++++++++
 test/output/waffleX.svg                 |  20 +--
 test/output/waffleXStacked.svg          |  20 +--
 test/output/waffleY.svg                 |  20 +--
 test/output/waffleYGrouped.svg          | 168 ++++++++++++------------
 test/output/waffleYStacked.html         |  20 +--
 test/plots/waffle.ts                    |   8 ++
 12 files changed, 374 insertions(+), 186 deletions(-)
 create mode 100644 test/output/waffleStroke.svg
 create mode 100644 test/output/waffleStrokeNegative.svg

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index f64e14dae5..e1d12d56cb 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -27,7 +27,7 @@ onMounted(() => {
 
 # Waffle mark <VersionBadge pr="2040" />
 
-The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or quantitative extent) for a given category; but unlike a bar, a waffle is subdivided into square cells that allow easier counting. Waffles are useful for reading and comparing exact quantities. How quickly can you count the pears 🍐 below? How many more apples 🍎 are there than bananas 🍌?
+The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or quantitative extent) for a given category; but unlike a bar, a waffle is subdivided into square cells that allow easier counting. Waffles are useful for reading exact quantities. How quickly can you count the pears 🍐 below? How many more apples 🍎 are there than bananas 🍌?
 
 :::plot
 ```js
@@ -35,7 +35,7 @@ Plot.waffleY([212, 207, 315, 11], {x: ["apples", "bananas", "oranges", "pears"]}
 ```
 :::
 
-The waffle mark is often used in conjunction with the group transform to count things. The chart below compares the number of female and male athletes in the 2012 Olympics.
+The waffle mark is often used with the [group transform](../transforms/group.md) to compute counts. The chart below compares the number of female and male athletes in the 2012 Olympics.
 
 :::plot
 ```js
@@ -47,9 +47,7 @@ Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: "sex"})).plot({x: {label:
 Waffles are rendered using SVG patterns, making them more performant than alternatives such as the [dot mark](./dot.md) for rendering many points.
 :::
 
-Use [faceting](../features/facets.md) as an alternative to supplying an ordinal channel (_i.e._, *fx* instead of *x* for a vertical waffleY). The facet scale’s **interval** option then allows grouping by a quantitative or temporal variable, such as the athlete’s year of birth in the chart below.
-
-The **unit** option determines the quantity each cell represents; it defaults to one. The unit may be set to a value greater than one for large quantities, or to a value less than one (but greater than zero) for small fractional quantities. Try changing the unit below to see its effect.
+The **unit** option determines the quantity each waffle cell represents; it defaults to one. The unit may be set to a value greater than one for large quantities, or less than one (but greater than zero) for small fractional quantities. Try changing the unit below to see its effect.
 
 <p>
   <span class="label-input">
@@ -70,6 +68,10 @@ Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fx: "date_of_birth", unit})).
 ```
 :::
 
+:::tip
+Use [faceting](../features/facets.md) as an alternative to supplying an ordinal channel (_i.e._, *fx* instead of *x* for a vertical waffleY). The facet scale’s **interval** option then allows grouping by a quantitative or temporal variable, such as the athlete’s year of birth in the chart below.
+:::
+
 While waffles typically represent integer quantities, say to count people or days, they can also encode fractional values with a partial first or last cell. Set the **round** option to true to disable partial cells, or to Math.ceil or Math.floor to round up or down.
 
 Like bars, waffles can be [stacked](../transforms/stack.md), and implicitly apply the stack transform when only a single quantitative channel is supplied.
@@ -80,7 +82,7 @@ Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fill: "sex", sort: "sex", fx:
 ```
 :::
 
-TODO Waffles representing proportion. Waffles with rounded corners using **rx** or **ry**. The chart below recreates a graphic of survey responses from [“Teens in Syria”](https://www.economist.com/graphic-detail/2015/08/19/teens-in-syria) by _The Economist_ (August 19, 2015).
+Waffles can also be used to highlight a proportion of the whole. The chart below recreates a graphic of survey responses from [“Teens in Syria”](https://www.economist.com/graphic-detail/2015/08/19/teens-in-syria) by _The Economist_ (August 19, 2015); positive responses are in orange, while negative responses are in gray. The **rx** option is used to produce circles instead of squares.
 
 :::plot
 ```js
@@ -96,7 +98,7 @@ Plot.plot({
     Plot.axisFx({lineWidth: 10, anchor: "bottom", dy: 20}),
     Plot.waffleY({length: 1}, {y: 120, fillOpacity: 0.4, rx: "100%"}),
     Plot.waffleY(survey, {fx: "question", y: "yes", rx: "100%", fill: "orange"}),
-    Plot.text(survey, {fx: "question", text: (d) => (d.yes / 120).toLocaleString("en-US", {style: "percent"}), frameAnchor: "bottom", lineAnchor: "top", dy: 6, fill: "orange", fontSize: 24, fontWeight: "bold"}),
+    Plot.text(survey, {fx: "question", text: (d) => (d.yes / 120).toLocaleString("en-US", {style: "percent"}), frameAnchor: "bottom", lineAnchor: "top", dy: 6, fill: "orange", fontSize: 24, fontWeight: "bold"})
   ]
 })
 ```
@@ -122,19 +124,9 @@ Plot.waffleX([apples], {y: ["apples"]}).plot({height: 240})
 The number of rows in the waffle above is guaranteed to be an integer, but it might not be a multiple or factor of the *x*-axis tick interval. For example, the waffle might have 15 rows while the *x*-axis shows ticks every 100 units.
 :::
 
-TODO The **gap** option.
-
-TODO Waffle shorthand.
-
-:::plot
-```js
-Plot.waffleY("AAAAGAGTGAAGATGCTGGAGACGAGTGAAGCATTCACTTTAGGGAAAGCGAGGCAAGAGCGTTTCAGAAGACGAAACCTGGTAGGTGCACTCACCACAG", Plot.groupX()).plot()
-```
-:::
-
 ## Waffle options
 
-For required channels, see the [bar mark](./bar.md). The waffle mark supports the [standard mark options](../features/marks.md). It does not support [insets](../features/marks.md#insets), [rounded corners](../features/marks.md#rounded-corners), or **stroke**. The **fill** defaults to *currentColor*.
+For required channels, see the [bar mark](./bar.md). The waffle mark supports the [standard mark options](../features/marks.md), including [insets](../features/marks.md#insets) and [rounded corners](../features/marks.md#rounded-corners). The **stroke** defaults to *none*. The **fill** defaults to *currentColor* if the stroke is *none*, and to *none* otherwise.
 
 ## waffleX(*data*, *options*) {#waffleX}
 
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 29958728de..88f4019df6 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -8,7 +8,7 @@ import {BarX, BarY} from "./bar.js";
 
 export class WaffleX extends BarX {
   constructor(data, {unit = 1, gap = 1, round, ...options} = {}) {
-    super(data, {...options, stroke: "none"});
+    super(data, options);
     this.unit = Math.max(0, unit);
     this.gap = +gap;
     this.round = maybeRound(round);
@@ -36,7 +36,7 @@ export class WaffleX extends BarX {
     const ww = columns * cellsize;
     const wy = (bandwidth - ww) / 2;
     let rect = g.firstElementChild;
-    const x0 = scales.x(0) - gap;
+    const x0 = scales.x(0);
     const basePattern = document.createElementNS(namespaces.svg, "pattern");
     basePattern.setAttribute("width", cellsize);
     basePattern.setAttribute("height", cellsize);
@@ -51,13 +51,15 @@ export class WaffleX extends BarX {
     if (ry != null) basePatternRect.setAttribute("ry", ry);
     for (const i of index) {
       const y0 = +rect.getAttribute("y") + wy;
-      const fill = rect.getAttribute("fill");
+      const fill = rect.getAttribute("fill"); // TODO handle constant fill
+      const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
       const patternId = getClipId(); // TODO lazy
       const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
       const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
       pattern.setAttribute("y", y0);
-      patternRect.setAttribute("fill", fill);
+      if (fill != null) patternRect.setAttribute("fill", fill);
+      if (stroke != null) patternRect.setAttribute("stroke", stroke);
       const path = document.createElementNS(namespaces.svg, "path");
       for (const a of rect.attributes) {
         switch (a.name) {
@@ -66,6 +68,7 @@ export class WaffleX extends BarX {
           case "width":
           case "height":
           case "fill":
+          case "stroke":
             continue;
         }
         path.setAttribute(a.name, a.value);
@@ -76,6 +79,7 @@ export class WaffleX extends BarX {
           .map(([y, x]) => [x * cellsize + x0, y0 + y * cellsize])
           .join("L")}Z`
       );
+      if (stroke != null) path.setAttribute("stroke", `url(#${patternId})`); // TODO if necessary
       path.setAttribute("fill", `url(#${patternId})`);
       const nextRect = rect.nextElementSibling;
       rect.replaceWith(path);
@@ -88,7 +92,7 @@ export class WaffleX extends BarX {
 
 export class WaffleY extends BarY {
   constructor(data, {unit = 1, gap = 1, round, ...options} = {}) {
-    super(data, {...options, stroke: "none"});
+    super(data, options);
     this.unit = Math.max(0, unit);
     this.gap = +gap;
     this.round = maybeRound(round);
@@ -116,7 +120,7 @@ export class WaffleY extends BarY {
     const ww = columns * cellsize;
     const wx = (bandwidth - ww) / 2;
     let rect = g.firstElementChild;
-    const y0 = scales.y(0) - gap;
+    const y0 = scales.y(0);
     const basePattern = document.createElementNS(namespaces.svg, "pattern");
     basePattern.setAttribute("width", cellsize);
     basePattern.setAttribute("height", cellsize);
@@ -131,13 +135,15 @@ export class WaffleY extends BarY {
     if (ry != null) basePatternRect.setAttribute("ry", ry);
     for (const i of index) {
       const x0 = +rect.getAttribute("x") + wx;
-      const fill = rect.getAttribute("fill");
+      const fill = rect.getAttribute("fill"); // TODO handle constant fill
+      const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
       const patternId = getClipId(); // TODO lazy
       const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
       const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
       pattern.setAttribute("x", x0);
-      patternRect.setAttribute("fill", fill);
+      if (fill != null) patternRect.setAttribute("fill", fill);
+      if (stroke != null) patternRect.setAttribute("stroke", stroke);
       const path = document.createElementNS(namespaces.svg, "path");
       for (const a of rect.attributes) {
         switch (a.name) {
@@ -146,6 +152,7 @@ export class WaffleY extends BarY {
           case "width":
           case "height":
           case "fill":
+          case "stroke":
             continue;
         }
         path.setAttribute(a.name, a.value);
@@ -156,6 +163,7 @@ export class WaffleY extends BarY {
           .map(([x, y]) => [x * cellsize + x0, y0 - y * cellsize])
           .join("L")}Z`
       );
+      if (stroke != null) path.setAttribute("stroke", `url(#${patternId})`); // TODO if necessary
       path.setAttribute("fill", `url(#${patternId})`);
       const nextRect = rect.nextElementSibling;
       rect.replaceWith(path);
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index 28a850c868..a9769ec74c 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -62,29 +62,29 @@
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="50.57575757575758">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="50.57575757575758">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,347.7878787878788L50.57575757575758,347.7878787878788L50.57575757575758,369L50.57575757575758,369L50.57575757575758,369L50.57575757575758,369L50.57575757575758,369L135.42424242424244,369L135.42424242424244,347.7878787878788L50.57575757575758,347.7878787878788L50.57575757575758,347.7878787878788L50.57575757575758,347.7878787878788Z" fill="url(#plot-clip-299)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="145.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788Z" fill="url(#plot-clip-299)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="145.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,305.3636363636364L145.57575757575756,305.3636363636364L145.57575757575756,369L145.57575757575756,369L145.57575757575756,369L145.57575757575756,369L145.57575757575756,369L230.4242424242424,369L230.4242424242424,326.57575757575756L166.78787878787878,326.57575757575756L166.78787878787878,326.57575757575756L166.78787878787878,326.57575757575756Z" fill="url(#plot-clip-300)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="240.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-clip-300)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="240.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,241.72727272727275L240.57575757575756,241.72727272727275L240.57575757575756,369L240.57575757575756,369L240.57575757575756,369L240.57575757575756,369L240.57575757575756,369L325.4242424242424,369L325.4242424242424,241.72727272727275L240.57575757575756,241.72727272727275L240.57575757575756,241.72727272727275L240.57575757575756,241.72727272727275Z" fill="url(#plot-clip-301)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="335.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-clip-301)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="335.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M378,114.45454545454547L335.57575757575756,114.45454545454547L335.57575757575756,369L335.57575757575756,369L335.57575757575756,369L335.57575757575756,369L335.57575757575756,369L420.4242424242424,369L420.4242424242424,135.66666666666669L378,135.66666666666669L378,135.66666666666669L378,135.66666666666669Z" fill="url(#plot-clip-302)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="430.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-clip-302)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="430.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M473,8.393939393939434L430.57575757575756,8.393939393939434L430.57575757575756,369L430.57575757575756,369L430.57575757575756,369L430.57575757575756,369L430.57575757575756,369L515.4242424242424,369L515.4242424242424,29.606060606060623L473,29.606060606060623L473,29.606060606060623L473,29.606060606060623Z" fill="url(#plot-clip-303)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="525.5757575757576">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-clip-303)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-6" x="525.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,326.57575757575756L525.5757575757576,326.57575757575756L525.5757575757576,369L525.5757575757576,369L525.5757575757576,369L525.5757575757576,369L525.5757575757576,369L610.4242424242425,369L610.4242424242425,347.7878787878788L589.2121212121212,347.7878787878788L589.2121212121212,347.7878787878788L589.2121212121212,347.7878787878788Z" fill="url(#plot-clip-304)"></path>
+    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-clip-304)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
index e0ddb0b166..b3d73e9cf3 100644
--- a/test/output/waffleShorthandNegative.svg
+++ b/test/output/waffleShorthandNegative.svg
@@ -62,29 +62,29 @@
     <text transform="translate(525,30)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-1" x="50.57575757575758">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-1" x="50.57575757575758">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,50.21212121212121L50.57575757575758,50.21212121212121L50.57575757575758,29L50.57575757575758,29L50.57575757575758,29L50.57575757575758,29L50.57575757575758,29L135.42424242424244,29L135.42424242424244,50.21212121212121L50.57575757575758,50.21212121212121L50.57575757575758,50.21212121212121L50.57575757575758,50.21212121212121Z" fill="url(#plot-clip-305)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-2" x="145.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121Z" fill="url(#plot-clip-305)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-2" x="145.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,92.63636363636363L145.57575757575756,92.63636363636363L145.57575757575756,29L145.57575757575756,29L145.57575757575756,29L145.57575757575756,29L145.57575757575756,29L230.4242424242424,29L230.4242424242424,71.42424242424242L166.78787878787878,71.42424242424242L166.78787878787878,71.42424242424242L166.78787878787878,71.42424242424242Z" fill="url(#plot-clip-306)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-3" x="240.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-clip-306)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-3" x="240.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,156.27272727272725L240.57575757575756,156.27272727272725L240.57575757575756,29L240.57575757575756,29L240.57575757575756,29L240.57575757575756,29L240.57575757575756,29L325.4242424242424,29L325.4242424242424,156.27272727272725L240.57575757575756,156.27272727272725L240.57575757575756,156.27272727272725L240.57575757575756,156.27272727272725Z" fill="url(#plot-clip-307)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-4" x="335.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-clip-307)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-4" x="335.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M378,283.5454545454545L335.57575757575756,283.5454545454545L335.57575757575756,29L335.57575757575756,29L335.57575757575756,29L335.57575757575756,29L335.57575757575756,29L420.4242424242424,29L420.4242424242424,262.3333333333333L378,262.3333333333333L378,262.3333333333333L378,262.3333333333333Z" fill="url(#plot-clip-308)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-5" x="430.57575757575756">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-clip-308)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-5" x="430.57575757575756">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M473,389.60606060606057L430.57575757575756,389.60606060606057L430.57575757575756,29L430.57575757575756,29L430.57575757575756,29L430.57575757575756,29L430.57575757575756,29L515.4242424242424,29L515.4242424242424,368.3939393939394L473,368.3939393939394L473,368.3939393939394L473,368.3939393939394Z" fill="url(#plot-clip-309)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="29" id="plot-clip-6" x="525.5757575757576">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121" fill="null"></rect>
+    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-clip-309)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-6" x="525.5757575757576">
+      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,71.42424242424242L525.5757575757576,71.42424242424242L525.5757575757576,29L525.5757575757576,29L525.5757575757576,29L525.5757575757576,29L525.5757575757576,29L610.4242424242425,29L610.4242424242425,50.21212121212121L589.2121212121212,50.21212121212121L589.2121212121212,50.21212121212121L589.2121212121212,50.21212121212121Z" fill="url(#plot-clip-310)"></path>
+    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-clip-310)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStroke.svg b/test/output/waffleStroke.svg
new file mode 100644
index 0000000000..b7d0bdc960
--- /dev/null
+++ b/test/output/waffleStroke.svg
@@ -0,0 +1,90 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,343.48484848484844)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,316.96969696969694)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,290.45454545454544)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,263.93939393939394)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,237.4242424242424)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,210.9090909090909)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,184.3939393939394)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,157.87878787878788)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,131.36363636363637)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,104.84848484848486)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,78.33333333333331)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,51.81818181818183)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,25.303030303030297)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,370)">0</text>
+    <text y="0.32em" transform="translate(40,343.48484848484844)">5</text>
+    <text y="0.32em" transform="translate(40,316.96969696969694)">10</text>
+    <text y="0.32em" transform="translate(40,290.45454545454544)">15</text>
+    <text y="0.32em" transform="translate(40,263.93939393939394)">20</text>
+    <text y="0.32em" transform="translate(40,237.4242424242424)">25</text>
+    <text y="0.32em" transform="translate(40,210.9090909090909)">30</text>
+    <text y="0.32em" transform="translate(40,184.3939393939394)">35</text>
+    <text y="0.32em" transform="translate(40,157.87878787878788)">40</text>
+    <text y="0.32em" transform="translate(40,131.36363636363637)">45</text>
+    <text y="0.32em" transform="translate(40,104.84848484848486)">50</text>
+    <text y="0.32em" transform="translate(40,78.33333333333331)">55</text>
+    <text y="0.32em" transform="translate(40,51.81818181818183)">60</text>
+    <text y="0.32em" transform="translate(40,25.303030303030297)">65</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
+    <path transform="translate(50,370)" d="M0,0L0,6"></path>
+    <path transform="translate(145,370)" d="M0,0L0,6"></path>
+    <path transform="translate(240,370)" d="M0,0L0,6"></path>
+    <path transform="translate(335,370)" d="M0,0L0,6"></path>
+    <path transform="translate(430,370)" d="M0,0L0,6"></path>
+    <path transform="translate(525,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,9.5)">
+    <text y="0.71em" transform="translate(50,370)">0</text>
+    <text y="0.71em" transform="translate(145,370)">1</text>
+    <text y="0.71em" transform="translate(240,370)">2</text>
+    <text y="0.71em" transform="translate(335,370)">3</text>
+    <text y="0.71em" transform="translate(430,370)">4</text>
+    <text y="0.71em" transform="translate(525,370)">5</text>
+  </g>
+  <g aria-label="bar" fill="#eee" stroke="red">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="50.57575757575758">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M50.57575757575758,327.57575757575756L50.57575757575758,327.57575757575756L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L71.78787878787878,348.7878787878788L71.78787878787878,338.1818181818182L50.57575757575758,338.1818181818182Z" fill="url(#plot-clip-311)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="145.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-clip-312)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="240.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-clip-313)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="335.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-clip-314)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="430.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-clip-315)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-6" x="525.5757575757576">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-clip-316)"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleStrokeNegative.svg b/test/output/waffleStrokeNegative.svg
new file mode 100644
index 0000000000..d74dd9d5b2
--- /dev/null
+++ b/test/output/waffleStrokeNegative.svg
@@ -0,0 +1,90 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,374.6969696969697)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,348.1818181818182)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,321.6666666666667)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,295.1515151515151)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,268.6363636363637)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,242.12121212121212)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,215.6060606060606)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,189.09090909090912)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,162.57575757575756)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,136.06060606060603)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,109.54545454545456)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,83.03030303030302)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,56.51515151515153)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,30)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,374.6969696969697)">−65</text>
+    <text y="0.32em" transform="translate(40,348.1818181818182)">−60</text>
+    <text y="0.32em" transform="translate(40,321.6666666666667)">−55</text>
+    <text y="0.32em" transform="translate(40,295.1515151515151)">−50</text>
+    <text y="0.32em" transform="translate(40,268.6363636363637)">−45</text>
+    <text y="0.32em" transform="translate(40,242.12121212121212)">−40</text>
+    <text y="0.32em" transform="translate(40,215.6060606060606)">−35</text>
+    <text y="0.32em" transform="translate(40,189.09090909090912)">−30</text>
+    <text y="0.32em" transform="translate(40,162.57575757575756)">−25</text>
+    <text y="0.32em" transform="translate(40,136.06060606060603)">−20</text>
+    <text y="0.32em" transform="translate(40,109.54545454545456)">−15</text>
+    <text y="0.32em" transform="translate(40,83.03030303030302)">−10</text>
+    <text y="0.32em" transform="translate(40,56.51515151515153)">−5</text>
+    <text y="0.32em" transform="translate(40,30)">0</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,1)">
+    <path transform="translate(50,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(145,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(240,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(335,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(430,30)" d="M0,0L0,-6"></path>
+    <path transform="translate(525,30)" d="M0,0L0,-6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,-8.5)">
+    <text transform="translate(50,30)">0</text>
+    <text transform="translate(145,30)">1</text>
+    <text transform="translate(240,30)">2</text>
+    <text transform="translate(335,30)">3</text>
+    <text transform="translate(430,30)">4</text>
+    <text transform="translate(525,30)">5</text>
+  </g>
+  <g aria-label="bar" fill="#eee" stroke="red">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-1" x="50.57575757575758">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M50.57575757575758,72.42424242424242L50.57575757575758,72.42424242424242L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L71.78787878787878,51.21212121212121L71.78787878787878,61.81818181818181L50.57575757575758,61.81818181818181Z" fill="url(#plot-clip-317)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-2" x="145.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-clip-318)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-3" x="240.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-clip-319)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-4" x="335.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-clip-320)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-5" x="430.57575757575756">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-clip-321)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-6" x="525.5757575757576">
+      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    </pattern>
+    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-clip-322)"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index 8aa120d2c3..f82eb56525 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -46,26 +46,26 @@
     <text transform="translate(618.241743637451,30)">300</text>
   </g>
   <g aria-label="bar">
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-1" y="35.426373845438235">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-1" y="35.426373845438235">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M375.03295900059805,46.191208718187255L375.03295900059805,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,35.426373845438235L79,51.573626154561765L369.65054156422354,51.573626154561765L369.65054156422354,51.573626154561765L373.2567612465944,51.573626154561765L373.2567612465944,46.191208718187255Z" fill="url(#plot-clip-311)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-2" y="56.426373845438235">
+    <path d="M376.03295900059805,46.191208718187255L376.03295900059805,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,51.573626154561765L370.65054156422354,51.573626154561765L370.65054156422354,51.573626154561765L374.2567612465944,51.573626154561765L374.2567612465944,46.191208718187255Z" fill="url(#plot-clip-323)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-2" y="56.426373845438235">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M622.6241610738255,56.426373845438235L622.6241610738255,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,56.426373845438235L79,72.57362615456177L617.241743637451,72.57362615456177L617.241743637451,61.808791281812745L622.5165127250981,61.808791281812745L622.5165127250981,56.426373845438235Z" fill="url(#plot-clip-312)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-3" y="77.42637384543823">
+    <path d="M623.6241610738255,56.426373845438235L623.6241610738255,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,72.57362615456177L618.241743637451,72.57362615456177L618.241743637451,61.808791281812745L623.5165127250981,61.808791281812745L623.5165127250981,56.426373845438235Z" fill="url(#plot-clip-324)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-3" y="77.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M445.0043856734667,88.19120871818726L445.0043856734667,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,77.42637384543823L79,93.57362615456177L439.6219682370922,93.57362615456177L439.6219682370922,93.57362615456177L442.52847365273436,93.57362615456177L442.52847365273436,88.19120871818726Z" fill="url(#plot-clip-313)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-4" y="98.42637384543823">
+    <path d="M446.0043856734667,88.19120871818726L446.0043856734667,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,93.57362615456177L440.6219682370922,93.57362615456177L440.6219682370922,93.57362615456177L443.52847365273436,93.57362615456177L443.52847365273436,88.19120871818726Z" fill="url(#plot-clip-325)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-4" y="98.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M305.0615323277294,103.80879128181274L305.0615323277294,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,98.42637384543823L79,114.57362615456177L299.6791148913549,114.57362615456177L299.6791148913549,109.19120871818726L302.69326865572464,109.19120871818726L302.69326865572464,103.80879128181274Z" fill="url(#plot-clip-314)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="79" id="plot-clip-5" y="119.42637384543823">
+    <path d="M306.0615323277294,103.80879128181274L306.0615323277294,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,114.57362615456177L300.6791148913549,114.57362615456177L300.6791148913549,109.19120871818726L303.69326865572464,109.19120871818726L303.69326865572464,103.80879128181274Z" fill="url(#plot-clip-326)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-5" y="119.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M305.0615323277294,124.80879128181274L305.0615323277294,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,119.42637384543823L79,135.57362615456177L299.6791148913549,135.57362615456177L299.6791148913549,130.19120871818726L302.69326865572464,130.19120871818726L302.69326865572464,124.80879128181274Z" fill="url(#plot-clip-315)"></path>
+    <path d="M306.0615323277294,124.80879128181274L306.0615323277294,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,135.57362615456177L300.6791148913549,135.57362615456177L300.6791148913549,130.19120871818726L303.69326865572464,130.19120871818726L303.69326865572464,124.80879128181274Z" fill="url(#plot-clip-327)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="80" x2="80" y1="30" y2="140"></line>
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
index 4e235081b7..96c49f4028 100644
--- a/test/output/waffleXStacked.svg
+++ b/test/output/waffleXStacked.svg
@@ -38,26 +38,26 @@
     <text y="0.71em" transform="translate(608.03671962627,210)">900</text>
   </g>
   <g aria-label="bar">
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-1" y="10.587437793337756">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-1" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M130.07360259607321,132.7684006490183L130.07360259607321,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,10.587437793337756L19,199.41256220666224L118.9662423364659,199.41256220666224L118.9662423364659,143.87576090862564L126.40817371040266,143.87576090862564L126.40817371040266,132.7684006490183Z" fill="url(#plot-clip-316)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-2" y="10.587437793337756">
+    <path d="M131.07360259607321,132.7684006490183L131.07360259607321,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,199.41256220666224L119.9662423364659,199.41256220666224L119.9662423364659,143.87576090862564L127.40817371040266,143.87576090862564L127.40817371040266,132.7684006490183Z" fill="url(#plot-clip-328)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-2" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M330.00608726900504,77.2315993509817L330.00608726900504,10.587437793337756L130.07360259607321,10.587437793337756L130.07360259607321,132.7684006490183L126.40817371040266,132.7684006490183L126.40817371040266,143.87576090862564L118.9662423364659,143.87576090862564L118.9662423364659,199.41256220666224L318.8987270093977,199.41256220666224L318.8987270093977,88.33895961058901L326.1185111781422,88.33895961058901L326.1185111781422,77.2315993509817Z" fill="url(#plot-clip-317)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-3" y="10.587437793337756">
+    <path d="M331.00608726900504,77.2315993509817L331.00608726900504,10.587437793337756L131.07360259607321,10.587437793337756L131.07360259607321,132.7684006490183L127.40817371040266,132.7684006490183L127.40817371040266,143.87576090862564L119.9662423364659,143.87576090862564L119.9662423364659,199.41256220666224L319.8987270093977,199.41256220666224L319.8987270093977,88.33895961058901L327.1185111781422,88.33895961058901L327.1185111781422,77.2315993509817Z" fill="url(#plot-clip-329)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-3" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M463.29441038429286,77.2315993509817L463.29441038429286,10.587437793337756L330.00608726900504,10.587437793337756L330.00608726900504,77.2315993509817L326.1185111781422,77.2315993509817L326.1185111781422,88.33895961058901L318.8987270093977,88.33895961058901L318.8987270093977,199.41256220666224L452.1870501246856,199.41256220666224L452.1870501246856,88.33895961058901L454.2974485740103,88.33895961058901L454.2974485740103,77.2315993509817Z" fill="url(#plot-clip-318)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-4" y="10.587437793337756">
+    <path d="M464.29441038429286,77.2315993509817L464.29441038429286,10.587437793337756L331.00608726900504,10.587437793337756L331.00608726900504,77.2315993509817L327.1185111781422,77.2315993509817L327.1185111781422,88.33895961058901L319.8987270093977,88.33895961058901L319.8987270093977,199.41256220666224L453.1870501246856,199.41256220666224L453.1870501246856,88.33895961058901L455.2974485740103,88.33895961058901L455.2974485740103,77.2315993509817Z" fill="url(#plot-clip-330)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-4" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M541.0459322015441,132.7684006490183L541.0459322015441,10.587437793337756L463.29441038429286,10.587437793337756L463.29441038429286,77.2315993509817L454.2974485740103,77.2315993509817L454.2974485740103,88.33895961058901L452.1870501246856,88.33895961058901L452.1870501246856,199.41256220666224L529.9385719419367,199.41256220666224L529.9385719419367,143.87576090862564L538.2690921366423,143.87576090862564L538.2690921366423,132.7684006490183Z" fill="url(#plot-clip-319)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="19" id="plot-clip-5" y="10.587437793337756">
+    <path d="M542.0459322015441,132.7684006490183L542.0459322015441,10.587437793337756L464.29441038429286,10.587437793337756L464.29441038429286,77.2315993509817L455.2974485740103,77.2315993509817L455.2974485740103,88.33895961058901L453.1870501246856,88.33895961058901L453.1870501246856,199.41256220666224L530.9385719419367,199.41256220666224L530.9385719419367,143.87576090862564L539.2690921366423,143.87576090862564L539.2690921366423,132.7684006490183Z" fill="url(#plot-clip-331)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-5" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M629.9048142784027,10.587437793337756L629.9048142784027,10.587437793337756L541.0459322015441,10.587437793337756L541.0459322015441,132.7684006490183L538.2690921366423,132.7684006490183L538.2690921366423,143.87576090862564L529.9385719419367,143.87576090862564L529.9385719419367,199.41256220666224L618.7974540187954,199.41256220666224L618.7974540187954,21.694798052945078L622.240735699273,21.694798052945078L622.240735699273,10.587437793337756Z" fill="url(#plot-clip-320)"></path>
+    <path d="M630.9048142784027,10.587437793337756L630.9048142784027,10.587437793337756L542.0459322015441,10.587437793337756L542.0459322015441,132.7684006490183L539.2690921366423,132.7684006490183L539.2690921366423,143.87576090862564L530.9385719419367,143.87576090862564L530.9385719419367,199.41256220666224L619.7974540187954,199.41256220666224L619.7974540187954,21.694798052945078L623.240735699273,21.694798052945078L623.240735699273,10.587437793337756Z" fill="url(#plot-clip-332)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="20" x2="20" y1="0" y2="210"></line>
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index b0739feb18..28e22d7e72 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -64,26 +64,26 @@
     <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
   </g>
   <g aria-label="bar">
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="56.90384743172304">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="56.90384743172304">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M77.83547079540169,170.14957804505283L56.90384743172304,170.14957804505283L56.90384743172304,369L56.90384743172304,369L56.90384743172304,369L56.90384743172304,369L56.90384743172304,369L151.09615256827698,369L151.09615256827698,180.61538972689215L88.30128247724102,180.61538972689215L88.30128247724102,173.60329590005995L77.83547079540169,173.60329590005995Z" fill="url(#plot-clip-321)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="169.90384743172302">
+    <path d="M77.83547079540169,171.14957804505283L56.90384743172304,171.14957804505283L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L151.09615256827698,370L151.09615256827698,181.61538972689215L88.30128247724102,181.61538972689215L88.30128247724102,174.60329590005995L77.83547079540169,174.60329590005995Z" fill="url(#plot-clip-333)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="169.90384743172302">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M201.301282477241,13.162402817462976L169.90384743172302,13.162402817462976L169.90384743172302,369L169.90384743172302,369L169.90384743172302,369L169.90384743172302,369L169.90384743172302,369L264.0961525682769,369L264.0961525682769,23.62821449930226L211.76709415908033,23.62821449930226L211.76709415908033,13.371719051099547L201.301282477241,13.371719051099547Z" fill="url(#plot-clip-322)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="282.903847431723">
+    <path d="M201.301282477241,14.162402817462976L169.90384743172302,14.162402817462976L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L264.0961525682769,370L264.0961525682769,24.62821449930226L211.76709415908033,24.62821449930226L211.76709415908033,14.371719051099547L201.301282477241,14.371719051099547Z" fill="url(#plot-clip-334)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="282.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M335.23290584091967,128.28633131769553L282.903847431723,128.28633131769553L282.903847431723,369L282.903847431723,369L282.903847431723,369L282.903847431723,369L282.903847431723,369L377.0961525682769,369L377.0961525682769,138.75214299953484L345.69871752275895,138.75214299953484L345.69871752275895,133.1006046913417L335.23290584091967,133.1006046913417Z" fill="url(#plot-clip-323)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="395.903847431723">
+    <path d="M335.23290584091967,129.28633131769553L282.903847431723,129.28633131769553L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L377.0961525682769,370L377.0961525682769,139.75214299953484L345.69871752275895,139.75214299953484L345.69871752275895,134.1006046913417L335.23290584091967,134.1006046913417Z" fill="url(#plot-clip-335)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="395.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M469.1645292045983,222.47863645424945L395.903847431723,222.47863645424945L395.903847431723,369L395.903847431723,369L395.903847431723,369L395.903847431723,369L395.903847431723,369L490.0961525682769,369L490.0961525682769,232.94444813608877L479.63034088643764,232.94444813608877L479.63034088643764,227.08359359425873L469.1645292045983,227.08359359425873Z" fill="url(#plot-clip-324)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="508.903847431723">
+    <path d="M469.1645292045983,223.47863645424945L395.903847431723,223.47863645424945L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L490.0961525682769,370L490.0961525682769,233.94444813608877L479.63034088643764,233.94444813608877L479.63034088643764,228.08359359425873L469.1645292045983,228.08359359425873Z" fill="url(#plot-clip-336)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="508.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M582.1645292045982,222.47863645424945L508.903847431723,222.47863645424945L508.903847431723,369L508.903847431723,369L508.903847431723,369L508.903847431723,369L508.903847431723,369L603.0961525682769,369L603.0961525682769,232.94444813608877L592.6303408864376,232.94444813608877L592.6303408864376,227.08359359425873L582.1645292045982,227.08359359425873Z" fill="url(#plot-clip-325)"></path>
+    <path d="M582.1645292045982,223.47863645424945L508.903847431723,223.47863645424945L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L603.0961525682769,370L603.0961525682769,233.94444813608877L592.6303408864376,233.94444813608877L592.6303408864376,228.08359359425873L582.1645292045982,228.08359359425873Z" fill="url(#plot-clip-337)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index bf15d70cda..9a2bbea96e 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -105,118 +105,118 @@
     <text y="0.32em" transform="translate(591,370) rotate(-90)">wrestling</text>
   </g>
   <g aria-label="bar">
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-1" x="93.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="93.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M102.22175201015658,17.96318239526022L93.33474396953025,17.96318239526022L93.33474396953025,369L93.33474396953025,369L93.33474396953025,369L93.33474396953025,369L93.33474396953025,369L106.66525603046973,369L106.66525603046973,22.406686415573404L106.66525603046973,22.406686415573404L106.66525603046973,21.07363520947939L102.22175201015658,21.07363520947939Z" fill="url(#plot-clip-326)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-2" x="233.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M102.22175201015658,18.96318239526022L93.33474396953025,18.96318239526022L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L106.66525603046973,370L106.66525603046973,23.406686415573404L106.66525603046973,23.406686415573404L106.66525603046973,22.07363520947939L102.22175201015658,22.07363520947939Z" fill="url(#plot-clip-338)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="233.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M233.33474396953025,329.00846381718156L233.33474396953025,329.00846381718156L233.33474396953025,369L233.33474396953025,369L233.33474396953025,369L233.33474396953025,369L233.33474396953025,369L246.66525603046975,369L246.66525603046975,333.4519678374947L237.7782479898434,333.4519678374947L237.7782479898434,330.7858654253068L233.33474396953025,330.7858654253068Z" fill="url(#plot-clip-327)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-3" x="493.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M233.33474396953025,330.00846381718156L233.33474396953025,330.00846381718156L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L246.66525603046975,370L246.66525603046975,334.4519678374947L237.7782479898434,334.4519678374947L237.7782479898434,331.7858654253068L233.33474396953025,331.7858654253068Z" fill="url(#plot-clip-339)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="493.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M493.3347439695303,346.7824798984342L493.3347439695303,346.7824798984342L493.3347439695303,369L493.3347439695303,369L493.3347439695303,369L493.3347439695303,369L493.3347439695303,369L506.6652560304698,369L506.6652560304698,351.2259839187474L497.77824798984346,351.2259839187474L497.77824798984346,347.6711807024968L493.3347439695303,347.6711807024968Z" fill="url(#plot-clip-328)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-4" x="193.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M493.3347439695303,347.7824798984342L493.3347439695303,347.7824798984342L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L506.6652560304698,370L506.6652560304698,352.2259839187474L497.77824798984346,352.2259839187474L497.77824798984346,348.6711807024968L493.3347439695303,348.6711807024968Z" fill="url(#plot-clip-340)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="193.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M197.7782479898434,289.01692763436307L193.33474396953025,289.01692763436307L193.33474396953025,369L193.33474396953025,369L193.33474396953025,369L193.33474396953025,369L193.33474396953025,369L206.66525603046975,369L206.66525603046975,293.46043165467626L202.22175201015656,293.46043165467626L202.22175201015656,291.23867964451966L197.7782479898434,291.23867964451966Z" fill="url(#plot-clip-329)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-5" x="533.3347439695302">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M197.7782479898434,290.01692763436307L193.33474396953025,290.01692763436307L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L206.66525603046975,370L206.66525603046975,294.46043165467626L202.22175201015656,294.46043165467626L202.22175201015656,292.23867964451966L197.7782479898434,292.23867964451966Z" fill="url(#plot-clip-341)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="533.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M542.2217520101566,351.2259839187474L533.3347439695302,351.2259839187474L533.3347439695302,369L533.3347439695302,369L533.3347439695302,369L533.3347439695302,369L533.3347439695302,369L546.6652560304697,369L546.6652560304697,355.6694879390605L542.2217520101566,355.6694879390605L542.2217520101566,355.6694879390605L542.2217520101566,355.6694879390605Z" fill="url(#plot-clip-330)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-6" x="553.3347439695302">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M542.2217520101566,352.2259839187474L533.3347439695302,352.2259839187474L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L546.6652560304697,370L546.6652560304697,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605Z" fill="url(#plot-clip-342)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-6" x="553.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M562.2217520101566,311.2344477359289L553.3347439695302,311.2344477359289L553.3347439695302,369L553.3347439695302,369L553.3347439695302,369L553.3347439695302,369L553.3347439695302,369L566.6652560304697,369L566.6652560304697,315.67795175624207L566.6652560304697,315.67795175624207L566.6652560304697,313.9005501481168L562.2217520101566,313.9005501481168Z" fill="url(#plot-clip-331)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-7" x="53.33474396953026">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M562.2217520101566,312.2344477359289L553.3347439695302,312.2344477359289L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L566.6652560304697,370L566.6652560304697,316.67795175624207L566.6652560304697,316.67795175624207L566.6652560304697,314.9005501481168L562.2217520101566,314.9005501481168Z" fill="url(#plot-clip-343)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-7" x="53.33474396953026">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M53.33474396953026,151.26830300465508L53.33474396953026,151.26830300465508L53.33474396953026,369L53.33474396953026,369L53.33474396953026,369L53.33474396953026,369L53.33474396953026,369L66.66525603046975,369L66.66525603046975,155.71180702496824L57.77824798984342,155.71180702496824L57.77824798984342,153.49005501481165L53.33474396953026,153.49005501481165Z" fill="url(#plot-clip-332)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-8" x="413.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M53.33474396953026,152.26830300465508L53.33474396953026,152.26830300465508L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L66.66525603046975,370L66.66525603046975,156.71180702496824L57.77824798984342,156.71180702496824L57.77824798984342,154.49005501481165L53.33474396953026,154.49005501481165Z" fill="url(#plot-clip-344)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-8" x="413.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M413.3347439695303,324.5649597968684L413.3347439695303,324.5649597968684L413.3347439695303,369L413.3347439695303,369L413.3347439695303,369L413.3347439695303,369L413.3347439695303,369L426.6652560304698,369L426.6652560304698,324.5649597968684L413.3347439695303,324.5649597968684L413.3347439695303,324.5649597968684L413.3347439695303,324.5649597968684Z" fill="url(#plot-clip-333)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-9" x="593.3347439695302">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L426.6652560304698,370L426.6652560304698,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684Z" fill="url(#plot-clip-345)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-9" x="593.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M602.2217520101566,315.67795175624207L593.3347439695302,315.67795175624207L593.3347439695302,369L593.3347439695302,369L593.3347439695302,369L593.3347439695302,369L593.3347439695302,369L606.6652560304697,369L606.6652560304697,320.1214557765552L606.6652560304697,320.1214557765552L606.6652560304697,318.7884045704613L602.2217520101566,318.7884045704613Z" fill="url(#plot-clip-334)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-10" x="253.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M602.2217520101566,316.67795175624207L593.3347439695302,316.67795175624207L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L606.6652560304697,370L606.6652560304697,321.1214557765552L606.6652560304697,321.1214557765552L606.6652560304697,319.7884045704613L602.2217520101566,319.7884045704613Z" fill="url(#plot-clip-346)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-10" x="253.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M257.7782479898434,275.6864155734236L253.33474396953025,275.6864155734236L253.33474396953025,369L253.33474396953025,369L253.33474396953025,369L253.33474396953025,369L253.33474396953025,369L266.6652560304697,369L266.6652560304697,280.12991959373676L262.2217520101566,280.12991959373676L262.2217520101566,279.68556919170544L257.7782479898434,279.68556919170544Z" fill="url(#plot-clip-335)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-11" x="453.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M257.7782479898434,276.6864155734236L253.33474396953025,276.6864155734236L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L266.6652560304697,370L266.6652560304697,281.12991959373676L262.2217520101566,281.12991959373676L262.2217520101566,280.68556919170544L257.7782479898434,280.68556919170544Z" fill="url(#plot-clip-347)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-11" x="453.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M453.3347439695303,311.2344477359289L453.3347439695303,311.2344477359289L453.3347439695303,369L453.3347439695303,369L453.3347439695303,369L453.3347439695303,369L453.3347439695303,369L466.6652560304698,369L466.6652560304698,311.2344477359289L453.3347439695303,311.2344477359289L453.3347439695303,311.2344477359289L453.3347439695303,311.2344477359289Z" fill="url(#plot-clip-336)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-12" x="153.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L466.6652560304698,370L466.6652560304698,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289Z" fill="url(#plot-clip-348)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-12" x="153.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M157.7782479898434,324.5649597968684L153.33474396953025,324.5649597968684L153.33474396953025,369L153.33474396953025,369L153.33474396953025,369L153.33474396953025,369L153.33474396953025,369L166.66525603046975,369L166.66525603046975,329.00846381718156L162.22175201015656,329.00846381718156L162.22175201015656,326.34236140499365L157.7782479898434,326.34236140499365Z" fill="url(#plot-clip-337)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-13" x="213.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M157.7782479898434,325.5649597968684L153.33474396953025,325.5649597968684L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L166.66525603046975,370L166.66525603046975,330.00846381718156L162.22175201015656,330.00846381718156L162.22175201015656,327.34236140499365L157.7782479898434,327.34236140499365Z" fill="url(#plot-clip-349)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-13" x="213.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M217.7782479898434,333.4519678374947L213.33474396953025,333.4519678374947L213.33474396953025,369L213.33474396953025,369L213.33474396953025,369L213.33474396953025,369L213.33474396953025,369L226.66525603046975,369L226.66525603046975,337.8954718578079L222.22175201015656,337.8954718578079L222.22175201015656,337.00677105374524L217.7782479898434,337.00677105374524Z" fill="url(#plot-clip-338)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-14" x="393.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M217.7782479898434,334.4519678374947L213.33474396953025,334.4519678374947L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L226.66525603046975,370L226.66525603046975,338.8954718578079L222.22175201015656,338.8954718578079L222.22175201015656,338.00677105374524L217.7782479898434,338.00677105374524Z" fill="url(#plot-clip-350)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-14" x="393.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M393.3347439695303,284.57342361404994L393.3347439695303,284.57342361404994L393.3347439695303,369L393.3347439695303,369L393.3347439695303,369L393.3347439695303,369L393.3347439695303,369L406.6652560304698,369L406.6652560304698,289.01692763436307L397.77824798984346,289.01692763436307L397.77824798984346,285.90647482014384L393.3347439695303,285.90647482014384Z" fill="url(#plot-clip-339)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-15" x="353.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M393.3347439695303,285.57342361404994L393.3347439695303,285.57342361404994L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L406.6652560304698,370L406.6652560304698,290.01692763436307L397.77824798984346,290.01692763436307L397.77824798984346,286.90647482014384L393.3347439695303,286.90647482014384Z" fill="url(#plot-clip-351)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-15" x="353.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M353.3347439695303,306.79094371561575L353.3347439695303,306.79094371561575L353.3347439695303,369L353.3347439695303,369L353.3347439695303,369L353.3347439695303,369L353.3347439695303,369L366.6652560304698,369L366.6652560304698,311.2344477359289L357.77824798984346,311.2344477359289L357.77824798984346,310.34574693186624L353.3347439695303,310.34574693186624Z" fill="url(#plot-clip-340)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-16" x="313.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M353.3347439695303,307.79094371561575L353.3347439695303,307.79094371561575L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L366.6652560304698,370L366.6652560304698,312.2344477359289L357.77824798984346,312.2344477359289L357.77824798984346,311.34574693186624L353.3347439695303,311.34574693186624Z" fill="url(#plot-clip-352)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-16" x="313.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M313.3347439695303,311.2344477359289L313.3347439695303,311.2344477359289L313.3347439695303,369L313.3347439695303,369L313.3347439695303,369L313.3347439695303,369L313.3347439695303,369L326.6652560304698,369L326.6652560304698,315.67795175624207L317.77824798984346,315.67795175624207L317.77824798984346,314.3449005501481L313.3347439695303,314.3449005501481Z" fill="url(#plot-clip-341)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-17" x="113.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M313.3347439695303,312.2344477359289L313.3347439695303,312.2344477359289L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L326.6652560304698,370L326.6652560304698,316.67795175624207L317.77824798984346,316.67795175624207L317.77824798984346,315.3449005501481L313.3347439695303,315.3449005501481Z" fill="url(#plot-clip-353)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-17" x="113.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M122.22175201015658,342.338975878121L113.33474396953025,342.338975878121L113.33474396953025,369L113.33474396953025,369L113.33474396953025,369L113.33474396953025,369L113.33474396953025,369L126.66525603046973,369L126.66525603046973,346.7824798984342L126.66525603046973,346.7824798984342L126.66525603046973,345.89377909437155L122.22175201015658,345.89377909437155Z" fill="url(#plot-clip-342)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-18" x="333.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M122.22175201015658,343.338975878121L113.33474396953025,343.338975878121L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L126.66525603046973,370L126.66525603046973,347.7824798984342L126.66525603046973,347.7824798984342L126.66525603046973,346.89377909437155L122.22175201015658,346.89377909437155Z" fill="url(#plot-clip-354)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-18" x="333.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M337.77824798984346,302.34743969530257L333.3347439695303,302.34743969530257L333.3347439695303,369L333.3347439695303,369L333.3347439695303,369L333.3347439695303,369L333.3347439695303,369L346.6652560304698,369L346.6652560304698,306.79094371561575L342.2217520101566,306.79094371561575L342.2217520101566,305.9022429115531L337.77824798984346,305.9022429115531Z" fill="url(#plot-clip-343)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-19" x="373.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M337.77824798984346,303.34743969530257L333.3347439695303,303.34743969530257L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L346.6652560304698,370L346.6652560304698,307.79094371561575L342.2217520101566,307.79094371561575L342.2217520101566,306.9022429115531L337.77824798984346,306.9022429115531Z" fill="url(#plot-clip-355)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-19" x="373.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M377.77824798984346,355.6694879390605L373.3347439695303,355.6694879390605L373.3347439695303,369L373.3347439695303,369L373.3347439695303,369L373.3347439695303,369L373.3347439695303,369L386.6652560304698,369L386.6652560304698,360.1129919593737L382.2217520101566,360.1129919593737L382.2217520101566,359.22429115531105L377.77824798984346,359.22429115531105Z" fill="url(#plot-clip-344)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-20" x="473.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M377.77824798984346,356.6694879390605L373.3347439695303,356.6694879390605L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L386.6652560304698,370L386.6652560304698,361.1129919593737L382.2217520101566,361.1129919593737L382.2217520101566,360.22429115531105L377.77824798984346,360.22429115531105Z" fill="url(#plot-clip-356)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-20" x="473.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M482.2217520101566,342.338975878121L473.3347439695303,342.338975878121L473.3347439695303,369L473.3347439695303,369L473.3347439695303,369L473.3347439695303,369L473.3347439695303,369L486.6652560304698,369L486.6652560304698,346.7824798984342L486.6652560304698,346.7824798984342L486.6652560304698,345.89377909437155L482.2217520101566,345.89377909437155Z" fill="url(#plot-clip-345)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-21" x="173.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M482.2217520101566,343.338975878121L473.3347439695303,343.338975878121L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L486.6652560304698,370L486.6652560304698,347.7824798984342L486.6652560304698,347.7824798984342L486.6652560304698,346.89377909437155L482.2217520101566,346.89377909437155Z" fill="url(#plot-clip-357)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-21" x="173.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M173.33474396953025,315.67795175624207L173.33474396953025,315.67795175624207L173.33474396953025,369L173.33474396953025,369L173.33474396953025,369L173.33474396953025,369L173.33474396953025,369L186.66525603046975,369L186.66525603046975,320.1214557765552L177.7782479898434,320.1214557765552L177.7782479898434,319.6771053745239L173.33474396953025,319.6771053745239Z" fill="url(#plot-clip-346)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-22" x="133.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M173.33474396953025,316.67795175624207L173.33474396953025,316.67795175624207L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L186.66525603046975,370L186.66525603046975,321.1214557765552L177.7782479898434,321.1214557765552L177.7782479898434,320.6771053745239L173.33474396953025,320.6771053745239Z" fill="url(#plot-clip-358)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-22" x="133.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M137.7782479898434,324.5649597968684L133.33474396953025,324.5649597968684L133.33474396953025,369L133.33474396953025,369L133.33474396953025,369L133.33474396953025,369L133.33474396953025,369L146.66525603046975,369L146.66525603046975,329.00846381718156L142.22175201015656,329.00846381718156L142.22175201015656,325.453660600931L137.7782479898434,325.453660600931Z" fill="url(#plot-clip-347)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-23" x="273.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M137.7782479898434,325.5649597968684L133.33474396953025,325.5649597968684L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L146.66525603046975,370L146.66525603046975,330.00846381718156L142.22175201015656,330.00846381718156L142.22175201015656,326.453660600931L137.7782479898434,326.453660600931Z" fill="url(#plot-clip-359)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-23" x="273.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M273.3347439695303,351.2259839187474L273.3347439695303,351.2259839187474L273.3347439695303,369L273.3347439695303,369L273.3347439695303,369L273.3347439695303,369L273.3347439695303,369L286.6652560304698,369L286.6652560304698,351.2259839187474L273.3347439695303,351.2259839187474L273.3347439695303,351.2259839187474L273.3347439695303,351.2259839187474Z" fill="url(#plot-clip-348)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-24" x="73.33474396953025">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L286.6652560304698,370L286.6652560304698,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474Z" fill="url(#plot-clip-360)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-24" x="73.33474396953025">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M73.33474396953025,346.7824798984342L73.33474396953025,346.7824798984342L73.33474396953025,369L73.33474396953025,369L73.33474396953025,369L73.33474396953025,369L73.33474396953025,369L86.66525603046973,369L86.66525603046973,351.2259839187474L77.77824798984341,351.2259839187474L77.77824798984341,347.6711807024968L73.33474396953025,347.6711807024968Z" fill="url(#plot-clip-349)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-25" x="573.3347439695302">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M73.33474396953025,347.7824798984342L73.33474396953025,347.7824798984342L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L86.66525603046973,370L86.66525603046973,352.2259839187474L77.77824798984341,352.2259839187474L77.77824798984341,348.6711807024968L73.33474396953025,348.6711807024968Z" fill="url(#plot-clip-361)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-25" x="573.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M577.7782479898434,329.00846381718156L573.3347439695302,329.00846381718156L573.3347439695302,369L573.3347439695302,369L573.3347439695302,369L573.3347439695302,369L573.3347439695302,369L586.6652560304697,369L586.6652560304697,333.4519678374947L582.2217520101566,333.4519678374947L582.2217520101566,329.8971646212442L577.7782479898434,329.8971646212442Z" fill="url(#plot-clip-350)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-26" x="433.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M577.7782479898434,330.00846381718156L573.3347439695302,330.00846381718156L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L586.6652560304697,370L586.6652560304697,334.4519678374947L582.2217520101566,334.4519678374947L582.2217520101566,330.8971646212442L577.7782479898434,330.8971646212442Z" fill="url(#plot-clip-362)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-26" x="433.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M442.2217520101566,311.2344477359289L433.3347439695303,311.2344477359289L433.3347439695303,369L433.3347439695303,369L433.3347439695303,369L433.3347439695303,369L433.3347439695303,369L446.6652560304698,369L446.6652560304698,315.67795175624207L442.2217520101566,315.67795175624207L442.2217520101566,315.67795175624207L442.2217520101566,315.67795175624207Z" fill="url(#plot-clip-351)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-27" x="513.3347439695302">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M442.2217520101566,312.2344477359289L433.3347439695303,312.2344477359289L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L446.6652560304698,370L446.6652560304698,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207Z" fill="url(#plot-clip-363)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-27" x="513.3347439695302">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M517.7782479898434,337.8954718578079L513.3347439695302,337.8954718578079L513.3347439695302,369L513.3347439695302,369L513.3347439695302,369L513.3347439695302,369L513.3347439695302,369L526.6652560304697,369L526.6652560304697,342.338975878121L522.2217520101566,342.338975878121L522.2217520101566,339.67287346593315L517.7782479898434,339.67287346593315Z" fill="url(#plot-clip-352)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="369" id="plot-clip-28" x="293.3347439695303">
-      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617" fill="null"></rect>
+    <path d="M517.7782479898434,338.8954718578079L513.3347439695302,338.8954718578079L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L526.6652560304697,370L526.6652560304697,343.338975878121L522.2217520101566,343.338975878121L522.2217520101566,340.67287346593315L517.7782479898434,340.67287346593315Z" fill="url(#plot-clip-364)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-28" x="293.3347439695303">
+      <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M302.2217520101566,320.1214557765552L293.3347439695303,320.1214557765552L293.3347439695303,369L293.3347439695303,369L293.3347439695303,369L293.3347439695303,369L293.3347439695303,369L306.6652560304698,369L306.6652560304698,324.5649597968684L306.6652560304698,324.5649597968684L306.6652560304698,322.7875581887431L302.2217520101566,322.7875581887431Z" fill="url(#plot-clip-353)"></path>
+    <path d="M302.2217520101566,321.1214557765552L293.3347439695303,321.1214557765552L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L306.6652560304698,370L306.6652560304698,325.5649597968684L306.6652560304698,325.5649597968684L306.6652560304698,323.7875581887431L302.2217520101566,323.7875581887431Z" fill="url(#plot-clip-365)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index c2ca6c5f30..4a6e5512a2 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -75,26 +75,26 @@
       <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
     </g>
     <g aria-label="bar">
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-1" x="41.36538314948109">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-1" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <path d="M163.67702083174527,302.5552264485849L41.36538314948109,302.5552264485849L41.36538314948109,379L41.36538314948109,379L41.36538314948109,379L41.36538314948109,379L41.36538314948109,379L637.6346168505189,379L637.6346168505189,317.8441811588679L178.96597554202827,317.8441811588679L178.96597554202827,307.60058150297846L163.67702083174527,307.60058150297846Z" fill="url(#plot-clip-354)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-2" x="41.36538314948109">
+      <path d="M163.67702083174527,303.5552264485849L41.36538314948109,303.5552264485849L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L637.6346168505189,380L637.6346168505189,318.8441811588679L178.96597554202827,318.8441811588679L178.96597554202827,308.60058150297846L163.67702083174527,308.60058150297846Z" fill="url(#plot-clip-366)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-2" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <path d="M591.7677527196698,195.53254347660373L41.36538314948109,195.53254347660373L41.36538314948109,302.5552264485849L163.67702083174527,302.5552264485849L163.67702083174527,307.60058150297846L178.96597554202827,307.60058150297846L178.96597554202827,317.8441811588679L637.6346168505189,317.8441811588679L637.6346168505189,210.82149818688674L607.0567074299529,210.82149818688674L607.0567074299529,200.88367762520315L591.7677527196698,200.88367762520315Z" fill="url(#plot-clip-355)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-3" x="41.36538314948109">
+      <path d="M591.7677527196698,196.53254347660373L41.36538314948109,196.53254347660373L41.36538314948109,303.5552264485849L163.67702083174527,303.5552264485849L163.67702083174527,308.60058150297846L178.96597554202827,308.60058150297846L178.96597554202827,318.8441811588679L637.6346168505189,318.8441811588679L637.6346168505189,211.82149818688674L607.0567074299529,211.82149818688674L607.0567074299529,201.88367762520315L591.7677527196698,201.88367762520315Z" fill="url(#plot-clip-367)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-3" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <path d="M133.09911141117922,103.79881521490563L41.36538314948109,103.79881521490563L41.36538314948109,195.53254347660373L591.7677527196698,195.53254347660373L591.7677527196698,200.88367762520315L607.0567074299529,200.88367762520315L607.0567074299529,210.82149818688674L637.6346168505189,210.82149818688674L637.6346168505189,119.08776992518864L148.38806612146226,119.08776992518864L148.38806612146226,116.18286853023574L133.09911141117922,116.18286853023574Z" fill="url(#plot-clip-356)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-4" x="41.36538314948109">
+      <path d="M133.09911141117922,104.79881521490563L41.36538314948109,104.79881521490563L41.36538314948109,196.53254347660373L591.7677527196698,196.53254347660373L591.7677527196698,201.88367762520315L607.0567074299529,201.88367762520315L607.0567074299529,211.82149818688674L637.6346168505189,211.82149818688674L637.6346168505189,120.08776992518864L148.38806612146226,120.08776992518864L148.38806612146226,117.18286853023574L133.09911141117922,117.18286853023574Z" fill="url(#plot-clip-368)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-4" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <path d="M240.12179438316036,57.93195108405655L41.36538314948109,57.93195108405655L41.36538314948109,103.79881521490563L133.09911141117922,103.79881521490563L133.09911141117922,116.18286853023574L148.38806612146226,116.18286853023574L148.38806612146226,119.08776992518864L637.6346168505189,119.08776992518864L637.6346168505189,73.22090579433956L255.4107490934434,73.22090579433956L255.4107490934434,61.75418976162729L240.12179438316036,61.75418976162729Z" fill="url(#plot-clip-357)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="379" id="plot-clip-5" x="41.36538314948109">
+      <path d="M240.12179438316036,58.93195108405655L41.36538314948109,58.93195108405655L41.36538314948109,104.79881521490563L133.09911141117922,104.79881521490563L133.09911141117922,117.18286853023574L148.38806612146226,117.18286853023574L148.38806612146226,120.08776992518864L637.6346168505189,120.08776992518864L637.6346168505189,74.22090579433956L255.4107490934434,74.22090579433956L255.4107490934434,62.75418976162729L240.12179438316036,62.75418976162729Z" fill="url(#plot-clip-369)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-5" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path d="M362.43343206542454,12.06508695320747L41.36538314948109,12.06508695320747L41.36538314948109,57.93195108405655L240.12179438316036,57.93195108405655L240.12179438316036,61.75418976162729L255.4107490934434,61.75418976162729L255.4107490934434,73.22090579433956L637.6346168505189,73.22090579433956L637.6346168505189,27.354041663490477L377.7223867757076,27.354041663490477L377.7223867757076,22.61446570330361L362.43343206542454,22.61446570330361Z" fill="url(#plot-clip-358)"></path>
+      <path d="M362.43343206542454,13.06508695320747L41.36538314948109,13.06508695320747L41.36538314948109,58.93195108405655L240.12179438316036,58.93195108405655L240.12179438316036,62.75418976162729L255.4107490934434,62.75418976162729L255.4107490934434,74.22090579433956L637.6346168505189,74.22090579433956L637.6346168505189,28.354041663490477L377.7223867757076,28.354041663490477L377.7223867757076,23.61446570330361L362.43343206542454,23.61446570330361Z" fill="url(#plot-clip-370)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index 12ce547efc..104881293e 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -19,6 +19,14 @@ export function waffleShorthandNegative() {
   return Plot.waffleY([-4, -9, -24, -46, -66, -7]).plot({x: {axis: "top"}});
 }
 
+export function waffleStroke() {
+  return Plot.waffleY([4.5, 9, 24, 46, 66, 7], {fill: "#eee", stroke: "red", gap: 0}).plot();
+}
+
+export function waffleStrokeNegative() {
+  return Plot.waffleY([-4.5, -9, -24, -46, -66, -7], {fill: "#eee", stroke: "red", gap: 0}).plot({x: {axis: "top"}});
+}
+
 export function waffleX() {
   return Plot.plot({
     marginLeft: 80,

From efe5913f53437c369064282341efadb2e2347749 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 13:27:53 -0400
Subject: [PATCH 16/22] fix test snapshots

---
 src/marks/waffle.js                     |   6 +-
 src/style.js                            |   5 ++
 test/output/waffleShorthand.svg         |  24 ++---
 test/output/waffleShorthandNegative.svg |  24 ++---
 test/output/waffleStroke.svg            |  24 ++---
 test/output/waffleStrokeNegative.svg    |  24 ++---
 test/output/waffleX.svg                 |  20 ++---
 test/output/waffleXStacked.svg          |  20 ++---
 test/output/waffleY.svg                 |  20 ++---
 test/output/waffleYGrouped.svg          | 112 ++++++++++++------------
 test/output/waffleYStacked.html         |  20 ++---
 test/plot.js                            |  18 ++++
 12 files changed, 170 insertions(+), 147 deletions(-)

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 88f4019df6..c1691ab6d6 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -1,6 +1,6 @@
 import {extent, namespaces} from "d3";
 import {hasXY, identity, indexOf} from "../options.js";
-import {getClipId} from "../style.js";
+import {getPatternId} from "../style.js";
 import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
 import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
@@ -53,7 +53,7 @@ export class WaffleX extends BarX {
       const y0 = +rect.getAttribute("y") + wy;
       const fill = rect.getAttribute("fill"); // TODO handle constant fill
       const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
-      const patternId = getClipId(); // TODO lazy
+      const patternId = getPatternId(); // TODO reused shared patterns
       const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
       const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
@@ -137,7 +137,7 @@ export class WaffleY extends BarY {
       const x0 = +rect.getAttribute("x") + wx;
       const fill = rect.getAttribute("fill"); // TODO handle constant fill
       const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
-      const patternId = getClipId(); // TODO lazy
+      const patternId = getPatternId(); // TODO reused shared patterns
       const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
       const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
diff --git a/src/style.js b/src/style.js
index deeb66346f..f984750bf4 100644
--- a/src/style.js
+++ b/src/style.js
@@ -9,11 +9,16 @@ import {warn} from "./warnings.js";
 export const offset = (typeof window !== "undefined" ? window.devicePixelRatio > 1 : typeof it === "undefined") ? 0 : 0.5; // prettier-ignore
 
 let nextClipId = 0;
+let nextPatternId = 0;
 
 export function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
 
+export function getPatternId() {
+  return `plot-pattern-${++nextPatternId}`;
+}
+
 export function styles(
   mark,
   {
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index a9769ec74c..55afd6b3af 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -62,29 +62,29 @@
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="50.57575757575758">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="50.57575757575758">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788Z" fill="url(#plot-clip-299)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="145.57575757575756">
+    <path d="M50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="145.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-clip-300)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="240.57575757575756">
+    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="240.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-clip-301)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="335.57575757575756">
+    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="335.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-clip-302)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="430.57575757575756">
+    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="430.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-clip-303)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-6" x="525.5757575757576">
+    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-pattern-5)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-6" x="525.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-clip-304)"></path>
+    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
index b3d73e9cf3..9c9c10677e 100644
--- a/test/output/waffleShorthandNegative.svg
+++ b/test/output/waffleShorthandNegative.svg
@@ -62,29 +62,29 @@
     <text transform="translate(525,30)">5</text>
   </g>
   <g aria-label="bar">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-1" x="50.57575757575758">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-1" x="50.57575757575758">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121Z" fill="url(#plot-clip-305)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-2" x="145.57575757575756">
+    <path d="M50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-2" x="145.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-clip-306)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-3" x="240.57575757575756">
+    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-3" x="240.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-clip-307)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-4" x="335.57575757575756">
+    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-4" x="335.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-clip-308)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-5" x="430.57575757575756">
+    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-5" x="430.57575757575756">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-clip-309)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-6" x="525.5757575757576">
+    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-pattern-5)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-6" x="525.5757575757576">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-clip-310)"></path>
+    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStroke.svg b/test/output/waffleStroke.svg
index b7d0bdc960..b078c85c80 100644
--- a/test/output/waffleStroke.svg
+++ b/test/output/waffleStroke.svg
@@ -62,29 +62,29 @@
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
   <g aria-label="bar" fill="#eee" stroke="red">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="50.57575757575758">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="50.57575757575758">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,327.57575757575756L50.57575757575758,327.57575757575756L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L71.78787878787878,348.7878787878788L71.78787878787878,338.1818181818182L50.57575757575758,338.1818181818182Z" fill="url(#plot-clip-311)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="145.57575757575756">
+    <path d="M50.57575757575758,327.57575757575756L50.57575757575758,327.57575757575756L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L71.78787878787878,348.7878787878788L71.78787878787878,338.1818181818182L50.57575757575758,338.1818181818182Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="145.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-clip-312)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="240.57575757575756">
+    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="240.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-clip-313)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="335.57575757575756">
+    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="335.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-clip-314)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="430.57575757575756">
+    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="430.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-clip-315)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-clip-6" x="525.5757575757576">
+    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-pattern-5)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-6" x="525.5757575757576">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-clip-316)"></path>
+    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStrokeNegative.svg b/test/output/waffleStrokeNegative.svg
index d74dd9d5b2..bc29837dd9 100644
--- a/test/output/waffleStrokeNegative.svg
+++ b/test/output/waffleStrokeNegative.svg
@@ -62,29 +62,29 @@
     <text transform="translate(525,30)">5</text>
   </g>
   <g aria-label="bar" fill="#eee" stroke="red">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-1" x="50.57575757575758">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-1" x="50.57575757575758">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,72.42424242424242L50.57575757575758,72.42424242424242L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L71.78787878787878,51.21212121212121L71.78787878787878,61.81818181818181L50.57575757575758,61.81818181818181Z" fill="url(#plot-clip-317)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-2" x="145.57575757575756">
+    <path d="M50.57575757575758,72.42424242424242L50.57575757575758,72.42424242424242L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L71.78787878787878,51.21212121212121L71.78787878787878,61.81818181818181L50.57575757575758,61.81818181818181Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-2" x="145.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-clip-318)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-3" x="240.57575757575756">
+    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-3" x="240.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-clip-319)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-4" x="335.57575757575756">
+    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-4" x="335.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-clip-320)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-5" x="430.57575757575756">
+    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-5" x="430.57575757575756">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-clip-321)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-clip-6" x="525.5757575757576">
+    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-pattern-5)"></path>
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-6" x="525.5757575757576">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-clip-322)"></path>
+    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index f82eb56525..6328c62225 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -46,26 +46,26 @@
     <text transform="translate(618.241743637451,30)">300</text>
   </g>
   <g aria-label="bar">
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-1" y="35.426373845438235">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-1" y="35.426373845438235">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M376.03295900059805,46.191208718187255L376.03295900059805,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,51.573626154561765L370.65054156422354,51.573626154561765L370.65054156422354,51.573626154561765L374.2567612465944,51.573626154561765L374.2567612465944,46.191208718187255Z" fill="url(#plot-clip-323)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-2" y="56.426373845438235">
+    <path d="M376.03295900059805,46.191208718187255L376.03295900059805,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,51.573626154561765L370.65054156422354,51.573626154561765L370.65054156422354,51.573626154561765L374.2567612465944,51.573626154561765L374.2567612465944,46.191208718187255Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-2" y="56.426373845438235">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M623.6241610738255,56.426373845438235L623.6241610738255,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,72.57362615456177L618.241743637451,72.57362615456177L618.241743637451,61.808791281812745L623.5165127250981,61.808791281812745L623.5165127250981,56.426373845438235Z" fill="url(#plot-clip-324)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-3" y="77.42637384543823">
+    <path d="M623.6241610738255,56.426373845438235L623.6241610738255,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,72.57362615456177L618.241743637451,72.57362615456177L618.241743637451,61.808791281812745L623.5165127250981,61.808791281812745L623.5165127250981,56.426373845438235Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-3" y="77.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M446.0043856734667,88.19120871818726L446.0043856734667,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,93.57362615456177L440.6219682370922,93.57362615456177L440.6219682370922,93.57362615456177L443.52847365273436,93.57362615456177L443.52847365273436,88.19120871818726Z" fill="url(#plot-clip-325)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-4" y="98.42637384543823">
+    <path d="M446.0043856734667,88.19120871818726L446.0043856734667,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,93.57362615456177L440.6219682370922,93.57362615456177L440.6219682370922,93.57362615456177L443.52847365273436,93.57362615456177L443.52847365273436,88.19120871818726Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-4" y="98.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M306.0615323277294,103.80879128181274L306.0615323277294,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,114.57362615456177L300.6791148913549,114.57362615456177L300.6791148913549,109.19120871818726L303.69326865572464,109.19120871818726L303.69326865572464,103.80879128181274Z" fill="url(#plot-clip-326)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-clip-5" y="119.42637384543823">
+    <path d="M306.0615323277294,103.80879128181274L306.0615323277294,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,114.57362615456177L300.6791148913549,114.57362615456177L300.6791148913549,109.19120871818726L303.69326865572464,109.19120871818726L303.69326865572464,103.80879128181274Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-5" y="119.42637384543823">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M306.0615323277294,124.80879128181274L306.0615323277294,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,135.57362615456177L300.6791148913549,135.57362615456177L300.6791148913549,130.19120871818726L303.69326865572464,130.19120871818726L303.69326865572464,124.80879128181274Z" fill="url(#plot-clip-327)"></path>
+    <path d="M306.0615323277294,124.80879128181274L306.0615323277294,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,135.57362615456177L300.6791148913549,135.57362615456177L300.6791148913549,130.19120871818726L303.69326865572464,130.19120871818726L303.69326865572464,124.80879128181274Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="80" x2="80" y1="30" y2="140"></line>
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
index 96c49f4028..0acb27e81c 100644
--- a/test/output/waffleXStacked.svg
+++ b/test/output/waffleXStacked.svg
@@ -38,26 +38,26 @@
     <text y="0.71em" transform="translate(608.03671962627,210)">900</text>
   </g>
   <g aria-label="bar">
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-1" y="10.587437793337756">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-1" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M131.07360259607321,132.7684006490183L131.07360259607321,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,199.41256220666224L119.9662423364659,199.41256220666224L119.9662423364659,143.87576090862564L127.40817371040266,143.87576090862564L127.40817371040266,132.7684006490183Z" fill="url(#plot-clip-328)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-2" y="10.587437793337756">
+    <path d="M131.07360259607321,132.7684006490183L131.07360259607321,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,199.41256220666224L119.9662423364659,199.41256220666224L119.9662423364659,143.87576090862564L127.40817371040266,143.87576090862564L127.40817371040266,132.7684006490183Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-2" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M331.00608726900504,77.2315993509817L331.00608726900504,10.587437793337756L131.07360259607321,10.587437793337756L131.07360259607321,132.7684006490183L127.40817371040266,132.7684006490183L127.40817371040266,143.87576090862564L119.9662423364659,143.87576090862564L119.9662423364659,199.41256220666224L319.8987270093977,199.41256220666224L319.8987270093977,88.33895961058901L327.1185111781422,88.33895961058901L327.1185111781422,77.2315993509817Z" fill="url(#plot-clip-329)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-3" y="10.587437793337756">
+    <path d="M331.00608726900504,77.2315993509817L331.00608726900504,10.587437793337756L131.07360259607321,10.587437793337756L131.07360259607321,132.7684006490183L127.40817371040266,132.7684006490183L127.40817371040266,143.87576090862564L119.9662423364659,143.87576090862564L119.9662423364659,199.41256220666224L319.8987270093977,199.41256220666224L319.8987270093977,88.33895961058901L327.1185111781422,88.33895961058901L327.1185111781422,77.2315993509817Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-3" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M464.29441038429286,77.2315993509817L464.29441038429286,10.587437793337756L331.00608726900504,10.587437793337756L331.00608726900504,77.2315993509817L327.1185111781422,77.2315993509817L327.1185111781422,88.33895961058901L319.8987270093977,88.33895961058901L319.8987270093977,199.41256220666224L453.1870501246856,199.41256220666224L453.1870501246856,88.33895961058901L455.2974485740103,88.33895961058901L455.2974485740103,77.2315993509817Z" fill="url(#plot-clip-330)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-4" y="10.587437793337756">
+    <path d="M464.29441038429286,77.2315993509817L464.29441038429286,10.587437793337756L331.00608726900504,10.587437793337756L331.00608726900504,77.2315993509817L327.1185111781422,77.2315993509817L327.1185111781422,88.33895961058901L319.8987270093977,88.33895961058901L319.8987270093977,199.41256220666224L453.1870501246856,199.41256220666224L453.1870501246856,88.33895961058901L455.2974485740103,88.33895961058901L455.2974485740103,77.2315993509817Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-4" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M542.0459322015441,132.7684006490183L542.0459322015441,10.587437793337756L464.29441038429286,10.587437793337756L464.29441038429286,77.2315993509817L455.2974485740103,77.2315993509817L455.2974485740103,88.33895961058901L453.1870501246856,88.33895961058901L453.1870501246856,199.41256220666224L530.9385719419367,199.41256220666224L530.9385719419367,143.87576090862564L539.2690921366423,143.87576090862564L539.2690921366423,132.7684006490183Z" fill="url(#plot-clip-331)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-clip-5" y="10.587437793337756">
+    <path d="M542.0459322015441,132.7684006490183L542.0459322015441,10.587437793337756L464.29441038429286,10.587437793337756L464.29441038429286,77.2315993509817L455.2974485740103,77.2315993509817L455.2974485740103,88.33895961058901L453.1870501246856,88.33895961058901L453.1870501246856,199.41256220666224L530.9385719419367,199.41256220666224L530.9385719419367,143.87576090862564L539.2690921366423,143.87576090862564L539.2690921366423,132.7684006490183Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-5" y="10.587437793337756">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M630.9048142784027,10.587437793337756L630.9048142784027,10.587437793337756L542.0459322015441,10.587437793337756L542.0459322015441,132.7684006490183L539.2690921366423,132.7684006490183L539.2690921366423,143.87576090862564L530.9385719419367,143.87576090862564L530.9385719419367,199.41256220666224L619.7974540187954,199.41256220666224L619.7974540187954,21.694798052945078L623.240735699273,21.694798052945078L623.240735699273,10.587437793337756Z" fill="url(#plot-clip-332)"></path>
+    <path d="M630.9048142784027,10.587437793337756L630.9048142784027,10.587437793337756L542.0459322015441,10.587437793337756L542.0459322015441,132.7684006490183L539.2690921366423,132.7684006490183L539.2690921366423,143.87576090862564L530.9385719419367,143.87576090862564L530.9385719419367,199.41256220666224L619.7974540187954,199.41256220666224L619.7974540187954,21.694798052945078L623.240735699273,21.694798052945078L623.240735699273,10.587437793337756Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="20" x2="20" y1="0" y2="210"></line>
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index 28e22d7e72..ad4e74b86e 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -64,26 +64,26 @@
     <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
   </g>
   <g aria-label="bar">
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="56.90384743172304">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="56.90384743172304">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M77.83547079540169,171.14957804505283L56.90384743172304,171.14957804505283L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L151.09615256827698,370L151.09615256827698,181.61538972689215L88.30128247724102,181.61538972689215L88.30128247724102,174.60329590005995L77.83547079540169,174.60329590005995Z" fill="url(#plot-clip-333)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="169.90384743172302">
+    <path d="M77.83547079540169,171.14957804505283L56.90384743172304,171.14957804505283L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L151.09615256827698,370L151.09615256827698,181.61538972689215L88.30128247724102,181.61538972689215L88.30128247724102,174.60329590005995L77.83547079540169,174.60329590005995Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="169.90384743172302">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M201.301282477241,14.162402817462976L169.90384743172302,14.162402817462976L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L264.0961525682769,370L264.0961525682769,24.62821449930226L211.76709415908033,24.62821449930226L211.76709415908033,14.371719051099547L201.301282477241,14.371719051099547Z" fill="url(#plot-clip-334)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="282.903847431723">
+    <path d="M201.301282477241,14.162402817462976L169.90384743172302,14.162402817462976L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L264.0961525682769,370L264.0961525682769,24.62821449930226L211.76709415908033,24.62821449930226L211.76709415908033,14.371719051099547L201.301282477241,14.371719051099547Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="282.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M335.23290584091967,129.28633131769553L282.903847431723,129.28633131769553L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L377.0961525682769,370L377.0961525682769,139.75214299953484L345.69871752275895,139.75214299953484L345.69871752275895,134.1006046913417L335.23290584091967,134.1006046913417Z" fill="url(#plot-clip-335)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="395.903847431723">
+    <path d="M335.23290584091967,129.28633131769553L282.903847431723,129.28633131769553L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L377.0961525682769,370L377.0961525682769,139.75214299953484L345.69871752275895,139.75214299953484L345.69871752275895,134.1006046913417L335.23290584091967,134.1006046913417Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="395.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M469.1645292045983,223.47863645424945L395.903847431723,223.47863645424945L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L490.0961525682769,370L490.0961525682769,233.94444813608877L479.63034088643764,233.94444813608877L479.63034088643764,228.08359359425873L469.1645292045983,228.08359359425873Z" fill="url(#plot-clip-336)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="508.903847431723">
+    <path d="M469.1645292045983,223.47863645424945L395.903847431723,223.47863645424945L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L490.0961525682769,370L490.0961525682769,233.94444813608877L479.63034088643764,233.94444813608877L479.63034088643764,228.08359359425873L469.1645292045983,228.08359359425873Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="508.903847431723">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M582.1645292045982,223.47863645424945L508.903847431723,223.47863645424945L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L603.0961525682769,370L603.0961525682769,233.94444813608877L592.6303408864376,233.94444813608877L592.6303408864376,228.08359359425873L582.1645292045982,228.08359359425873Z" fill="url(#plot-clip-337)"></path>
+    <path d="M582.1645292045982,223.47863645424945L508.903847431723,223.47863645424945L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L603.0961525682769,370L603.0961525682769,233.94444813608877L592.6303408864376,233.94444813608877L592.6303408864376,228.08359359425873L582.1645292045982,228.08359359425873Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index 9a2bbea96e..c07212356d 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -105,118 +105,118 @@
     <text y="0.32em" transform="translate(591,370) rotate(-90)">wrestling</text>
   </g>
   <g aria-label="bar">
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-1" x="93.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="93.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M102.22175201015658,18.96318239526022L93.33474396953025,18.96318239526022L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L106.66525603046973,370L106.66525603046973,23.406686415573404L106.66525603046973,23.406686415573404L106.66525603046973,22.07363520947939L102.22175201015658,22.07363520947939Z" fill="url(#plot-clip-338)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-2" x="233.33474396953025">
+    <path d="M102.22175201015658,18.96318239526022L93.33474396953025,18.96318239526022L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L106.66525603046973,370L106.66525603046973,23.406686415573404L106.66525603046973,23.406686415573404L106.66525603046973,22.07363520947939L102.22175201015658,22.07363520947939Z" fill="url(#plot-pattern-1)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="233.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M233.33474396953025,330.00846381718156L233.33474396953025,330.00846381718156L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L246.66525603046975,370L246.66525603046975,334.4519678374947L237.7782479898434,334.4519678374947L237.7782479898434,331.7858654253068L233.33474396953025,331.7858654253068Z" fill="url(#plot-clip-339)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-3" x="493.3347439695303">
+    <path d="M233.33474396953025,330.00846381718156L233.33474396953025,330.00846381718156L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L246.66525603046975,370L246.66525603046975,334.4519678374947L237.7782479898434,334.4519678374947L237.7782479898434,331.7858654253068L233.33474396953025,331.7858654253068Z" fill="url(#plot-pattern-2)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="493.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M493.3347439695303,347.7824798984342L493.3347439695303,347.7824798984342L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L506.6652560304698,370L506.6652560304698,352.2259839187474L497.77824798984346,352.2259839187474L497.77824798984346,348.6711807024968L493.3347439695303,348.6711807024968Z" fill="url(#plot-clip-340)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-4" x="193.33474396953025">
+    <path d="M493.3347439695303,347.7824798984342L493.3347439695303,347.7824798984342L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L506.6652560304698,370L506.6652560304698,352.2259839187474L497.77824798984346,352.2259839187474L497.77824798984346,348.6711807024968L493.3347439695303,348.6711807024968Z" fill="url(#plot-pattern-3)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="193.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M197.7782479898434,290.01692763436307L193.33474396953025,290.01692763436307L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L206.66525603046975,370L206.66525603046975,294.46043165467626L202.22175201015656,294.46043165467626L202.22175201015656,292.23867964451966L197.7782479898434,292.23867964451966Z" fill="url(#plot-clip-341)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-5" x="533.3347439695302">
+    <path d="M197.7782479898434,290.01692763436307L193.33474396953025,290.01692763436307L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L206.66525603046975,370L206.66525603046975,294.46043165467626L202.22175201015656,294.46043165467626L202.22175201015656,292.23867964451966L197.7782479898434,292.23867964451966Z" fill="url(#plot-pattern-4)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="533.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M542.2217520101566,352.2259839187474L533.3347439695302,352.2259839187474L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L546.6652560304697,370L546.6652560304697,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605Z" fill="url(#plot-clip-342)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-6" x="553.3347439695302">
+    <path d="M542.2217520101566,352.2259839187474L533.3347439695302,352.2259839187474L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L546.6652560304697,370L546.6652560304697,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605Z" fill="url(#plot-pattern-5)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-6" x="553.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M562.2217520101566,312.2344477359289L553.3347439695302,312.2344477359289L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L566.6652560304697,370L566.6652560304697,316.67795175624207L566.6652560304697,316.67795175624207L566.6652560304697,314.9005501481168L562.2217520101566,314.9005501481168Z" fill="url(#plot-clip-343)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-7" x="53.33474396953026">
+    <path d="M562.2217520101566,312.2344477359289L553.3347439695302,312.2344477359289L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L566.6652560304697,370L566.6652560304697,316.67795175624207L566.6652560304697,316.67795175624207L566.6652560304697,314.9005501481168L562.2217520101566,314.9005501481168Z" fill="url(#plot-pattern-6)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-7" x="53.33474396953026">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M53.33474396953026,152.26830300465508L53.33474396953026,152.26830300465508L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L66.66525603046975,370L66.66525603046975,156.71180702496824L57.77824798984342,156.71180702496824L57.77824798984342,154.49005501481165L53.33474396953026,154.49005501481165Z" fill="url(#plot-clip-344)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-8" x="413.3347439695303">
+    <path d="M53.33474396953026,152.26830300465508L53.33474396953026,152.26830300465508L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L66.66525603046975,370L66.66525603046975,156.71180702496824L57.77824798984342,156.71180702496824L57.77824798984342,154.49005501481165L53.33474396953026,154.49005501481165Z" fill="url(#plot-pattern-7)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-8" x="413.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L426.6652560304698,370L426.6652560304698,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684Z" fill="url(#plot-clip-345)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-9" x="593.3347439695302">
+    <path d="M413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L426.6652560304698,370L426.6652560304698,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684Z" fill="url(#plot-pattern-8)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-9" x="593.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M602.2217520101566,316.67795175624207L593.3347439695302,316.67795175624207L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L606.6652560304697,370L606.6652560304697,321.1214557765552L606.6652560304697,321.1214557765552L606.6652560304697,319.7884045704613L602.2217520101566,319.7884045704613Z" fill="url(#plot-clip-346)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-10" x="253.33474396953025">
+    <path d="M602.2217520101566,316.67795175624207L593.3347439695302,316.67795175624207L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L606.6652560304697,370L606.6652560304697,321.1214557765552L606.6652560304697,321.1214557765552L606.6652560304697,319.7884045704613L602.2217520101566,319.7884045704613Z" fill="url(#plot-pattern-9)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-10" x="253.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M257.7782479898434,276.6864155734236L253.33474396953025,276.6864155734236L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L266.6652560304697,370L266.6652560304697,281.12991959373676L262.2217520101566,281.12991959373676L262.2217520101566,280.68556919170544L257.7782479898434,280.68556919170544Z" fill="url(#plot-clip-347)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-11" x="453.3347439695303">
+    <path d="M257.7782479898434,276.6864155734236L253.33474396953025,276.6864155734236L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L266.6652560304697,370L266.6652560304697,281.12991959373676L262.2217520101566,281.12991959373676L262.2217520101566,280.68556919170544L257.7782479898434,280.68556919170544Z" fill="url(#plot-pattern-10)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-11" x="453.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L466.6652560304698,370L466.6652560304698,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289Z" fill="url(#plot-clip-348)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-12" x="153.33474396953025">
+    <path d="M453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L466.6652560304698,370L466.6652560304698,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289Z" fill="url(#plot-pattern-11)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-12" x="153.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M157.7782479898434,325.5649597968684L153.33474396953025,325.5649597968684L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L166.66525603046975,370L166.66525603046975,330.00846381718156L162.22175201015656,330.00846381718156L162.22175201015656,327.34236140499365L157.7782479898434,327.34236140499365Z" fill="url(#plot-clip-349)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-13" x="213.33474396953025">
+    <path d="M157.7782479898434,325.5649597968684L153.33474396953025,325.5649597968684L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L166.66525603046975,370L166.66525603046975,330.00846381718156L162.22175201015656,330.00846381718156L162.22175201015656,327.34236140499365L157.7782479898434,327.34236140499365Z" fill="url(#plot-pattern-12)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-13" x="213.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M217.7782479898434,334.4519678374947L213.33474396953025,334.4519678374947L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L226.66525603046975,370L226.66525603046975,338.8954718578079L222.22175201015656,338.8954718578079L222.22175201015656,338.00677105374524L217.7782479898434,338.00677105374524Z" fill="url(#plot-clip-350)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-14" x="393.3347439695303">
+    <path d="M217.7782479898434,334.4519678374947L213.33474396953025,334.4519678374947L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L226.66525603046975,370L226.66525603046975,338.8954718578079L222.22175201015656,338.8954718578079L222.22175201015656,338.00677105374524L217.7782479898434,338.00677105374524Z" fill="url(#plot-pattern-13)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-14" x="393.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M393.3347439695303,285.57342361404994L393.3347439695303,285.57342361404994L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L406.6652560304698,370L406.6652560304698,290.01692763436307L397.77824798984346,290.01692763436307L397.77824798984346,286.90647482014384L393.3347439695303,286.90647482014384Z" fill="url(#plot-clip-351)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-15" x="353.3347439695303">
+    <path d="M393.3347439695303,285.57342361404994L393.3347439695303,285.57342361404994L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L406.6652560304698,370L406.6652560304698,290.01692763436307L397.77824798984346,290.01692763436307L397.77824798984346,286.90647482014384L393.3347439695303,286.90647482014384Z" fill="url(#plot-pattern-14)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-15" x="353.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M353.3347439695303,307.79094371561575L353.3347439695303,307.79094371561575L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L366.6652560304698,370L366.6652560304698,312.2344477359289L357.77824798984346,312.2344477359289L357.77824798984346,311.34574693186624L353.3347439695303,311.34574693186624Z" fill="url(#plot-clip-352)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-16" x="313.3347439695303">
+    <path d="M353.3347439695303,307.79094371561575L353.3347439695303,307.79094371561575L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L366.6652560304698,370L366.6652560304698,312.2344477359289L357.77824798984346,312.2344477359289L357.77824798984346,311.34574693186624L353.3347439695303,311.34574693186624Z" fill="url(#plot-pattern-15)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-16" x="313.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M313.3347439695303,312.2344477359289L313.3347439695303,312.2344477359289L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L326.6652560304698,370L326.6652560304698,316.67795175624207L317.77824798984346,316.67795175624207L317.77824798984346,315.3449005501481L313.3347439695303,315.3449005501481Z" fill="url(#plot-clip-353)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-17" x="113.33474396953025">
+    <path d="M313.3347439695303,312.2344477359289L313.3347439695303,312.2344477359289L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L326.6652560304698,370L326.6652560304698,316.67795175624207L317.77824798984346,316.67795175624207L317.77824798984346,315.3449005501481L313.3347439695303,315.3449005501481Z" fill="url(#plot-pattern-16)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-17" x="113.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M122.22175201015658,343.338975878121L113.33474396953025,343.338975878121L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L126.66525603046973,370L126.66525603046973,347.7824798984342L126.66525603046973,347.7824798984342L126.66525603046973,346.89377909437155L122.22175201015658,346.89377909437155Z" fill="url(#plot-clip-354)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-18" x="333.3347439695303">
+    <path d="M122.22175201015658,343.338975878121L113.33474396953025,343.338975878121L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L126.66525603046973,370L126.66525603046973,347.7824798984342L126.66525603046973,347.7824798984342L126.66525603046973,346.89377909437155L122.22175201015658,346.89377909437155Z" fill="url(#plot-pattern-17)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-18" x="333.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M337.77824798984346,303.34743969530257L333.3347439695303,303.34743969530257L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L346.6652560304698,370L346.6652560304698,307.79094371561575L342.2217520101566,307.79094371561575L342.2217520101566,306.9022429115531L337.77824798984346,306.9022429115531Z" fill="url(#plot-clip-355)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-19" x="373.3347439695303">
+    <path d="M337.77824798984346,303.34743969530257L333.3347439695303,303.34743969530257L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L346.6652560304698,370L346.6652560304698,307.79094371561575L342.2217520101566,307.79094371561575L342.2217520101566,306.9022429115531L337.77824798984346,306.9022429115531Z" fill="url(#plot-pattern-18)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-19" x="373.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M377.77824798984346,356.6694879390605L373.3347439695303,356.6694879390605L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L386.6652560304698,370L386.6652560304698,361.1129919593737L382.2217520101566,361.1129919593737L382.2217520101566,360.22429115531105L377.77824798984346,360.22429115531105Z" fill="url(#plot-clip-356)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-20" x="473.3347439695303">
+    <path d="M377.77824798984346,356.6694879390605L373.3347439695303,356.6694879390605L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L386.6652560304698,370L386.6652560304698,361.1129919593737L382.2217520101566,361.1129919593737L382.2217520101566,360.22429115531105L377.77824798984346,360.22429115531105Z" fill="url(#plot-pattern-19)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-20" x="473.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M482.2217520101566,343.338975878121L473.3347439695303,343.338975878121L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L486.6652560304698,370L486.6652560304698,347.7824798984342L486.6652560304698,347.7824798984342L486.6652560304698,346.89377909437155L482.2217520101566,346.89377909437155Z" fill="url(#plot-clip-357)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-21" x="173.33474396953025">
+    <path d="M482.2217520101566,343.338975878121L473.3347439695303,343.338975878121L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L486.6652560304698,370L486.6652560304698,347.7824798984342L486.6652560304698,347.7824798984342L486.6652560304698,346.89377909437155L482.2217520101566,346.89377909437155Z" fill="url(#plot-pattern-20)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-21" x="173.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M173.33474396953025,316.67795175624207L173.33474396953025,316.67795175624207L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L186.66525603046975,370L186.66525603046975,321.1214557765552L177.7782479898434,321.1214557765552L177.7782479898434,320.6771053745239L173.33474396953025,320.6771053745239Z" fill="url(#plot-clip-358)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-22" x="133.33474396953025">
+    <path d="M173.33474396953025,316.67795175624207L173.33474396953025,316.67795175624207L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L186.66525603046975,370L186.66525603046975,321.1214557765552L177.7782479898434,321.1214557765552L177.7782479898434,320.6771053745239L173.33474396953025,320.6771053745239Z" fill="url(#plot-pattern-21)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-22" x="133.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M137.7782479898434,325.5649597968684L133.33474396953025,325.5649597968684L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L146.66525603046975,370L146.66525603046975,330.00846381718156L142.22175201015656,330.00846381718156L142.22175201015656,326.453660600931L137.7782479898434,326.453660600931Z" fill="url(#plot-clip-359)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-23" x="273.3347439695303">
+    <path d="M137.7782479898434,325.5649597968684L133.33474396953025,325.5649597968684L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L146.66525603046975,370L146.66525603046975,330.00846381718156L142.22175201015656,330.00846381718156L142.22175201015656,326.453660600931L137.7782479898434,326.453660600931Z" fill="url(#plot-pattern-22)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-23" x="273.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L286.6652560304698,370L286.6652560304698,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474Z" fill="url(#plot-clip-360)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-24" x="73.33474396953025">
+    <path d="M273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L286.6652560304698,370L286.6652560304698,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474Z" fill="url(#plot-pattern-23)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-24" x="73.33474396953025">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M73.33474396953025,347.7824798984342L73.33474396953025,347.7824798984342L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L86.66525603046973,370L86.66525603046973,352.2259839187474L77.77824798984341,352.2259839187474L77.77824798984341,348.6711807024968L73.33474396953025,348.6711807024968Z" fill="url(#plot-clip-361)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-25" x="573.3347439695302">
+    <path d="M73.33474396953025,347.7824798984342L73.33474396953025,347.7824798984342L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L86.66525603046973,370L86.66525603046973,352.2259839187474L77.77824798984341,352.2259839187474L77.77824798984341,348.6711807024968L73.33474396953025,348.6711807024968Z" fill="url(#plot-pattern-24)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-25" x="573.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M577.7782479898434,330.00846381718156L573.3347439695302,330.00846381718156L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L586.6652560304697,370L586.6652560304697,334.4519678374947L582.2217520101566,334.4519678374947L582.2217520101566,330.8971646212442L577.7782479898434,330.8971646212442Z" fill="url(#plot-clip-362)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-26" x="433.3347439695303">
+    <path d="M577.7782479898434,330.00846381718156L573.3347439695302,330.00846381718156L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L586.6652560304697,370L586.6652560304697,334.4519678374947L582.2217520101566,334.4519678374947L582.2217520101566,330.8971646212442L577.7782479898434,330.8971646212442Z" fill="url(#plot-pattern-25)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-26" x="433.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M442.2217520101566,312.2344477359289L433.3347439695303,312.2344477359289L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L446.6652560304698,370L446.6652560304698,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207Z" fill="url(#plot-clip-363)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-27" x="513.3347439695302">
+    <path d="M442.2217520101566,312.2344477359289L433.3347439695303,312.2344477359289L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L446.6652560304698,370L446.6652560304698,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207Z" fill="url(#plot-pattern-26)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-27" x="513.3347439695302">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M517.7782479898434,338.8954718578079L513.3347439695302,338.8954718578079L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L526.6652560304697,370L526.6652560304697,343.338975878121L522.2217520101566,343.338975878121L522.2217520101566,340.67287346593315L517.7782479898434,340.67287346593315Z" fill="url(#plot-clip-364)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-clip-28" x="293.3347439695303">
+    <path d="M517.7782479898434,338.8954718578079L513.3347439695302,338.8954718578079L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L526.6652560304697,370L526.6652560304697,343.338975878121L522.2217520101566,343.338975878121L522.2217520101566,340.67287346593315L517.7782479898434,340.67287346593315Z" fill="url(#plot-pattern-27)"></path>
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-28" x="293.3347439695303">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M302.2217520101566,321.1214557765552L293.3347439695303,321.1214557765552L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L306.6652560304698,370L306.6652560304698,325.5649597968684L306.6652560304698,325.5649597968684L306.6652560304698,323.7875581887431L302.2217520101566,323.7875581887431Z" fill="url(#plot-clip-365)"></path>
+    <path d="M302.2217520101566,321.1214557765552L293.3347439695303,321.1214557765552L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L306.6652560304698,370L306.6652560304698,325.5649597968684L306.6652560304698,325.5649597968684L306.6652560304698,323.7875581887431L302.2217520101566,323.7875581887431Z" fill="url(#plot-pattern-28)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 4a6e5512a2..373b21c96d 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -75,26 +75,26 @@
       <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
     </g>
     <g aria-label="bar">
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-1" x="41.36538314948109">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-1" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <path d="M163.67702083174527,303.5552264485849L41.36538314948109,303.5552264485849L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L637.6346168505189,380L637.6346168505189,318.8441811588679L178.96597554202827,318.8441811588679L178.96597554202827,308.60058150297846L163.67702083174527,308.60058150297846Z" fill="url(#plot-clip-366)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-2" x="41.36538314948109">
+      <path d="M163.67702083174527,303.5552264485849L41.36538314948109,303.5552264485849L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L637.6346168505189,380L637.6346168505189,318.8441811588679L178.96597554202827,318.8441811588679L178.96597554202827,308.60058150297846L163.67702083174527,308.60058150297846Z" fill="url(#plot-pattern-1)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-2" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <path d="M591.7677527196698,196.53254347660373L41.36538314948109,196.53254347660373L41.36538314948109,303.5552264485849L163.67702083174527,303.5552264485849L163.67702083174527,308.60058150297846L178.96597554202827,308.60058150297846L178.96597554202827,318.8441811588679L637.6346168505189,318.8441811588679L637.6346168505189,211.82149818688674L607.0567074299529,211.82149818688674L607.0567074299529,201.88367762520315L591.7677527196698,201.88367762520315Z" fill="url(#plot-clip-367)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-3" x="41.36538314948109">
+      <path d="M591.7677527196698,196.53254347660373L41.36538314948109,196.53254347660373L41.36538314948109,303.5552264485849L163.67702083174527,303.5552264485849L163.67702083174527,308.60058150297846L178.96597554202827,308.60058150297846L178.96597554202827,318.8441811588679L637.6346168505189,318.8441811588679L637.6346168505189,211.82149818688674L607.0567074299529,211.82149818688674L607.0567074299529,201.88367762520315L591.7677527196698,201.88367762520315Z" fill="url(#plot-pattern-2)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-3" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <path d="M133.09911141117922,104.79881521490563L41.36538314948109,104.79881521490563L41.36538314948109,196.53254347660373L591.7677527196698,196.53254347660373L591.7677527196698,201.88367762520315L607.0567074299529,201.88367762520315L607.0567074299529,211.82149818688674L637.6346168505189,211.82149818688674L637.6346168505189,120.08776992518864L148.38806612146226,120.08776992518864L148.38806612146226,117.18286853023574L133.09911141117922,117.18286853023574Z" fill="url(#plot-clip-368)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-4" x="41.36538314948109">
+      <path d="M133.09911141117922,104.79881521490563L41.36538314948109,104.79881521490563L41.36538314948109,196.53254347660373L591.7677527196698,196.53254347660373L591.7677527196698,201.88367762520315L607.0567074299529,201.88367762520315L607.0567074299529,211.82149818688674L637.6346168505189,211.82149818688674L637.6346168505189,120.08776992518864L148.38806612146226,120.08776992518864L148.38806612146226,117.18286853023574L133.09911141117922,117.18286853023574Z" fill="url(#plot-pattern-3)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-4" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <path d="M240.12179438316036,58.93195108405655L41.36538314948109,58.93195108405655L41.36538314948109,104.79881521490563L133.09911141117922,104.79881521490563L133.09911141117922,117.18286853023574L148.38806612146226,117.18286853023574L148.38806612146226,120.08776992518864L637.6346168505189,120.08776992518864L637.6346168505189,74.22090579433956L255.4107490934434,74.22090579433956L255.4107490934434,62.75418976162729L240.12179438316036,62.75418976162729Z" fill="url(#plot-clip-369)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-clip-5" x="41.36538314948109">
+      <path d="M240.12179438316036,58.93195108405655L41.36538314948109,58.93195108405655L41.36538314948109,104.79881521490563L133.09911141117922,104.79881521490563L133.09911141117922,117.18286853023574L148.38806612146226,117.18286853023574L148.38806612146226,120.08776992518864L637.6346168505189,120.08776992518864L637.6346168505189,74.22090579433956L255.4107490934434,74.22090579433956L255.4107490934434,62.75418976162729L240.12179438316036,62.75418976162729Z" fill="url(#plot-pattern-4)"></path>
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-5" x="41.36538314948109">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path d="M362.43343206542454,13.06508695320747L41.36538314948109,13.06508695320747L41.36538314948109,58.93195108405655L240.12179438316036,58.93195108405655L240.12179438316036,62.75418976162729L255.4107490934434,62.75418976162729L255.4107490934434,74.22090579433956L637.6346168505189,74.22090579433956L637.6346168505189,28.354041663490477L377.7223867757076,28.354041663490477L377.7223867757076,23.61446570330361L362.43343206542454,23.61446570330361Z" fill="url(#plot-clip-370)"></path>
+      <path d="M362.43343206542454,13.06508695320747L41.36538314948109,13.06508695320747L41.36538314948109,58.93195108405655L240.12179438316036,58.93195108405655L240.12179438316036,62.75418976162729L255.4107490934434,62.75418976162729L255.4107490934434,74.22090579433956L637.6346168505189,74.22090579433956L637.6346168505189,28.354041663490477L377.7223867757076,28.354041663490477L377.7223867757076,23.61446570330361L362.43343206542454,23.61446570330361Z" fill="url(#plot-pattern-5)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>
diff --git a/test/plot.js b/test/plot.js
index 83fd9301ae..20c1664841 100644
--- a/test/plot.js
+++ b/test/plot.js
@@ -18,6 +18,7 @@ for (const [name, plot] of Object.entries(plots)) {
     reindexStyle(root);
     reindexMarker(root);
     reindexClip(root);
+    reindexPattern(root);
     let expected;
     let actual = beautify.html(root.outerHTML.replaceAll("&nbsp;", "\xa0"), {
       indent_size: 2,
@@ -108,6 +109,23 @@ function reindexClip(root) {
   }
 }
 
+function reindexPattern(root) {
+  let index = 0;
+  const map = new Map();
+  for (const node of root.querySelectorAll("[id^=plot-pattern-]")) {
+    let id = node.getAttribute("id");
+    if (map.has(id)) id = map.get(id);
+    else map.set(id, (id = `plot-pattern-${++index}`));
+    node.setAttribute("id", id);
+  }
+  for (const key of ["fill", "stroke"]) {
+    for (const node of root.querySelectorAll(`[${key}]`)) {
+      let id = node.getAttribute(key).slice(5, -1);
+      if (map.has(id)) node.setAttribute(key, `url(#${map.get(id)})`);
+    }
+  }
+}
+
 const imageRe = /data:image\/png;base64,[^"]+/g;
 
 function stripImages(string) {

From 1274ff43ff01b7c7173d423d36b790d2c4e62c29 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 16:27:46 -0400
Subject: [PATCH 17/22] DRY waffle

---
 src/marks/waffle.js | 116 ++++++++++----------------------------------
 1 file changed, 25 insertions(+), 91 deletions(-)

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index c1691ab6d6..abb1699b74 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -1,4 +1,5 @@
 import {extent, namespaces} from "d3";
+import {composeRender} from "../mark.js";
 import {hasXY, identity, indexOf} from "../options.js";
 import {getPatternId} from "../style.js";
 import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
@@ -7,106 +8,35 @@ import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 import {BarX, BarY} from "./bar.js";
 
 export class WaffleX extends BarX {
-  constructor(data, {unit = 1, gap = 1, round, ...options} = {}) {
-    super(data, options);
+  constructor(data, {unit = 1, gap = 1, round, render, ...options} = {}) {
+    super(data, {...options, render: composeRender(render, waffleRender("x"))});
     this.unit = Math.max(0, unit);
     this.gap = +gap;
     this.round = maybeRound(round);
   }
-  render(index, scales, channels, dimensions, context) {
-    const {unit, gap, rx, ry, round} = this;
-    const {document} = context;
-    const g = super.render(index, scales, channels, dimensions, context);
-
-    // We might not use all the available bandwidth if the cells don’t fit evenly.
-    const bandwidth = this._height(scales, channels, dimensions);
-
-    // The length of a unit along x in pixels.
-    const scale = unit * scaleof(scales.scales.x);
-
-    // The number of cells on each row of the waffle.
-    const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
-
-    // The outer size of each square cell, in pixels, including the gap.
-    const cellsize = scale * columns;
-
-    // TODO insets?
-    const X1 = channels.channels.x1.value;
-    const X2 = channels.channels.x2.value;
-    const ww = columns * cellsize;
-    const wy = (bandwidth - ww) / 2;
-    let rect = g.firstElementChild;
-    const x0 = scales.x(0);
-    const basePattern = document.createElementNS(namespaces.svg, "pattern");
-    basePattern.setAttribute("width", cellsize);
-    basePattern.setAttribute("height", cellsize);
-    basePattern.setAttribute("patternUnits", "userSpaceOnUse");
-    basePattern.setAttribute("x", x0);
-    const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
-    basePatternRect.setAttribute("x", gap / 2);
-    basePatternRect.setAttribute("y", gap / 2);
-    basePatternRect.setAttribute("width", cellsize - gap);
-    basePatternRect.setAttribute("height", cellsize - gap);
-    if (rx != null) basePatternRect.setAttribute("rx", rx);
-    if (ry != null) basePatternRect.setAttribute("ry", ry);
-    for (const i of index) {
-      const y0 = +rect.getAttribute("y") + wy;
-      const fill = rect.getAttribute("fill"); // TODO handle constant fill
-      const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
-      const patternId = getPatternId(); // TODO reused shared patterns
-      const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
-      const patternRect = pattern.firstChild;
-      pattern.setAttribute("id", patternId);
-      pattern.setAttribute("y", y0);
-      if (fill != null) patternRect.setAttribute("fill", fill);
-      if (stroke != null) patternRect.setAttribute("stroke", stroke);
-      const path = document.createElementNS(namespaces.svg, "path");
-      for (const a of rect.attributes) {
-        switch (a.name) {
-          case "x":
-          case "y":
-          case "width":
-          case "height":
-          case "fill":
-          case "stroke":
-            continue;
-        }
-        path.setAttribute(a.name, a.value);
-      }
-      path.setAttribute(
-        "d",
-        `M${wafflePoints(round(X1[i] / unit), round(X2[i] / unit), columns)
-          .map(([y, x]) => [x * cellsize + x0, y0 + y * cellsize])
-          .join("L")}Z`
-      );
-      if (stroke != null) path.setAttribute("stroke", `url(#${patternId})`); // TODO if necessary
-      path.setAttribute("fill", `url(#${patternId})`);
-      const nextRect = rect.nextElementSibling;
-      rect.replaceWith(path);
-      rect = nextRect;
-    }
-
-    return g;
-  }
 }
 
 export class WaffleY extends BarY {
-  constructor(data, {unit = 1, gap = 1, round, ...options} = {}) {
-    super(data, options);
+  constructor(data, {unit = 1, gap = 1, round, render, ...options} = {}) {
+    super(data, {...options, render: composeRender(render, waffleRender("y"))});
     this.unit = Math.max(0, unit);
     this.gap = +gap;
     this.round = maybeRound(round);
   }
-  render(index, scales, channels, dimensions, context) {
+}
+
+function waffleRender(y) {
+  const x = y === "y" ? "x" : "y";
+  return function (index, scales, values, dimensions, context, next) {
     const {unit, gap, rx, ry, round} = this;
     const {document} = context;
-    const g = super.render(index, scales, channels, dimensions, context);
+    const g = next(index, scales, values, dimensions, context);
 
     // We might not use all the available bandwidth if the cells don’t fit evenly.
-    const bandwidth = this._width(scales, channels, dimensions);
+    const bandwidth = this[y === "y" ? "_width" : "_height"](scales, values, dimensions);
 
     // The length of a unit along y in pixels.
-    const scale = unit * scaleof(scales.scales.y);
+    const scale = unit * scaleof(scales.scales[y]);
 
     // The number of cells on each row of the waffle.
     const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
@@ -115,17 +45,17 @@ export class WaffleY extends BarY {
     const cellsize = scale * columns;
 
     // TODO insets?
-    const Y1 = channels.channels.y1.value;
-    const Y2 = channels.channels.y2.value;
+    const Y1 = values.channels[`${y}1`].value;
+    const Y2 = values.channels[`${y}2`].value;
     const ww = columns * cellsize;
     const wx = (bandwidth - ww) / 2;
     let rect = g.firstElementChild;
-    const y0 = scales.y(0);
+    const y0 = scales[y](0);
     const basePattern = document.createElementNS(namespaces.svg, "pattern");
     basePattern.setAttribute("width", cellsize);
     basePattern.setAttribute("height", cellsize);
     basePattern.setAttribute("patternUnits", "userSpaceOnUse");
-    basePattern.setAttribute("y", y0);
+    basePattern.setAttribute(y, y0);
     const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
     basePatternRect.setAttribute("x", gap / 2);
     basePatternRect.setAttribute("y", gap / 2);
@@ -134,14 +64,14 @@ export class WaffleY extends BarY {
     if (rx != null) basePatternRect.setAttribute("rx", rx);
     if (ry != null) basePatternRect.setAttribute("ry", ry);
     for (const i of index) {
-      const x0 = +rect.getAttribute("x") + wx;
+      const x0 = +rect.getAttribute(x) + wx;
       const fill = rect.getAttribute("fill"); // TODO handle constant fill
       const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
       const patternId = getPatternId(); // TODO reused shared patterns
       const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
       const patternRect = pattern.firstChild;
       pattern.setAttribute("id", patternId);
-      pattern.setAttribute("x", x0);
+      pattern.setAttribute(x, x0);
       if (fill != null) patternRect.setAttribute("fill", fill);
       if (stroke != null) patternRect.setAttribute("stroke", stroke);
       const path = document.createElementNS(namespaces.svg, "path");
@@ -160,7 +90,11 @@ export class WaffleY extends BarY {
       path.setAttribute(
         "d",
         `M${wafflePoints(round(Y1[i] / unit), round(Y2[i] / unit), columns)
-          .map(([x, y]) => [x * cellsize + x0, y0 - y * cellsize])
+          .map(
+            y === "y"
+              ? ([x, y]) => [x * cellsize + x0, y0 - y * cellsize]
+              : ([x, y]) => [y * cellsize + y0, x0 + x * cellsize]
+          )
           .join("L")}Z`
       );
       if (stroke != null) path.setAttribute("stroke", `url(#${patternId})`); // TODO if necessary
@@ -171,7 +105,7 @@ export class WaffleY extends BarY {
     }
 
     return g;
-  }
+  };
 }
 
 // A waffle is a approximately rectangular shape, but may have one or two corner

From 3462679a0dc43b96f2c06d9539407cd533a79d8a Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 17:17:10 -0400
Subject: [PATCH 18/22] optimize waffle rendering

---
 src/marks/bar.js                        |  14 +--
 src/marks/waffle.js                     | 107 +++++++++++-----------
 test/output/waffleShorthand.svg         |  26 +++---
 test/output/waffleShorthandNegative.svg |  26 +++---
 test/output/waffleStroke.svg            |  26 +++---
 test/output/waffleStrokeNegative.svg    |  26 +++---
 test/output/waffleX.svg                 |  22 ++---
 test/output/waffleXStacked.svg          |  22 ++---
 test/output/waffleY.svg                 |  22 ++---
 test/output/waffleYGrouped.svg          | 114 ++++++++++++------------
 test/output/waffleYStacked.html         |  22 ++---
 11 files changed, 212 insertions(+), 215 deletions(-)

diff --git a/src/marks/bar.js b/src/marks/bar.js
index a17453730a..686c018460 100644
--- a/src/marks/bar.js
+++ b/src/marks/bar.js
@@ -8,8 +8,12 @@ import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 import {applyRoundedRect, rectInsets, rectRadii} from "./rect.js";
 
+const barDefaults = {
+  ariaLabel: "bar"
+};
+
 export class AbstractBar extends Mark {
-  constructor(data, channels, options = {}, defaults) {
+  constructor(data, channels, options = {}, defaults = barDefaults) {
     super(data, channels, options, defaults);
     rectInsets(this, options);
     rectRadii(this, options);
@@ -81,12 +85,8 @@ function add(a, b) {
     : a + b;
 }
 
-const defaults = {
-  ariaLabel: "bar"
-};
-
 export class BarX extends AbstractBar {
-  constructor(data, options = {}) {
+  constructor(data, options = {}, defaults) {
     const {x1, x2, y} = options;
     super(
       data,
@@ -115,7 +115,7 @@ export class BarX extends AbstractBar {
 }
 
 export class BarY extends AbstractBar {
-  constructor(data, options = {}) {
+  constructor(data, options = {}, defaults) {
     const {x, y1, y2} = options;
     super(
       data,
diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index abb1699b74..9dcaee29b9 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -1,15 +1,21 @@
 import {extent, namespaces} from "d3";
+import {create} from "../context.js";
 import {composeRender} from "../mark.js";
 import {hasXY, identity, indexOf} from "../options.js";
-import {getPatternId} from "../style.js";
+import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, getPatternId} from "../style.js";
+import {template} from "../template.js";
 import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
 import {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 import {BarX, BarY} from "./bar.js";
 
+const waffleDefaults = {
+  ariaLabel: "waffle"
+};
+
 export class WaffleX extends BarX {
   constructor(data, {unit = 1, gap = 1, round, render, ...options} = {}) {
-    super(data, {...options, render: composeRender(render, waffleRender("x"))});
+    super(data, {...options, render: composeRender(render, waffleRender("x"))}, waffleDefaults);
     this.unit = Math.max(0, unit);
     this.gap = +gap;
     this.round = maybeRound(round);
@@ -18,7 +24,7 @@ export class WaffleX extends BarX {
 
 export class WaffleY extends BarY {
   constructor(data, {unit = 1, gap = 1, round, render, ...options} = {}) {
-    super(data, {...options, render: composeRender(render, waffleRender("y"))});
+    super(data, {...options, render: composeRender(render, waffleRender("y"))}, waffleDefaults);
     this.unit = Math.max(0, unit);
     this.gap = +gap;
     this.round = maybeRound(round);
@@ -26,36 +32,37 @@ export class WaffleY extends BarY {
 }
 
 function waffleRender(y) {
-  const x = y === "y" ? "x" : "y";
-  return function (index, scales, values, dimensions, context, next) {
+  return function (index, scales, values, dimensions, context) {
     const {unit, gap, rx, ry, round} = this;
     const {document} = context;
-    const g = next(index, scales, values, dimensions, context);
+    const Y1 = values.channels[`${y}1`].value;
+    const Y2 = values.channels[`${y}2`].value;
 
     // We might not use all the available bandwidth if the cells don’t fit evenly.
-    const bandwidth = this[y === "y" ? "_width" : "_height"](scales, values, dimensions);
+    const barwidth = this[y === "y" ? "_width" : "_height"](scales, values, dimensions);
+    const barx = this[y === "y" ? "_x" : "_y"](scales, values, dimensions);
 
     // The length of a unit along y in pixels.
     const scale = unit * scaleof(scales.scales[y]);
 
     // The number of cells on each row of the waffle.
-    const columns = Math.max(1, Math.floor(Math.sqrt(bandwidth / scale)));
+    const columns = Math.max(1, Math.floor(Math.sqrt(barwidth / scale)));
 
     // The outer size of each square cell, in pixels, including the gap.
     const cellsize = scale * columns;
 
     // TODO insets?
-    const Y1 = values.channels[`${y}1`].value;
-    const Y2 = values.channels[`${y}2`].value;
-    const ww = columns * cellsize;
-    const wx = (bandwidth - ww) / 2;
-    let rect = g.firstElementChild;
+    const transform = y === "y" ? ([x, y]) => [x * cellsize, -y * cellsize] : ([x, y]) => [y * cellsize, x * cellsize];
+    const tx = (barwidth - columns * cellsize) / 2;
+    const x0 = typeof barx === "function" ? (i) => barx(i) + tx : barx + tx;
     const y0 = scales[y](0);
+
+    // Create a base pattern with shared attributes for cloning.
+    const patternId = getPatternId();
     const basePattern = document.createElementNS(namespaces.svg, "pattern");
     basePattern.setAttribute("width", cellsize);
     basePattern.setAttribute("height", cellsize);
     basePattern.setAttribute("patternUnits", "userSpaceOnUse");
-    basePattern.setAttribute(y, y0);
     const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
     basePatternRect.setAttribute("x", gap / 2);
     basePatternRect.setAttribute("y", gap / 2);
@@ -63,48 +70,38 @@ function waffleRender(y) {
     basePatternRect.setAttribute("height", cellsize - gap);
     if (rx != null) basePatternRect.setAttribute("rx", rx);
     if (ry != null) basePatternRect.setAttribute("ry", ry);
-    for (const i of index) {
-      const x0 = +rect.getAttribute(x) + wx;
-      const fill = rect.getAttribute("fill"); // TODO handle constant fill
-      const stroke = rect.getAttribute("stroke"); // TODO handle constant fill
-      const patternId = getPatternId(); // TODO reused shared patterns
-      const pattern = g.insertBefore(basePattern.cloneNode(true), rect);
-      const patternRect = pattern.firstChild;
-      pattern.setAttribute("id", patternId);
-      pattern.setAttribute(x, x0);
-      if (fill != null) patternRect.setAttribute("fill", fill);
-      if (stroke != null) patternRect.setAttribute("stroke", stroke);
-      const path = document.createElementNS(namespaces.svg, "path");
-      for (const a of rect.attributes) {
-        switch (a.name) {
-          case "x":
-          case "y":
-          case "width":
-          case "height":
-          case "fill":
-          case "stroke":
-            continue;
-        }
-        path.setAttribute(a.name, a.value);
-      }
-      path.setAttribute(
-        "d",
-        `M${wafflePoints(round(Y1[i] / unit), round(Y2[i] / unit), columns)
-          .map(
-            y === "y"
-              ? ([x, y]) => [x * cellsize + x0, y0 - y * cellsize]
-              : ([x, y]) => [y * cellsize + y0, x0 + x * cellsize]
+
+    return create("svg:g", context)
+      .call(applyIndirectStyles, this, dimensions, context)
+      .call(this._transform, this, scales)
+      .call((g) =>
+        g
+          .selectAll()
+          .data(index)
+          .enter()
+          .append(() => basePattern.cloneNode(true))
+          .attr("id", (i) => `${patternId}-${i}`)
+          .select("rect")
+          .call(applyDirectStyles, this)
+          .call(applyChannelStyles, this, values)
+      )
+      .call((g) =>
+        g
+          .selectAll()
+          .data(index)
+          .enter()
+          .append("path")
+          .attr("transform", y === "y" ? template`translate(${x0},${y0})` : template`translate(${y0},${x0})`)
+          .attr(
+            "d",
+            (i) =>
+              `M${wafflePoints(round(Y1[i] / unit), round(Y2[i] / unit), columns)
+                .map(transform)
+                .join("L")}Z`
           )
-          .join("L")}Z`
-      );
-      if (stroke != null) path.setAttribute("stroke", `url(#${patternId})`); // TODO if necessary
-      path.setAttribute("fill", `url(#${patternId})`);
-      const nextRect = rect.nextElementSibling;
-      rect.replaceWith(path);
-      rect = nextRect;
-    }
-
-    return g;
+          .attr("fill", (i) => `url(#${patternId}-${i})`)
+      )
+      .node();
   };
 }
 
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index 55afd6b3af..99c7672178 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -61,30 +61,30 @@
     <text y="0.71em" transform="translate(430,370)">4</text>
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
-  <g aria-label="bar">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="50.57575757575758">
+  <g aria-label="waffle">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788L50.57575757575758,348.7878787878788Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="145.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="240.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="335.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="430.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-pattern-5)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-6" x="525.5757575757576">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(50.57575757575758,370)" d="M0,-21.21212121212121L0,-21.21212121212121L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L0,-21.21212121212121L0,-21.21212121212121L0,-21.21212121212121Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(145.57575757575756,370)" d="M21.21212121212121,-63.63636363636363L0,-63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(240.57575757575756,370)" d="M0,-127.27272727272727L0,-127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(335.57575757575756,370)" d="M42.42424242424242,-254.54545454545453L0,-254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(430.57575757575756,370)" d="M42.42424242424242,-360.60606060606057L0,-360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(525.5757575757576,370)" d="M63.63636363636363,-42.42424242424242L0,-42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
index 9c9c10677e..31ffd81ec5 100644
--- a/test/output/waffleShorthandNegative.svg
+++ b/test/output/waffleShorthandNegative.svg
@@ -61,30 +61,30 @@
     <text transform="translate(430,30)">4</text>
     <text transform="translate(525,30)">5</text>
   </g>
-  <g aria-label="bar">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-1" x="50.57575757575758">
+  <g aria-label="waffle">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121L50.57575757575758,51.21212121212121Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-2" x="145.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-3" x="240.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-4" x="335.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-5" x="430.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-pattern-5)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-6" x="525.5757575757576">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
       <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(50.57575757575758,30)" d="M0,21.21212121212121L0,21.21212121212121L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L0,21.21212121212121L0,21.21212121212121L0,21.21212121212121Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(145.57575757575756,30)" d="M21.21212121212121,63.63636363636363L0,63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(240.57575757575756,30)" d="M0,127.27272727272727L0,127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,127.27272727272727L0,127.27272727272727L0,127.27272727272727L0,127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(335.57575757575756,30)" d="M42.42424242424242,254.54545454545453L0,254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(430.57575757575756,30)" d="M42.42424242424242,360.60606060606057L0,360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(525.5757575757576,30)" d="M63.63636363636363,42.42424242424242L0,42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStroke.svg b/test/output/waffleStroke.svg
index b078c85c80..a8a20006d6 100644
--- a/test/output/waffleStroke.svg
+++ b/test/output/waffleStroke.svg
@@ -61,30 +61,30 @@
     <text y="0.71em" transform="translate(430,370)">4</text>
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
-  <g aria-label="bar" fill="#eee" stroke="red">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="50.57575757575758">
+  <g aria-label="waffle" fill="#eee" stroke="red">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,327.57575757575756L50.57575757575758,327.57575757575756L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L50.57575757575758,370L135.42424242424244,370L135.42424242424244,348.7878787878788L71.78787878787878,348.7878787878788L71.78787878787878,338.1818181818182L50.57575757575758,338.1818181818182Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="145.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,306.3636363636364L145.57575757575756,306.3636363636364L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L145.57575757575756,370L230.4242424242424,370L230.4242424242424,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756L166.78787878787878,327.57575757575756Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="240.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L240.57575757575756,370L325.4242424242424,370L325.4242424242424,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275L240.57575757575756,242.72727272727275Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="335.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M378,115.45454545454547L335.57575757575756,115.45454545454547L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L335.57575757575756,370L420.4242424242424,370L420.4242424242424,136.66666666666669L378,136.66666666666669L378,136.66666666666669L378,136.66666666666669Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="430.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M473,9.393939393939434L430.57575757575756,9.393939393939434L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L430.57575757575756,370L515.4242424242424,370L515.4242424242424,30.606060606060623L473,30.606060606060623L473,30.606060606060623L473,30.606060606060623Z" fill="url(#plot-pattern-5)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-6" x="525.5757575757576">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,327.57575757575756L525.5757575757576,327.57575757575756L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L525.5757575757576,370L610.4242424242425,370L610.4242424242425,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788L589.2121212121212,348.7878787878788Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(50.57575757575758,370)" d="M0,-42.42424242424242L0,-42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L21.21212121212121,-21.21212121212121L21.21212121212121,-31.818181818181817L0,-31.818181818181817Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(145.57575757575756,370)" d="M21.21212121212121,-63.63636363636363L0,-63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(240.57575757575756,370)" d="M0,-127.27272727272727L0,-127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(335.57575757575756,370)" d="M42.42424242424242,-254.54545454545453L0,-254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(430.57575757575756,370)" d="M42.42424242424242,-360.60606060606057L0,-360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(525.5757575757576,370)" d="M63.63636363636363,-42.42424242424242L0,-42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStrokeNegative.svg b/test/output/waffleStrokeNegative.svg
index bc29837dd9..872fab54f9 100644
--- a/test/output/waffleStrokeNegative.svg
+++ b/test/output/waffleStrokeNegative.svg
@@ -61,30 +61,30 @@
     <text transform="translate(430,30)">4</text>
     <text transform="translate(525,30)">5</text>
   </g>
-  <g aria-label="bar" fill="#eee" stroke="red">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-1" x="50.57575757575758">
+  <g aria-label="waffle" fill="#eee" stroke="red">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M50.57575757575758,72.42424242424242L50.57575757575758,72.42424242424242L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L50.57575757575758,30L135.42424242424244,30L135.42424242424244,51.21212121212121L71.78787878787878,51.21212121212121L71.78787878787878,61.81818181818181L50.57575757575758,61.81818181818181Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-2" x="145.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M166.78787878787878,93.63636363636363L145.57575757575756,93.63636363636363L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L145.57575757575756,30L230.4242424242424,30L230.4242424242424,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242L166.78787878787878,72.42424242424242Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-3" x="240.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L240.57575757575756,30L325.4242424242424,30L325.4242424242424,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725L240.57575757575756,157.27272727272725Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-4" x="335.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M378,284.5454545454545L335.57575757575756,284.5454545454545L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L335.57575757575756,30L420.4242424242424,30L420.4242424242424,263.3333333333333L378,263.3333333333333L378,263.3333333333333L378,263.3333333333333Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-5" x="430.57575757575756">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M473,390.60606060606057L430.57575757575756,390.60606060606057L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L430.57575757575756,30L515.4242424242424,30L515.4242424242424,369.3939393939394L473,369.3939393939394L473,369.3939393939394L473,369.3939393939394Z" fill="url(#plot-pattern-5)"></path>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" y="30" id="plot-pattern-6" x="525.5757575757576">
+    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
       <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
     </pattern>
-    <path d="M589.2121212121212,72.42424242424242L525.5757575757576,72.42424242424242L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L525.5757575757576,30L610.4242424242425,30L610.4242424242425,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121L589.2121212121212,51.21212121212121Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(50.57575757575758,30)" d="M0,42.42424242424242L0,42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L21.21212121212121,21.21212121212121L21.21212121212121,31.818181818181817L0,31.818181818181817Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(145.57575757575756,30)" d="M21.21212121212121,63.63636363636363L0,63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(240.57575757575756,30)" d="M0,127.27272727272727L0,127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,127.27272727272727L0,127.27272727272727L0,127.27272727272727L0,127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(335.57575757575756,30)" d="M42.42424242424242,254.54545454545453L0,254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(430.57575757575756,30)" d="M42.42424242424242,360.60606060606057L0,360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(525.5757575757576,30)" d="M63.63636363636363,42.42424242424242L0,42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index 6328c62225..a3a4da862a 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -45,27 +45,27 @@
     <text transform="translate(528.5347863645425,30)">250</text>
     <text transform="translate(618.241743637451,30)">300</text>
   </g>
-  <g aria-label="bar">
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-1" y="35.426373845438235">
+  <g aria-label="waffle">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M376.03295900059805,46.191208718187255L376.03295900059805,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,35.426373845438235L80,51.573626154561765L370.65054156422354,51.573626154561765L370.65054156422354,51.573626154561765L374.2567612465944,51.573626154561765L374.2567612465944,46.191208718187255Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-2" y="56.426373845438235">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M623.6241610738255,56.426373845438235L623.6241610738255,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,56.426373845438235L80,72.57362615456177L618.241743637451,72.57362615456177L618.241743637451,61.808791281812745L623.5165127250981,61.808791281812745L623.5165127250981,56.426373845438235Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-3" y="77.42637384543823">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M446.0043856734667,88.19120871818726L446.0043856734667,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,77.42637384543823L80,93.57362615456177L440.6219682370922,93.57362615456177L440.6219682370922,93.57362615456177L443.52847365273436,93.57362615456177L443.52847365273436,88.19120871818726Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-4" y="98.42637384543823">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M306.0615323277294,103.80879128181274L306.0615323277294,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,98.42637384543823L80,114.57362615456177L300.6791148913549,114.57362615456177L300.6791148913549,109.19120871818726L303.69326865572464,109.19120871818726L303.69326865572464,103.80879128181274Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" x="80" id="plot-pattern-5" y="119.42637384543823">
+    <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M306.0615323277294,124.80879128181274L306.0615323277294,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,119.42637384543823L80,135.57362615456177L300.6791148913549,135.57362615456177L300.6791148913549,130.19120871818726L303.69326865572464,130.19120871818726L303.69326865572464,124.80879128181274Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(80,35.426373845438235)" d="M296.03295900059805,10.76483487274902L296.03295900059805,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L290.65054156422354,16.14725230912353L290.65054156422354,16.14725230912353L294.2567612465944,16.14725230912353L294.2567612465944,10.76483487274902Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(80,56.426373845438235)" d="M543.6241610738255,0L543.6241610738255,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L538.241743637451,16.14725230912353L538.241743637451,5.38241743637451L543.5165127250981,5.38241743637451L543.5165127250981,0Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(80,77.42637384543823)" d="M366.0043856734667,10.76483487274902L366.0043856734667,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L360.6219682370922,16.14725230912353L360.6219682370922,16.14725230912353L363.52847365273436,16.14725230912353L363.52847365273436,10.76483487274902Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(80,98.42637384543823)" d="M226.06153232772942,5.38241743637451L226.06153232772942,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(80,119.42637384543823)" d="M226.06153232772942,5.38241743637451L226.06153232772942,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="80" x2="80" y1="30" y2="140"></line>
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
index 0acb27e81c..fc6c00f13a 100644
--- a/test/output/waffleXStacked.svg
+++ b/test/output/waffleXStacked.svg
@@ -37,27 +37,27 @@
     <text y="0.71em" transform="translate(542.6993063344622,210)">800</text>
     <text y="0.71em" transform="translate(608.03671962627,210)">900</text>
   </g>
-  <g aria-label="bar">
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-1" y="10.587437793337756">
+  <g aria-label="waffle">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M131.07360259607321,132.7684006490183L131.07360259607321,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,10.587437793337756L20,199.41256220666224L119.9662423364659,199.41256220666224L119.9662423364659,143.87576090862564L127.40817371040266,143.87576090862564L127.40817371040266,132.7684006490183Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-2" y="10.587437793337756">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M331.00608726900504,77.2315993509817L331.00608726900504,10.587437793337756L131.07360259607321,10.587437793337756L131.07360259607321,132.7684006490183L127.40817371040266,132.7684006490183L127.40817371040266,143.87576090862564L119.9662423364659,143.87576090862564L119.9662423364659,199.41256220666224L319.8987270093977,199.41256220666224L319.8987270093977,88.33895961058901L327.1185111781422,88.33895961058901L327.1185111781422,77.2315993509817Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-3" y="10.587437793337756">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M464.29441038429286,77.2315993509817L464.29441038429286,10.587437793337756L331.00608726900504,10.587437793337756L331.00608726900504,77.2315993509817L327.1185111781422,77.2315993509817L327.1185111781422,88.33895961058901L319.8987270093977,88.33895961058901L319.8987270093977,199.41256220666224L453.1870501246856,199.41256220666224L453.1870501246856,88.33895961058901L455.2974485740103,88.33895961058901L455.2974485740103,77.2315993509817Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-4" y="10.587437793337756">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M542.0459322015441,132.7684006490183L542.0459322015441,10.587437793337756L464.29441038429286,10.587437793337756L464.29441038429286,77.2315993509817L455.2974485740103,77.2315993509817L455.2974485740103,88.33895961058901L453.1870501246856,88.33895961058901L453.1870501246856,199.41256220666224L530.9385719419367,199.41256220666224L530.9385719419367,143.87576090862564L539.2690921366423,143.87576090862564L539.2690921366423,132.7684006490183Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" x="20" id="plot-pattern-5" y="10.587437793337756">
+    <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M630.9048142784027,10.587437793337756L630.9048142784027,10.587437793337756L542.0459322015441,10.587437793337756L542.0459322015441,132.7684006490183L539.2690921366423,132.7684006490183L539.2690921366423,143.87576090862564L530.9385719419367,143.87576090862564L530.9385719419367,199.41256220666224L619.7974540187954,199.41256220666224L619.7974540187954,21.694798052945078L623.240735699273,21.694798052945078L623.240735699273,10.587437793337756Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M111.07360259607321,122.18096285568055L111.07360259607321,0L0,0L0,0L0,0L0,0L0,0L0,188.8251244133245L99.9662423364659,188.8251244133245L99.9662423364659,133.28832311528788L107.40817371040266,133.28832311528788L107.40817371040266,122.18096285568055Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M311.00608726900504,66.64416155764394L311.00608726900504,0L111.07360259607321,0L111.07360259607321,122.18096285568055L107.40817371040266,122.18096285568055L107.40817371040266,133.28832311528788L99.9662423364659,133.28832311528788L99.9662423364659,188.8251244133245L299.8987270093977,188.8251244133245L299.8987270093977,77.75152181725126L307.1185111781422,77.75152181725126L307.1185111781422,66.64416155764394Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M444.29441038429286,66.64416155764394L444.29441038429286,0L311.00608726900504,0L311.00608726900504,66.64416155764394L307.1185111781422,66.64416155764394L307.1185111781422,77.75152181725126L299.8987270093977,77.75152181725126L299.8987270093977,188.8251244133245L433.1870501246856,188.8251244133245L433.1870501246856,77.75152181725126L435.2974485740103,77.75152181725126L435.2974485740103,66.64416155764394Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M522.0459322015441,122.18096285568055L522.0459322015441,0L444.29441038429286,0L444.29441038429286,66.64416155764394L435.2974485740103,66.64416155764394L435.2974485740103,77.75152181725126L433.1870501246856,77.75152181725126L433.1870501246856,188.8251244133245L510.9385719419368,188.8251244133245L510.9385719419368,133.28832311528788L519.2690921366423,133.28832311528788L519.2690921366423,122.18096285568055Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M610.9048142784027,0L610.9048142784027,0L522.0459322015441,0L522.0459322015441,122.18096285568055L519.2690921366423,122.18096285568055L519.2690921366423,133.28832311528788L510.9385719419368,133.28832311528788L510.9385719419368,188.8251244133245L599.7974540187954,188.8251244133245L599.7974540187954,11.107360259607322L603.240735699273,11.107360259607322L603.240735699273,0Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="20" x2="20" y1="0" y2="210"></line>
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index ad4e74b86e..3210850112 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -63,27 +63,27 @@
     <text y="0.71em" transform="translate(392,370)">Adults 18+</text>
     <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
   </g>
-  <g aria-label="bar">
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="56.90384743172304">
+  <g aria-label="waffle">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(110, 64, 170)"></rect>
     </pattern>
-    <path d="M77.83547079540169,171.14957804505283L56.90384743172304,171.14957804505283L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L56.90384743172304,370L151.09615256827698,370L151.09615256827698,181.61538972689215L88.30128247724102,181.61538972689215L88.30128247724102,174.60329590005995L77.83547079540169,174.60329590005995Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="169.90384743172302">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(65, 125, 224)"></rect>
     </pattern>
-    <path d="M201.301282477241,14.162402817462976L169.90384743172302,14.162402817462976L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L169.90384743172302,370L264.0961525682769,370L264.0961525682769,24.62821449930226L211.76709415908033,24.62821449930226L211.76709415908033,14.371719051099547L201.301282477241,14.371719051099547Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="282.903847431723">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(26, 199, 194)"></rect>
     </pattern>
-    <path d="M335.23290584091967,129.28633131769553L282.903847431723,129.28633131769553L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L282.903847431723,370L377.0961525682769,370L377.0961525682769,139.75214299953484L345.69871752275895,139.75214299953484L345.69871752275895,134.1006046913417L335.23290584091967,134.1006046913417Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="395.903847431723">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(64, 243, 115)"></rect>
     </pattern>
-    <path d="M469.1645292045983,223.47863645424945L395.903847431723,223.47863645424945L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L395.903847431723,370L490.0961525682769,370L490.0961525682769,233.94444813608877L479.63034088643764,233.94444813608877L479.63034088643764,228.08359359425873L469.1645292045983,228.08359359425873Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="508.903847431723">
+    <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path d="M582.1645292045982,223.47863645424945L508.903847431723,223.47863645424945L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L508.903847431723,370L603.0961525682769,370L603.0961525682769,233.94444813608877L592.6303408864376,233.94444813608877L592.6303408864376,228.08359359425873L582.1645292045982,228.08359359425873Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(56.90384743172304,370)" d="M20.93162336367865,-198.85042195494717L0,-198.85042195494717L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-188.38461027310785L31.397435045517973,-188.38461027310785L31.397435045517973,-195.39670409994005L20.93162336367865,-195.39670409994005Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(169.90384743172302,370)" d="M31.397435045517973,-355.837597182537L0,-355.837597182537L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-345.37178550069774L41.8632467273573,-345.37178550069774L41.8632467273573,-355.62828094890045L31.397435045517973,-355.62828094890045Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(282.903847431723,370)" d="M52.32905840919663,-240.71366868230447L0,-240.71366868230447L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-230.24785700046516L62.794870091035946,-230.24785700046516L62.794870091035946,-235.8993953086583L52.32905840919663,-235.8993953086583Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(395.903847431723,370)" d="M73.26068177287527,-146.52136354575055L0,-146.52136354575055L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-136.05555186391123L83.7264934547146,-136.05555186391123L83.7264934547146,-141.91640640574127L73.26068177287527,-141.91640640574127Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(508.903847431723,370)" d="M73.26068177287527,-146.52136354575055L0,-146.52136354575055L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-136.05555186391123L83.7264934547146,-136.05555186391123L83.7264934547146,-141.91640640574127L73.26068177287527,-141.91640640574127Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index c07212356d..284be9edcf 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -104,119 +104,119 @@
     <text y="0.32em" transform="translate(571,370) rotate(-90)">weightlifting</text>
     <text y="0.32em" transform="translate(591,370) rotate(-90)">wrestling</text>
   </g>
-  <g aria-label="bar">
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-1" x="93.33474396953025">
+  <g aria-label="waffle">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-1">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M102.22175201015658,18.96318239526022L93.33474396953025,18.96318239526022L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L93.33474396953025,370L106.66525603046973,370L106.66525603046973,23.406686415573404L106.66525603046973,23.406686415573404L106.66525603046973,22.07363520947939L102.22175201015658,22.07363520947939Z" fill="url(#plot-pattern-1)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-2" x="233.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-2">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M233.33474396953025,330.00846381718156L233.33474396953025,330.00846381718156L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L233.33474396953025,370L246.66525603046975,370L246.66525603046975,334.4519678374947L237.7782479898434,334.4519678374947L237.7782479898434,331.7858654253068L233.33474396953025,331.7858654253068Z" fill="url(#plot-pattern-2)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-3" x="493.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-3">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M493.3347439695303,347.7824798984342L493.3347439695303,347.7824798984342L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L493.3347439695303,370L506.6652560304698,370L506.6652560304698,352.2259839187474L497.77824798984346,352.2259839187474L497.77824798984346,348.6711807024968L493.3347439695303,348.6711807024968Z" fill="url(#plot-pattern-3)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-4" x="193.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-4">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M197.7782479898434,290.01692763436307L193.33474396953025,290.01692763436307L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L193.33474396953025,370L206.66525603046975,370L206.66525603046975,294.46043165467626L202.22175201015656,294.46043165467626L202.22175201015656,292.23867964451966L197.7782479898434,292.23867964451966Z" fill="url(#plot-pattern-4)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-5" x="533.3347439695302">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M542.2217520101566,352.2259839187474L533.3347439695302,352.2259839187474L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L533.3347439695302,370L546.6652560304697,370L546.6652560304697,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605L542.2217520101566,356.6694879390605Z" fill="url(#plot-pattern-5)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-6" x="553.3347439695302">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-6">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M562.2217520101566,312.2344477359289L553.3347439695302,312.2344477359289L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L553.3347439695302,370L566.6652560304697,370L566.6652560304697,316.67795175624207L566.6652560304697,316.67795175624207L566.6652560304697,314.9005501481168L562.2217520101566,314.9005501481168Z" fill="url(#plot-pattern-6)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-7" x="53.33474396953026">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-7">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M53.33474396953026,152.26830300465508L53.33474396953026,152.26830300465508L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L53.33474396953026,370L66.66525603046975,370L66.66525603046975,156.71180702496824L57.77824798984342,156.71180702496824L57.77824798984342,154.49005501481165L53.33474396953026,154.49005501481165Z" fill="url(#plot-pattern-7)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-8" x="413.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-8">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L413.3347439695303,370L426.6652560304698,370L426.6652560304698,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684L413.3347439695303,325.5649597968684Z" fill="url(#plot-pattern-8)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-9" x="593.3347439695302">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-9">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M602.2217520101566,316.67795175624207L593.3347439695302,316.67795175624207L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L593.3347439695302,370L606.6652560304697,370L606.6652560304697,321.1214557765552L606.6652560304697,321.1214557765552L606.6652560304697,319.7884045704613L602.2217520101566,319.7884045704613Z" fill="url(#plot-pattern-9)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-10" x="253.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-10">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M257.7782479898434,276.6864155734236L253.33474396953025,276.6864155734236L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L253.33474396953025,370L266.6652560304697,370L266.6652560304697,281.12991959373676L262.2217520101566,281.12991959373676L262.2217520101566,280.68556919170544L257.7782479898434,280.68556919170544Z" fill="url(#plot-pattern-10)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-11" x="453.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-11">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L453.3347439695303,370L466.6652560304698,370L466.6652560304698,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289L453.3347439695303,312.2344477359289Z" fill="url(#plot-pattern-11)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-12" x="153.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-12">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M157.7782479898434,325.5649597968684L153.33474396953025,325.5649597968684L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L153.33474396953025,370L166.66525603046975,370L166.66525603046975,330.00846381718156L162.22175201015656,330.00846381718156L162.22175201015656,327.34236140499365L157.7782479898434,327.34236140499365Z" fill="url(#plot-pattern-12)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-13" x="213.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-13">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M217.7782479898434,334.4519678374947L213.33474396953025,334.4519678374947L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L213.33474396953025,370L226.66525603046975,370L226.66525603046975,338.8954718578079L222.22175201015656,338.8954718578079L222.22175201015656,338.00677105374524L217.7782479898434,338.00677105374524Z" fill="url(#plot-pattern-13)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-14" x="393.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-14">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M393.3347439695303,285.57342361404994L393.3347439695303,285.57342361404994L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L393.3347439695303,370L406.6652560304698,370L406.6652560304698,290.01692763436307L397.77824798984346,290.01692763436307L397.77824798984346,286.90647482014384L393.3347439695303,286.90647482014384Z" fill="url(#plot-pattern-14)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-15" x="353.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-15">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M353.3347439695303,307.79094371561575L353.3347439695303,307.79094371561575L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L353.3347439695303,370L366.6652560304698,370L366.6652560304698,312.2344477359289L357.77824798984346,312.2344477359289L357.77824798984346,311.34574693186624L353.3347439695303,311.34574693186624Z" fill="url(#plot-pattern-15)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-16" x="313.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-16">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M313.3347439695303,312.2344477359289L313.3347439695303,312.2344477359289L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L313.3347439695303,370L326.6652560304698,370L326.6652560304698,316.67795175624207L317.77824798984346,316.67795175624207L317.77824798984346,315.3449005501481L313.3347439695303,315.3449005501481Z" fill="url(#plot-pattern-16)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-17" x="113.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-17">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M122.22175201015658,343.338975878121L113.33474396953025,343.338975878121L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L113.33474396953025,370L126.66525603046973,370L126.66525603046973,347.7824798984342L126.66525603046973,347.7824798984342L126.66525603046973,346.89377909437155L122.22175201015658,346.89377909437155Z" fill="url(#plot-pattern-17)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-18" x="333.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-18">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M337.77824798984346,303.34743969530257L333.3347439695303,303.34743969530257L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L333.3347439695303,370L346.6652560304698,370L346.6652560304698,307.79094371561575L342.2217520101566,307.79094371561575L342.2217520101566,306.9022429115531L337.77824798984346,306.9022429115531Z" fill="url(#plot-pattern-18)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-19" x="373.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-19">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M377.77824798984346,356.6694879390605L373.3347439695303,356.6694879390605L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L373.3347439695303,370L386.6652560304698,370L386.6652560304698,361.1129919593737L382.2217520101566,361.1129919593737L382.2217520101566,360.22429115531105L377.77824798984346,360.22429115531105Z" fill="url(#plot-pattern-19)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-20" x="473.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-20">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M482.2217520101566,343.338975878121L473.3347439695303,343.338975878121L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L473.3347439695303,370L486.6652560304698,370L486.6652560304698,347.7824798984342L486.6652560304698,347.7824798984342L486.6652560304698,346.89377909437155L482.2217520101566,346.89377909437155Z" fill="url(#plot-pattern-20)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-21" x="173.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-21">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M173.33474396953025,316.67795175624207L173.33474396953025,316.67795175624207L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L173.33474396953025,370L186.66525603046975,370L186.66525603046975,321.1214557765552L177.7782479898434,321.1214557765552L177.7782479898434,320.6771053745239L173.33474396953025,320.6771053745239Z" fill="url(#plot-pattern-21)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-22" x="133.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-22">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M137.7782479898434,325.5649597968684L133.33474396953025,325.5649597968684L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L133.33474396953025,370L146.66525603046975,370L146.66525603046975,330.00846381718156L142.22175201015656,330.00846381718156L142.22175201015656,326.453660600931L137.7782479898434,326.453660600931Z" fill="url(#plot-pattern-22)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-23" x="273.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-23">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L273.3347439695303,370L286.6652560304698,370L286.6652560304698,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474L273.3347439695303,352.2259839187474Z" fill="url(#plot-pattern-23)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-24" x="73.33474396953025">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-24">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M73.33474396953025,347.7824798984342L73.33474396953025,347.7824798984342L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L73.33474396953025,370L86.66525603046973,370L86.66525603046973,352.2259839187474L77.77824798984341,352.2259839187474L77.77824798984341,348.6711807024968L73.33474396953025,348.6711807024968Z" fill="url(#plot-pattern-24)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-25" x="573.3347439695302">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-25">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M577.7782479898434,330.00846381718156L573.3347439695302,330.00846381718156L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L573.3347439695302,370L586.6652560304697,370L586.6652560304697,334.4519678374947L582.2217520101566,334.4519678374947L582.2217520101566,330.8971646212442L577.7782479898434,330.8971646212442Z" fill="url(#plot-pattern-25)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-26" x="433.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-26">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M442.2217520101566,312.2344477359289L433.3347439695303,312.2344477359289L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L433.3347439695303,370L446.6652560304698,370L446.6652560304698,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207L442.2217520101566,316.67795175624207Z" fill="url(#plot-pattern-26)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-27" x="513.3347439695302">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-27">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M517.7782479898434,338.8954718578079L513.3347439695302,338.8954718578079L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L513.3347439695302,370L526.6652560304697,370L526.6652560304697,343.338975878121L522.2217520101566,343.338975878121L522.2217520101566,340.67287346593315L517.7782479898434,340.67287346593315Z" fill="url(#plot-pattern-27)"></path>
-    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" y="370" id="plot-pattern-28" x="293.3347439695303">
+    <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-28">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path d="M302.2217520101566,321.1214557765552L293.3347439695303,321.1214557765552L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L293.3347439695303,370L306.6652560304698,370L306.6652560304698,325.5649597968684L306.6652560304698,325.5649597968684L306.6652560304698,323.7875581887431L302.2217520101566,323.7875581887431Z" fill="url(#plot-pattern-28)"></path>
+    <path transform="translate(93.33474396953025,370)" d="M8.887008040626323,-351.0368176047398L0,-351.0368176047398L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-346.5933135844266L13.330512060939485,-346.5933135844266L13.330512060939485,-347.9263647905206L8.887008040626323,-347.9263647905206Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(233.33474396953025,370)" d="M0,-39.99153618281846L0,-39.99153618281846L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-35.548032162505294L4.443504020313162,-35.548032162505294L4.443504020313162,-38.2141345746932L0,-38.2141345746932Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(493.3347439695303,370)" d="M0,-22.21752010156581L0,-22.21752010156581L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L4.443504020313162,-17.774016081252647L4.443504020313162,-21.32881929750318L0,-21.32881929750318Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(193.33474396953025,370)" d="M4.443504020313162,-79.98307236563691L0,-79.98307236563691L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-75.53956834532374L8.887008040626323,-75.53956834532374L8.887008040626323,-77.76132035548034L4.443504020313162,-77.76132035548034Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(533.3347439695302,370)" d="M8.887008040626323,-17.774016081252647L0,-17.774016081252647L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-13.330512060939485Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(553.3347439695302,370)" d="M8.887008040626323,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L13.330512060939485,-53.32204824375794L13.330512060939485,-55.0994498518832L8.887008040626323,-55.0994498518832Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(53.33474396953026,370)" d="M0,-217.73169699534492L0,-217.73169699534492L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-213.28819297503176L4.443504020313162,-213.28819297503176L4.443504020313162,-215.50994498518835L0,-215.50994498518835Z" fill="url(#plot-pattern-7)"></path>
+    <path transform="translate(413.3347439695303,370)" d="M0,-44.43504020313162L0,-44.43504020313162L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-44.43504020313162L0,-44.43504020313162L0,-44.43504020313162L0,-44.43504020313162Z" fill="url(#plot-pattern-8)"></path>
+    <path transform="translate(593.3347439695302,370)" d="M8.887008040626323,-53.32204824375794L0,-53.32204824375794L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-48.87854422344478L13.330512060939485,-48.87854422344478L13.330512060939485,-50.21159542953871L8.887008040626323,-50.21159542953871Z" fill="url(#plot-pattern-9)"></path>
+    <path transform="translate(253.33474396953025,370)" d="M4.443504020313162,-93.3135844265764L0,-93.3135844265764L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-88.87008040626324L8.887008040626323,-88.87008040626324L8.887008040626323,-89.31443080829456L4.443504020313162,-89.31443080829456Z" fill="url(#plot-pattern-10)"></path>
+    <path transform="translate(453.3347439695303,370)" d="M0,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-57.765552264071104L0,-57.765552264071104L0,-57.765552264071104L0,-57.765552264071104Z" fill="url(#plot-pattern-11)"></path>
+    <path transform="translate(153.33474396953025,370)" d="M4.443504020313162,-44.43504020313162L0,-44.43504020313162L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-39.99153618281846L8.887008040626323,-39.99153618281846L8.887008040626323,-42.65763859500636L4.443504020313162,-42.65763859500636Z" fill="url(#plot-pattern-12)"></path>
+    <path transform="translate(213.33474396953025,370)" d="M4.443504020313162,-35.548032162505294L0,-35.548032162505294L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-31.10452814219213L8.887008040626323,-31.10452814219213L8.887008040626323,-31.99322894625476L4.443504020313162,-31.99322894625476Z" fill="url(#plot-pattern-13)"></path>
+    <path transform="translate(393.3347439695303,370)" d="M0,-84.42657638595007L0,-84.42657638595007L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-79.98307236563691L4.443504020313162,-79.98307236563691L4.443504020313162,-83.09352517985614L0,-83.09352517985614Z" fill="url(#plot-pattern-14)"></path>
+    <path transform="translate(353.3347439695303,370)" d="M0,-62.20905628438426L0,-62.20905628438426L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-57.765552264071104L4.443504020313162,-57.765552264071104L4.443504020313162,-58.65425306813375L0,-58.65425306813375Z" fill="url(#plot-pattern-15)"></path>
+    <path transform="translate(313.3347439695303,370)" d="M0,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L4.443504020313162,-53.32204824375794L4.443504020313162,-54.655099449851875L0,-54.655099449851875Z" fill="url(#plot-pattern-16)"></path>
+    <path transform="translate(113.33474396953025,370)" d="M8.887008040626323,-26.66102412187897L0,-26.66102412187897L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-22.21752010156581L13.330512060939485,-22.21752010156581L13.330512060939485,-23.106220905628437L8.887008040626323,-23.106220905628437Z" fill="url(#plot-pattern-17)"></path>
+    <path transform="translate(333.3347439695303,370)" d="M4.443504020313162,-66.65256030469743L0,-66.65256030469743L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-62.20905628438426L8.887008040626323,-62.20905628438426L8.887008040626323,-63.09775708844691L4.443504020313162,-63.09775708844691Z" fill="url(#plot-pattern-18)"></path>
+    <path transform="translate(373.3347439695303,370)" d="M4.443504020313162,-13.330512060939485L0,-13.330512060939485L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-8.887008040626323L8.887008040626323,-8.887008040626323L8.887008040626323,-9.775708844688957L4.443504020313162,-9.775708844688957Z" fill="url(#plot-pattern-19)"></path>
+    <path transform="translate(473.3347439695303,370)" d="M8.887008040626323,-26.66102412187897L0,-26.66102412187897L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-22.21752010156581L13.330512060939485,-22.21752010156581L13.330512060939485,-23.106220905628437L8.887008040626323,-23.106220905628437Z" fill="url(#plot-pattern-20)"></path>
+    <path transform="translate(173.33474396953025,370)" d="M0,-53.32204824375794L0,-53.32204824375794L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-48.87854422344478L4.443504020313162,-48.87854422344478L4.443504020313162,-49.3228946254761L0,-49.3228946254761Z" fill="url(#plot-pattern-21)"></path>
+    <path transform="translate(133.33474396953025,370)" d="M4.443504020313162,-44.43504020313162L0,-44.43504020313162L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-39.99153618281846L8.887008040626323,-39.99153618281846L8.887008040626323,-43.54633939906899L4.443504020313162,-43.54633939906899Z" fill="url(#plot-pattern-22)"></path>
+    <path transform="translate(273.3347439695303,370)" d="M0,-17.774016081252647L0,-17.774016081252647L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L0,-17.774016081252647L0,-17.774016081252647L0,-17.774016081252647Z" fill="url(#plot-pattern-23)"></path>
+    <path transform="translate(73.33474396953025,370)" d="M0,-22.21752010156581L0,-22.21752010156581L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L4.443504020313162,-17.774016081252647L4.443504020313162,-21.32881929750318L0,-21.32881929750318Z" fill="url(#plot-pattern-24)"></path>
+    <path transform="translate(573.3347439695302,370)" d="M4.443504020313162,-39.99153618281846L0,-39.99153618281846L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-35.548032162505294L8.887008040626323,-35.548032162505294L8.887008040626323,-39.10283537875583L4.443504020313162,-39.10283537875583Z" fill="url(#plot-pattern-25)"></path>
+    <path transform="translate(433.3347439695303,370)" d="M8.887008040626323,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-53.32204824375794Z" fill="url(#plot-pattern-26)"></path>
+    <path transform="translate(513.3347439695302,370)" d="M4.443504020313162,-31.10452814219213L0,-31.10452814219213L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-26.66102412187897L8.887008040626323,-26.66102412187897L8.887008040626323,-29.327126534066874L4.443504020313162,-29.327126534066874Z" fill="url(#plot-pattern-27)"></path>
+    <path transform="translate(293.3347439695303,370)" d="M8.887008040626323,-48.87854422344478L0,-48.87854422344478L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-44.43504020313162L13.330512060939485,-44.43504020313162L13.330512060939485,-46.21244181125687L8.887008040626323,-46.21244181125687Z" fill="url(#plot-pattern-28)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 373b21c96d..45fe91b958 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -74,27 +74,27 @@
       <text y="0.32em" transform="translate(40,66.38041619932265)">800</text>
       <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
     </g>
-    <g aria-label="bar">
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-1" x="41.36538314948109">
+    <g aria-label="waffle">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-1">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <path d="M163.67702083174527,303.5552264485849L41.36538314948109,303.5552264485849L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L41.36538314948109,380L637.6346168505189,380L637.6346168505189,318.8441811588679L178.96597554202827,318.8441811588679L178.96597554202827,308.60058150297846L163.67702083174527,308.60058150297846Z" fill="url(#plot-pattern-1)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-2" x="41.36538314948109">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-2">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <path d="M591.7677527196698,196.53254347660373L41.36538314948109,196.53254347660373L41.36538314948109,303.5552264485849L163.67702083174527,303.5552264485849L163.67702083174527,308.60058150297846L178.96597554202827,308.60058150297846L178.96597554202827,318.8441811588679L637.6346168505189,318.8441811588679L637.6346168505189,211.82149818688674L607.0567074299529,211.82149818688674L607.0567074299529,201.88367762520315L591.7677527196698,201.88367762520315Z" fill="url(#plot-pattern-2)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-3" x="41.36538314948109">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-3">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <path d="M133.09911141117922,104.79881521490563L41.36538314948109,104.79881521490563L41.36538314948109,196.53254347660373L591.7677527196698,196.53254347660373L591.7677527196698,201.88367762520315L607.0567074299529,201.88367762520315L607.0567074299529,211.82149818688674L637.6346168505189,211.82149818688674L637.6346168505189,120.08776992518864L148.38806612146226,120.08776992518864L148.38806612146226,117.18286853023574L133.09911141117922,117.18286853023574Z" fill="url(#plot-pattern-3)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-4" x="41.36538314948109">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-4">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <path d="M240.12179438316036,58.93195108405655L41.36538314948109,58.93195108405655L41.36538314948109,104.79881521490563L133.09911141117922,104.79881521490563L133.09911141117922,117.18286853023574L148.38806612146226,117.18286853023574L148.38806612146226,120.08776992518864L637.6346168505189,120.08776992518864L637.6346168505189,74.22090579433956L255.4107490934434,74.22090579433956L255.4107490934434,62.75418976162729L240.12179438316036,62.75418976162729Z" fill="url(#plot-pattern-4)"></path>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" y="380" id="plot-pattern-5" x="41.36538314948109">
+      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-5">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path d="M362.43343206542454,13.06508695320747L41.36538314948109,13.06508695320747L41.36538314948109,58.93195108405655L240.12179438316036,58.93195108405655L240.12179438316036,62.75418976162729L255.4107490934434,62.75418976162729L255.4107490934434,74.22090579433956L637.6346168505189,74.22090579433956L637.6346168505189,28.354041663490477L377.7223867757076,28.354041663490477L377.7223867757076,23.61446570330361L362.43343206542454,23.61446570330361Z" fill="url(#plot-pattern-5)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M122.31163768226418,-76.44477355141511L0,-76.44477355141511L0,0L0,0L0,0L0,0L0,0L596.2692337010378,0L596.2692337010378,-61.15581884113209L137.60059239254718,-61.15581884113209L137.60059239254718,-71.39941849702153L122.31163768226418,-71.39941849702153Z" fill="url(#plot-pattern-1)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M550.4023695701887,-183.46745652339627L0,-183.46745652339627L0,-76.44477355141511L122.31163768226418,-76.44477355141511L122.31163768226418,-71.39941849702153L137.60059239254718,-71.39941849702153L137.60059239254718,-61.15581884113209L596.2692337010378,-61.15581884113209L596.2692337010378,-168.17850181311326L565.6913242804718,-168.17850181311326L565.6913242804718,-178.11632237479685L550.4023695701887,-178.11632237479685Z" fill="url(#plot-pattern-2)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M91.73372826169813,-275.20118478509437L0,-275.20118478509437L0,-183.46745652339627L550.4023695701887,-183.46745652339627L550.4023695701887,-178.11632237479685L565.6913242804718,-178.11632237479685L565.6913242804718,-168.17850181311326L596.2692337010378,-168.17850181311326L596.2692337010378,-259.91223007481136L107.02268297198115,-259.91223007481136L107.02268297198115,-262.81713146976426L91.73372826169813,-262.81713146976426Z" fill="url(#plot-pattern-3)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M198.75641123367927,-321.06804891594345L0,-321.06804891594345L0,-275.20118478509437L91.73372826169813,-275.20118478509437L91.73372826169813,-262.81713146976426L107.02268297198115,-262.81713146976426L107.02268297198115,-259.91223007481136L596.2692337010378,-259.91223007481136L596.2692337010378,-305.77909420566044L214.0453659439623,-305.77909420566044L214.0453659439623,-317.2458102383727L198.75641123367927,-317.2458102383727Z" fill="url(#plot-pattern-4)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M321.06804891594345,-366.93491304679253L0,-366.93491304679253L0,-321.06804891594345L198.75641123367927,-321.06804891594345L198.75641123367927,-317.2458102383727L214.0453659439623,-317.2458102383727L214.0453659439623,-305.77909420566044L596.2692337010378,-305.77909420566044L596.2692337010378,-351.6459583365095L336.3570036262265,-351.6459583365095L336.3570036262265,-356.3855342966964L321.06804891594345,-356.3855342966964Z" fill="url(#plot-pattern-5)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>

From 96ae5686ac1c95760ffb071a8bedff4f8e86f38a Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 20:25:11 -0400
Subject: [PATCH 19/22] more robust waffle

---
 src/marks/waffle.js                     |  52 +++----
 test/output/waffleRound.svg             | 102 ++++++++++++++
 test/output/waffleShorthand.svg         | 104 ++++++++------
 test/output/waffleShorthandNegative.svg |  90 ------------
 test/output/waffleStroke.svg            | 106 +++++++-------
 test/output/waffleStrokeMixed.svg       | 109 +++++++++++++++
 test/output/waffleStrokeNegative.svg    | 177 +++++++++++++++++-------
 test/output/waffleStrokePositive.svg    | 165 ++++++++++++++++++++++
 test/output/waffleX.svg                 |  10 +-
 test/output/waffleXStacked.svg          |  10 +-
 test/output/waffleY.svg                 |  10 +-
 test/output/waffleYGrouped.svg          |  56 ++++----
 test/output/waffleYStacked.html         |  10 +-
 test/plots/waffle.ts                    | 160 ++++++++++++++++++++-
 14 files changed, 849 insertions(+), 312 deletions(-)
 create mode 100644 test/output/waffleRound.svg
 delete mode 100644 test/output/waffleShorthandNegative.svg
 create mode 100644 test/output/waffleStrokeMixed.svg
 create mode 100644 test/output/waffleStrokePositive.svg

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index 9dcaee29b9..ab2b4957a3 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -100,6 +100,7 @@ function waffleRender(y) {
                 .join("L")}Z`
           )
           .attr("fill", (i) => `url(#${patternId}-${i})`)
+          .attr("stroke", this.stroke == null ? null : (i) => `url(#${patternId}-${i})`)
       )
       .node();
   };
@@ -143,19 +144,34 @@ function waffleRender(y) {
 // require additional corner cuts, so the implementation below generates a few
 // more points.
 function wafflePoints(i1, i2, columns) {
+  if (i1 < 0 || i2 < 0) {
+    const k = Math.ceil(-Math.min(i1, i2) / columns); // shift negative to positive
+    return wafflePoints(i1 + k * columns, i2 + k * columns, columns).map(([x, y]) => [x, y - k]);
+  }
+  if (i2 < i1) {
+    return wafflePoints(i2, i1, columns);
+  }
   return [
-    [floor(abs(i2) % columns), ceil(i2 / columns)],
-    [0, ceil(i2 / columns)],
-    [0, ceil(i1 / columns)],
-    [floor(abs(i1) % columns), ceil(i1 / columns)],
-    [floor(abs(i1) % columns), floor(i1 / columns) + (i1 % 1)],
-    [ceil(abs(i1) % columns), floor(i1 / columns) + (i1 % 1)],
-    [ceil(abs(i1) % columns), floor(i1 / columns)],
-    [columns, floor(i1 / columns)],
-    [columns, floor(i2 / columns)],
-    [ceil(abs(i2) % columns), floor(i2 / columns)],
-    [ceil(abs(i2) % columns), floor(i2 / columns) + (i2 % 1)],
-    [floor(abs(i2) % columns), floor(i2 / columns) + (i2 % 1)]
+    [0, Math.ceil(i1 / columns)],
+    [Math.floor(i1 % columns), Math.ceil(i1 / columns)],
+    [Math.floor(i1 % columns), Math.floor(i1 / columns) + (i1 % 1)],
+    [Math.ceil(i1 % columns), Math.floor(i1 / columns) + (i1 % 1)],
+    ...(i1 % columns > columns - 1
+      ? []
+      : [
+          [Math.ceil(i1 % columns), Math.floor(i1 / columns)],
+          [columns, Math.floor(i1 / columns)]
+        ]),
+    [columns, Math.floor(i2 / columns)],
+    [Math.ceil(i2 % columns), Math.floor(i2 / columns)],
+    [Math.ceil(i2 % columns), Math.floor(i2 / columns) + (i2 % 1)],
+    [Math.floor(i2 % columns), Math.floor(i2 / columns) + (i2 % 1)],
+    ...(i2 % columns < 1
+      ? []
+      : [
+          [Math.floor(i2 % columns), Math.ceil(i2 / columns)],
+          [0, Math.ceil(i2 / columns)]
+        ])
   ];
 }
 
@@ -175,18 +191,6 @@ function spread(domain) {
   return max - min;
 }
 
-function abs(x) {
-  return Math.abs(x);
-}
-
-function ceil(x) {
-  return (x < 0 ? Math.floor : Math.ceil)(x);
-}
-
-function floor(x) {
-  return (x < 0 ? Math.ceil : Math.floor)(x);
-}
-
 export function waffleX(data, options = {}) {
   if (!hasXY(options)) options = {...options, y: indexOf, x2: identity};
   return new WaffleX(data, maybeStackX(maybeIntervalX(maybeIdentityX(options))));
diff --git a/test/output/waffleRound.svg b/test/output/waffleRound.svg
new file mode 100644
index 0000000000..8dd553d469
--- /dev/null
+++ b/test/output/waffleRound.svg
@@ -0,0 +1,102 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,343.1818181818182)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,293.78787878787875)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,244.39393939393938)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,195)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,145.60606060606062)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,96.21212121212122)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,46.818181818181806)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,343.1818181818182)">−60</text>
+    <text y="0.32em" transform="translate(40,293.78787878787875)">−40</text>
+    <text y="0.32em" transform="translate(40,244.39393939393938)">−20</text>
+    <text y="0.32em" transform="translate(40,195)">0</text>
+    <text y="0.32em" transform="translate(40,145.60606060606062)">20</text>
+    <text y="0.32em" transform="translate(40,96.21212121212122)">40</text>
+    <text y="0.32em" transform="translate(40,46.818181818181806)">60</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
+    <path transform="translate(50,370)" d="M0,0L0,6"></path>
+    <path transform="translate(145,370)" d="M0,0L0,6"></path>
+    <path transform="translate(240,370)" d="M0,0L0,6"></path>
+    <path transform="translate(335,370)" d="M0,0L0,6"></path>
+    <path transform="translate(430,370)" d="M0,0L0,6"></path>
+    <path transform="translate(525,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,9.5)">
+    <text y="0.71em" transform="translate(50,370)">0</text>
+    <text y="0.71em" transform="translate(145,370)">1</text>
+    <text y="0.71em" transform="translate(240,370)">2</text>
+    <text y="0.71em" transform="translate(335,370)">3</text>
+    <text y="0.71em" transform="translate(430,370)">4</text>
+    <text y="0.71em" transform="translate(525,370)">5</text>
+  </g>
+  <g aria-label="waffle">
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-6">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <path transform="translate(62.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,0L49.39393939393939,0L49.39393939393939,0L49.39393939393939,0L49.39393939393939,-12.348484848484848L0,-12.348484848484848Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(157.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-24.696969696969695L0,-24.696969696969695Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(252.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-61.742424242424235L0,-61.742424242424235Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(347.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-123.48484848484847L0,-123.48484848484847Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(442.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-172.87878787878788L0,-172.87878787878788Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(537.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-24.696969696969695L0,-24.696969696969695Z" fill="url(#plot-pattern-6)"></path>
+  </g>
+  <g aria-label="waffle" fill="red">
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-7">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-8">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-9">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-10">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-11">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-12">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848" rx="100%"></rect>
+    </pattern>
+    <path transform="translate(62.12878787878788,195)" d="M0,0L12.348484848484848,0L12.348484848484848,12.348484848484848L12.348484848484848,12.348484848484848L12.348484848484848,12.348484848484848L61.742424242424235,12.348484848484848L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-7)"></path>
+    <path transform="translate(157.12878787878788,195)" d="M0,12.348484848484848L12.348484848484848,12.348484848484848L12.348484848484848,24.696969696969695L12.348484848484848,24.696969696969695L12.348484848484848,24.696969696969695L61.742424242424235,24.696969696969695L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-8)"></path>
+    <path transform="translate(252.12878787878788,195)" d="M0,49.39393939393939L12.348484848484848,49.39393939393939L12.348484848484848,61.742424242424235L12.348484848484848,61.742424242424235L12.348484848484848,61.742424242424235L61.742424242424235,61.742424242424235L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-9)"></path>
+    <path transform="translate(347.1287878787879,195)" d="M0,111.13636363636363L49.39393939393939,111.13636363636363L49.39393939393939,123.48484848484847L49.39393939393939,123.48484848484847L49.39393939393939,123.48484848484847L61.742424242424235,123.48484848484847L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-10)"></path>
+    <path transform="translate(442.1287878787879,195)" d="M0,160.53030303030303L49.39393939393939,160.53030303030303L49.39393939393939,172.87878787878788L49.39393939393939,172.87878787878788L49.39393939393939,172.87878787878788L61.742424242424235,172.87878787878788L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-11)"></path>
+    <path transform="translate(537.1287878787879,195)" d="M0,12.348484848484848L37.04545454545455,12.348484848484848L37.04545454545455,24.696969696969695L37.04545454545455,24.696969696969695L37.04545454545455,24.696969696969695L61.742424242424235,24.696969696969695L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-12)"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthand.svg b/test/output/waffleShorthand.svg
index 99c7672178..2c942bbba9 100644
--- a/test/output/waffleShorthand.svg
+++ b/test/output/waffleShorthand.svg
@@ -14,36 +14,22 @@
     }
   </style>
   <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
-    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,343.48484848484844)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,316.96969696969694)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,290.45454545454544)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,263.93939393939394)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,237.4242424242424)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,210.9090909090909)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,184.3939393939394)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,157.87878787878788)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,131.36363636363637)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,104.84848484848486)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,78.33333333333331)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,51.81818181818183)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,25.303030303030297)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,343.1818181818182)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,293.78787878787875)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,244.39393939393938)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,195)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,145.60606060606062)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,96.21212121212122)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,46.818181818181806)" d="M0,0L-6,0"></path>
   </g>
   <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
-    <text y="0.32em" transform="translate(40,370)">0</text>
-    <text y="0.32em" transform="translate(40,343.48484848484844)">5</text>
-    <text y="0.32em" transform="translate(40,316.96969696969694)">10</text>
-    <text y="0.32em" transform="translate(40,290.45454545454544)">15</text>
-    <text y="0.32em" transform="translate(40,263.93939393939394)">20</text>
-    <text y="0.32em" transform="translate(40,237.4242424242424)">25</text>
-    <text y="0.32em" transform="translate(40,210.9090909090909)">30</text>
-    <text y="0.32em" transform="translate(40,184.3939393939394)">35</text>
-    <text y="0.32em" transform="translate(40,157.87878787878788)">40</text>
-    <text y="0.32em" transform="translate(40,131.36363636363637)">45</text>
-    <text y="0.32em" transform="translate(40,104.84848484848486)">50</text>
-    <text y="0.32em" transform="translate(40,78.33333333333331)">55</text>
-    <text y="0.32em" transform="translate(40,51.81818181818183)">60</text>
-    <text y="0.32em" transform="translate(40,25.303030303030297)">65</text>
+    <text y="0.32em" transform="translate(40,343.1818181818182)">−60</text>
+    <text y="0.32em" transform="translate(40,293.78787878787875)">−40</text>
+    <text y="0.32em" transform="translate(40,244.39393939393938)">−20</text>
+    <text y="0.32em" transform="translate(40,195)">0</text>
+    <text y="0.32em" transform="translate(40,145.60606060606062)">20</text>
+    <text y="0.32em" transform="translate(40,96.21212121212122)">40</text>
+    <text y="0.32em" transform="translate(40,46.818181818181806)">60</text>
   </g>
   <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
     <path transform="translate(50,370)" d="M0,0L0,6"></path>
@@ -62,29 +48,55 @@
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
   <g aria-label="waffle">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-6">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
     </pattern>
-    <path transform="translate(50.57575757575758,370)" d="M0,-21.21212121212121L0,-21.21212121212121L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L0,-21.21212121212121L0,-21.21212121212121L0,-21.21212121212121Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(145.57575757575756,370)" d="M21.21212121212121,-63.63636363636363L0,-63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(240.57575757575756,370)" d="M0,-127.27272727272727L0,-127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(335.57575757575756,370)" d="M42.42424242424242,-254.54545454545453L0,-254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(430.57575757575756,370)" d="M42.42424242424242,-360.60606060606057L0,-360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
-    <path transform="translate(525.5757575757576,370)" d="M63.63636363636363,-42.42424242424242L0,-42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(62.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,0L49.39393939393939,0L49.39393939393939,0L49.39393939393939,0L49.39393939393939,-12.348484848484848L0,-12.348484848484848Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(157.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-24.696969696969695L0,-24.696969696969695Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(252.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-61.742424242424235L0,-61.742424242424235Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(347.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-123.48484848484847L0,-123.48484848484847Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(442.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-172.87878787878788L0,-172.87878787878788Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(537.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-24.696969696969695L0,-24.696969696969695Z" fill="url(#plot-pattern-6)"></path>
+  </g>
+  <g aria-label="waffle" fill="red">
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-7">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-8">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-9">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-10">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-11">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-12">
+      <rect x="0.5" y="0.5" width="11.348484848484848" height="11.348484848484848"></rect>
+    </pattern>
+    <path transform="translate(62.12878787878788,195)" d="M0,0L12.348484848484848,0L12.348484848484848,12.348484848484848L12.348484848484848,12.348484848484848L12.348484848484848,12.348484848484848L61.742424242424235,12.348484848484848L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-7)"></path>
+    <path transform="translate(157.12878787878788,195)" d="M0,12.348484848484848L12.348484848484848,12.348484848484848L12.348484848484848,24.696969696969695L12.348484848484848,24.696969696969695L12.348484848484848,24.696969696969695L61.742424242424235,24.696969696969695L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-8)"></path>
+    <path transform="translate(252.12878787878788,195)" d="M0,49.39393939393939L12.348484848484848,49.39393939393939L12.348484848484848,61.742424242424235L12.348484848484848,61.742424242424235L12.348484848484848,61.742424242424235L61.742424242424235,61.742424242424235L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-9)"></path>
+    <path transform="translate(347.1287878787879,195)" d="M0,111.13636363636363L49.39393939393939,111.13636363636363L49.39393939393939,123.48484848484847L49.39393939393939,123.48484848484847L49.39393939393939,123.48484848484847L61.742424242424235,123.48484848484847L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-10)"></path>
+    <path transform="translate(442.1287878787879,195)" d="M0,160.53030303030303L49.39393939393939,160.53030303030303L49.39393939393939,172.87878787878788L49.39393939393939,172.87878787878788L49.39393939393939,172.87878787878788L61.742424242424235,172.87878787878788L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-11)"></path>
+    <path transform="translate(537.1287878787879,195)" d="M0,12.348484848484848L37.04545454545455,12.348484848484848L37.04545454545455,24.696969696969695L37.04545454545455,24.696969696969695L37.04545454545455,24.696969696969695L61.742424242424235,24.696969696969695L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-12)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleShorthandNegative.svg b/test/output/waffleShorthandNegative.svg
deleted file mode 100644
index 31ffd81ec5..0000000000
--- a/test/output/waffleShorthandNegative.svg
+++ /dev/null
@@ -1,90 +0,0 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style>
-    :where(.plot) {
-      --plot-background: white;
-      display: block;
-      height: auto;
-      height: intrinsic;
-      max-width: 100%;
-    }
-
-    :where(.plot text),
-    :where(.plot tspan) {
-      white-space: pre;
-    }
-  </style>
-  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
-    <path transform="translate(40,374.6969696969697)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,348.1818181818182)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,321.6666666666667)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,295.1515151515151)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,268.6363636363637)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,242.12121212121212)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,215.6060606060606)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,189.09090909090912)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,162.57575757575756)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,136.06060606060603)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,109.54545454545456)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,83.03030303030302)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,56.51515151515153)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,30)" d="M0,0L-6,0"></path>
-  </g>
-  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
-    <text y="0.32em" transform="translate(40,374.6969696969697)">−65</text>
-    <text y="0.32em" transform="translate(40,348.1818181818182)">−60</text>
-    <text y="0.32em" transform="translate(40,321.6666666666667)">−55</text>
-    <text y="0.32em" transform="translate(40,295.1515151515151)">−50</text>
-    <text y="0.32em" transform="translate(40,268.6363636363637)">−45</text>
-    <text y="0.32em" transform="translate(40,242.12121212121212)">−40</text>
-    <text y="0.32em" transform="translate(40,215.6060606060606)">−35</text>
-    <text y="0.32em" transform="translate(40,189.09090909090912)">−30</text>
-    <text y="0.32em" transform="translate(40,162.57575757575756)">−25</text>
-    <text y="0.32em" transform="translate(40,136.06060606060603)">−20</text>
-    <text y="0.32em" transform="translate(40,109.54545454545456)">−15</text>
-    <text y="0.32em" transform="translate(40,83.03030303030302)">−10</text>
-    <text y="0.32em" transform="translate(40,56.51515151515153)">−5</text>
-    <text y="0.32em" transform="translate(40,30)">0</text>
-  </g>
-  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,1)">
-    <path transform="translate(50,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(145,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(240,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(335,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(430,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(525,30)" d="M0,0L0,-6"></path>
-  </g>
-  <g aria-label="x-axis tick label" transform="translate(43.5,-8.5)">
-    <text transform="translate(50,30)">0</text>
-    <text transform="translate(145,30)">1</text>
-    <text transform="translate(240,30)">2</text>
-    <text transform="translate(335,30)">3</text>
-    <text transform="translate(430,30)">4</text>
-    <text transform="translate(525,30)">5</text>
-  </g>
-  <g aria-label="waffle">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
-    </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
-    </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
-    </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
-    </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
-    </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
-      <rect x="0.5" y="0.5" width="20.21212121212121" height="20.21212121212121"></rect>
-    </pattern>
-    <path transform="translate(50.57575757575758,30)" d="M0,21.21212121212121L0,21.21212121212121L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L0,21.21212121212121L0,21.21212121212121L0,21.21212121212121Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(145.57575757575756,30)" d="M21.21212121212121,63.63636363636363L0,63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(240.57575757575756,30)" d="M0,127.27272727272727L0,127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,127.27272727272727L0,127.27272727272727L0,127.27272727272727L0,127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(335.57575757575756,30)" d="M42.42424242424242,254.54545454545453L0,254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(430.57575757575756,30)" d="M42.42424242424242,360.60606060606057L0,360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
-    <path transform="translate(525.5757575757576,30)" d="M63.63636363636363,42.42424242424242L0,42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/test/output/waffleStroke.svg b/test/output/waffleStroke.svg
index a8a20006d6..ff8bc9a54a 100644
--- a/test/output/waffleStroke.svg
+++ b/test/output/waffleStroke.svg
@@ -14,36 +14,22 @@
     }
   </style>
   <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
-    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,343.48484848484844)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,316.96969696969694)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,290.45454545454544)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,263.93939393939394)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,237.4242424242424)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,210.9090909090909)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,184.3939393939394)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,157.87878787878788)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,131.36363636363637)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,104.84848484848486)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,78.33333333333331)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,51.81818181818183)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,25.303030303030297)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,343.1818181818182)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,293.78787878787875)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,244.39393939393938)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,195)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,145.60606060606062)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,96.21212121212122)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,46.818181818181806)" d="M0,0L-6,0"></path>
   </g>
   <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
-    <text y="0.32em" transform="translate(40,370)">0</text>
-    <text y="0.32em" transform="translate(40,343.48484848484844)">5</text>
-    <text y="0.32em" transform="translate(40,316.96969696969694)">10</text>
-    <text y="0.32em" transform="translate(40,290.45454545454544)">15</text>
-    <text y="0.32em" transform="translate(40,263.93939393939394)">20</text>
-    <text y="0.32em" transform="translate(40,237.4242424242424)">25</text>
-    <text y="0.32em" transform="translate(40,210.9090909090909)">30</text>
-    <text y="0.32em" transform="translate(40,184.3939393939394)">35</text>
-    <text y="0.32em" transform="translate(40,157.87878787878788)">40</text>
-    <text y="0.32em" transform="translate(40,131.36363636363637)">45</text>
-    <text y="0.32em" transform="translate(40,104.84848484848486)">50</text>
-    <text y="0.32em" transform="translate(40,78.33333333333331)">55</text>
-    <text y="0.32em" transform="translate(40,51.81818181818183)">60</text>
-    <text y="0.32em" transform="translate(40,25.303030303030297)">65</text>
+    <text y="0.32em" transform="translate(40,343.1818181818182)">−60</text>
+    <text y="0.32em" transform="translate(40,293.78787878787875)">−40</text>
+    <text y="0.32em" transform="translate(40,244.39393939393938)">−20</text>
+    <text y="0.32em" transform="translate(40,195)">0</text>
+    <text y="0.32em" transform="translate(40,145.60606060606062)">20</text>
+    <text y="0.32em" transform="translate(40,96.21212121212122)">40</text>
+    <text y="0.32em" transform="translate(40,46.818181818181806)">60</text>
   </g>
   <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
     <path transform="translate(50,370)" d="M0,0L0,6"></path>
@@ -61,30 +47,56 @@
     <text y="0.71em" transform="translate(430,370)">4</text>
     <text y="0.71em" transform="translate(525,370)">5</text>
   </g>
-  <g aria-label="waffle" fill="#eee" stroke="red">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+  <g aria-label="waffle" stroke="red">
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-6">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
     </pattern>
-    <path transform="translate(50.57575757575758,370)" d="M0,-42.42424242424242L0,-42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L21.21212121212121,-21.21212121212121L21.21212121212121,-31.818181818181817L0,-31.818181818181817Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(145.57575757575756,370)" d="M21.21212121212121,-63.63636363636363L0,-63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242L21.21212121212121,-42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(240.57575757575756,370)" d="M0,-127.27272727272727L0,-127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727L0,-127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(335.57575757575756,370)" d="M42.42424242424242,-254.54545454545453L0,-254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331L42.42424242424242,-233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(430.57575757575756,370)" d="M42.42424242424242,-360.60606060606057L0,-360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394L42.42424242424242,-339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
-    <path transform="translate(525.5757575757576,370)" d="M63.63636363636363,-42.42424242424242L0,-42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121L63.63636363636363,-21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(62.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,0L49.39393939393939,0L49.39393939393939,0L49.39393939393939,0L49.39393939393939,-12.348484848484848L0,-12.348484848484848Z" fill="url(#plot-pattern-1)" stroke="url(#plot-pattern-1)"></path>
+    <path transform="translate(157.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-12.348484848484848L49.39393939393939,-24.696969696969695L0,-24.696969696969695Z" fill="url(#plot-pattern-2)" stroke="url(#plot-pattern-2)"></path>
+    <path transform="translate(252.12878787878788,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-49.39393939393939L49.39393939393939,-61.742424242424235L0,-61.742424242424235Z" fill="url(#plot-pattern-3)" stroke="url(#plot-pattern-3)"></path>
+    <path transform="translate(347.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-111.13636363636363L12.348484848484848,-123.48484848484847L0,-123.48484848484847Z" fill="url(#plot-pattern-4)" stroke="url(#plot-pattern-4)"></path>
+    <path transform="translate(442.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-160.53030303030303L12.348484848484848,-172.87878787878788L0,-172.87878787878788Z" fill="url(#plot-pattern-5)" stroke="url(#plot-pattern-5)"></path>
+    <path transform="translate(537.1287878787879,195)" d="M0,0L0,0L0,0L0,0L0,0L61.742424242424235,0L61.742424242424235,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-12.348484848484848L24.696969696969695,-24.696969696969695L0,-24.696969696969695Z" fill="url(#plot-pattern-6)" stroke="url(#plot-pattern-6)"></path>
+  </g>
+  <g aria-label="waffle" fill="red" stroke="currentColor">
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-7">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-8">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-9">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-10">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-11">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
+    </pattern>
+    <pattern width="12.348484848484848" height="12.348484848484848" patternUnits="userSpaceOnUse" id="plot-pattern-12">
+      <rect x="0" y="0" width="12.348484848484848" height="12.348484848484848"></rect>
+    </pattern>
+    <path transform="translate(62.12878787878788,195)" d="M0,0L12.348484848484848,0L12.348484848484848,12.348484848484848L12.348484848484848,12.348484848484848L12.348484848484848,12.348484848484848L61.742424242424235,12.348484848484848L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-7)" stroke="url(#plot-pattern-7)"></path>
+    <path transform="translate(157.12878787878788,195)" d="M0,12.348484848484848L12.348484848484848,12.348484848484848L12.348484848484848,24.696969696969695L12.348484848484848,24.696969696969695L12.348484848484848,24.696969696969695L61.742424242424235,24.696969696969695L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-8)" stroke="url(#plot-pattern-8)"></path>
+    <path transform="translate(252.12878787878788,195)" d="M0,49.39393939393939L12.348484848484848,49.39393939393939L12.348484848484848,61.742424242424235L12.348484848484848,61.742424242424235L12.348484848484848,61.742424242424235L61.742424242424235,61.742424242424235L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-9)" stroke="url(#plot-pattern-9)"></path>
+    <path transform="translate(347.1287878787879,195)" d="M0,111.13636363636363L49.39393939393939,111.13636363636363L49.39393939393939,123.48484848484847L49.39393939393939,123.48484848484847L49.39393939393939,123.48484848484847L61.742424242424235,123.48484848484847L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-10)" stroke="url(#plot-pattern-10)"></path>
+    <path transform="translate(442.1287878787879,195)" d="M0,160.53030303030303L49.39393939393939,160.53030303030303L49.39393939393939,172.87878787878788L49.39393939393939,172.87878787878788L49.39393939393939,172.87878787878788L61.742424242424235,172.87878787878788L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-11)" stroke="url(#plot-pattern-11)"></path>
+    <path transform="translate(537.1287878787879,195)" d="M0,12.348484848484848L37.04545454545455,12.348484848484848L37.04545454545455,24.696969696969695L37.04545454545455,24.696969696969695L37.04545454545455,24.696969696969695L61.742424242424235,24.696969696969695L61.742424242424235,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-12)" stroke="url(#plot-pattern-12)"></path>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStrokeMixed.svg b/test/output/waffleStrokeMixed.svg
new file mode 100644
index 0000000000..fceae2f5af
--- /dev/null
+++ b/test/output/waffleStrokeMixed.svg
@@ -0,0 +1,109 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,342.0714285714286)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,302.3095238095238)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,262.54761904761904)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,222.78571428571428)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,183.0238095238095)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,143.26190476190473)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,103.49999999999996)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,63.7380952380952)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,23.97619047619039)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,342.0714285714286)">−6</text>
+    <text y="0.32em" transform="translate(40,302.3095238095238)">−4</text>
+    <text y="0.32em" transform="translate(40,262.54761904761904)">−2</text>
+    <text y="0.32em" transform="translate(40,222.78571428571428)">0</text>
+    <text y="0.32em" transform="translate(40,183.0238095238095)">2</text>
+    <text y="0.32em" transform="translate(40,143.26190476190473)">4</text>
+    <text y="0.32em" transform="translate(40,103.49999999999996)">6</text>
+    <text y="0.32em" transform="translate(40,63.7380952380952)">8</text>
+    <text y="0.32em" transform="translate(40,23.97619047619039)">10</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
+    <path transform="translate(50,370)" d="M0,0L0,6"></path>
+    <path transform="translate(145,370)" d="M0,0L0,6"></path>
+    <path transform="translate(240,370)" d="M0,0L0,6"></path>
+    <path transform="translate(335,370)" d="M0,0L0,6"></path>
+    <path transform="translate(430,370)" d="M0,0L0,6"></path>
+    <path transform="translate(525,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,9.5)">
+    <text y="0.71em" transform="translate(50,370)">A</text>
+    <text y="0.71em" transform="translate(145,370)">B</text>
+    <text y="0.71em" transform="translate(240,370)">C</text>
+    <text y="0.71em" transform="translate(335,370)">D</text>
+    <text y="0.71em" transform="translate(430,370)">E</text>
+    <text y="0.71em" transform="translate(525,370)">F</text>
+  </g>
+  <g aria-label="waffle" stroke="red">
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0.5" y="0.5" width="14.904761904761907" height="14.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+      <rect x="0.5" y="0.5" width="14.904761904761907" height="14.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+      <rect x="0.5" y="0.5" width="14.904761904761907" height="14.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+      <rect x="0.5" y="0.5" width="14.904761904761907" height="14.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+      <rect x="0.5" y="0.5" width="14.904761904761907" height="14.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-6">
+      <rect x="0.5" y="0.5" width="14.904761904761907" height="14.904761904761907"></rect>
+    </pattern>
+    <path transform="translate(61.19047619047619,222.78571428571428)" d="M0,15.904761904761907L31.809523809523814,15.904761904761907L31.809523809523814,23.85714285714286L47.71428571428572,23.85714285714286L47.71428571428572,31.809523809523814L63.61904761904763,31.809523809523814L63.61904761904763,-31.809523809523814L63.61904761904763,-31.809523809523814L63.61904761904763,-39.761904761904766L47.71428571428572,-39.761904761904766L47.71428571428572,-47.71428571428572L0,-47.71428571428572Z" fill="url(#plot-pattern-1)" stroke="url(#plot-pattern-1)"></path>
+    <path transform="translate(156.19047619047618,222.78571428571428)" d="M0,31.809523809523814L15.904761904761907,31.809523809523814L15.904761904761907,47.71428571428572L15.904761904761907,47.71428571428572L15.904761904761907,47.71428571428572L63.61904761904763,47.71428571428572L63.61904761904763,-79.52380952380953L47.71428571428572,-79.52380952380953L47.71428571428572,-87.47619047619048L31.809523809523814,-87.47619047619048L31.809523809523814,-95.42857142857144L0,-95.42857142857144Z" fill="url(#plot-pattern-2)" stroke="url(#plot-pattern-2)"></path>
+    <path transform="translate(251.19047619047618,222.78571428571428)" d="M0,63.61904761904763L47.71428571428572,63.61904761904763L47.71428571428572,71.57142857142853L63.61904761904763,71.57142857142853L63.61904761904763,-127.23809523809526L31.809523809523814,-127.23809523809526L31.809523809523814,-135.1904761904762L15.904761904761907,-135.1904761904762L15.904761904761907,-143.14285714285717L0,-143.14285714285717Z" fill="url(#plot-pattern-3)" stroke="url(#plot-pattern-3)"></path>
+    <path transform="translate(346.1904761904762,222.78571428571428)" d="M0,79.52380952380953L31.809523809523814,79.52380952380953L31.809523809523814,95.42857142857144L31.809523809523814,95.42857142857144L31.809523809523814,95.42857142857144L63.61904761904763,95.42857142857144L63.61904761904763,-143.14285714285717L47.71428571428572,-143.14285714285717L47.71428571428572,-143.14285714285717L47.71428571428572,-143.14285714285717L47.71428571428572,-159.04761904761907L0,-159.04761904761907Z" fill="url(#plot-pattern-4)" stroke="url(#plot-pattern-4)"></path>
+    <path transform="translate(441.1904761904762,222.78571428571428)" d="M0,95.42857142857144L0,95.42857142857144L0,103.3809523809524L15.904761904761907,103.3809523809524L15.904761904761907,111.33333333333334L63.61904761904763,111.33333333333334L63.61904761904763,-174.95238095238096L31.809523809523814,-174.95238095238096L31.809523809523814,-182.90476190476193L15.904761904761907,-182.90476190476193L15.904761904761907,-190.8571428571429L0,-190.8571428571429Z" fill="url(#plot-pattern-5)" stroke="url(#plot-pattern-5)"></path>
+    <path transform="translate(536.1904761904761,222.78571428571428)" d="M0,127.23809523809526L47.71428571428572,127.23809523809526L47.71428571428572,143.14285714285705L63.61904761904763,143.14285714285705L63.61904761904763,-190.8571428571429L47.71428571428572,-190.8571428571429L47.71428571428572,-190.8571428571429L47.71428571428572,-190.8571428571429L47.71428571428572,-206.7619047619048L0,-206.7619047619048Z" fill="url(#plot-pattern-6)" stroke="url(#plot-pattern-6)"></path>
+  </g>
+  <g aria-label="waffle" fill="red">
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-7">
+      <rect x="5" y="5" width="5.904761904761907" height="5.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-8">
+      <rect x="5" y="5" width="5.904761904761907" height="5.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-9">
+      <rect x="5" y="5" width="5.904761904761907" height="5.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-10">
+      <rect x="5" y="5" width="5.904761904761907" height="5.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-11">
+      <rect x="5" y="5" width="5.904761904761907" height="5.904761904761907"></rect>
+    </pattern>
+    <pattern width="15.904761904761907" height="15.904761904761907" patternUnits="userSpaceOnUse" id="plot-pattern-12">
+      <rect x="5" y="5" width="5.904761904761907" height="5.904761904761907"></rect>
+    </pattern>
+    <path transform="translate(61.19047619047619,222.78571428571428)" d="M0,15.904761904761907L31.809523809523814,15.904761904761907L31.809523809523814,23.85714285714286L47.71428571428572,23.85714285714286L47.71428571428572,31.809523809523814L63.61904761904763,31.809523809523814L63.61904761904763,-31.809523809523814L63.61904761904763,-31.809523809523814L63.61904761904763,-39.761904761904766L47.71428571428572,-39.761904761904766L47.71428571428572,-47.71428571428572L0,-47.71428571428572Z" fill="url(#plot-pattern-7)"></path>
+    <path transform="translate(156.19047619047618,222.78571428571428)" d="M0,31.809523809523814L15.904761904761907,31.809523809523814L15.904761904761907,47.71428571428572L15.904761904761907,47.71428571428572L15.904761904761907,47.71428571428572L63.61904761904763,47.71428571428572L63.61904761904763,-79.52380952380953L47.71428571428572,-79.52380952380953L47.71428571428572,-87.47619047619048L31.809523809523814,-87.47619047619048L31.809523809523814,-95.42857142857144L0,-95.42857142857144Z" fill="url(#plot-pattern-8)"></path>
+    <path transform="translate(251.19047619047618,222.78571428571428)" d="M0,63.61904761904763L47.71428571428572,63.61904761904763L47.71428571428572,71.57142857142853L63.61904761904763,71.57142857142853L63.61904761904763,-127.23809523809526L31.809523809523814,-127.23809523809526L31.809523809523814,-135.1904761904762L15.904761904761907,-135.1904761904762L15.904761904761907,-143.14285714285717L0,-143.14285714285717Z" fill="url(#plot-pattern-9)"></path>
+    <path transform="translate(346.1904761904762,222.78571428571428)" d="M0,79.52380952380953L31.809523809523814,79.52380952380953L31.809523809523814,95.42857142857144L31.809523809523814,95.42857142857144L31.809523809523814,95.42857142857144L63.61904761904763,95.42857142857144L63.61904761904763,-143.14285714285717L47.71428571428572,-143.14285714285717L47.71428571428572,-143.14285714285717L47.71428571428572,-143.14285714285717L47.71428571428572,-159.04761904761907L0,-159.04761904761907Z" fill="url(#plot-pattern-10)"></path>
+    <path transform="translate(441.1904761904762,222.78571428571428)" d="M0,95.42857142857144L0,95.42857142857144L0,103.3809523809524L15.904761904761907,103.3809523809524L15.904761904761907,111.33333333333334L63.61904761904763,111.33333333333334L63.61904761904763,-174.95238095238096L31.809523809523814,-174.95238095238096L31.809523809523814,-182.90476190476193L15.904761904761907,-182.90476190476193L15.904761904761907,-190.8571428571429L0,-190.8571428571429Z" fill="url(#plot-pattern-11)"></path>
+    <path transform="translate(536.1904761904761,222.78571428571428)" d="M0,127.23809523809526L47.71428571428572,127.23809523809526L47.71428571428572,143.14285714285705L63.61904761904763,143.14285714285705L63.61904761904763,-190.8571428571429L47.71428571428572,-190.8571428571429L47.71428571428572,-190.8571428571429L47.71428571428572,-190.8571428571429L47.71428571428572,-206.7619047619048L0,-206.7619047619048Z" fill="url(#plot-pattern-12)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
+    <line x1="40" x2="620" y1="222.78571428571428" y2="222.78571428571428"></line>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleStrokeNegative.svg b/test/output/waffleStrokeNegative.svg
index 872fab54f9..8e03565a10 100644
--- a/test/output/waffleStrokeNegative.svg
+++ b/test/output/waffleStrokeNegative.svg
@@ -14,35 +14,29 @@
     }
   </style>
   <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
-    <path transform="translate(40,374.6969696969697)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,348.1818181818182)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,321.6666666666667)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,295.1515151515151)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,268.6363636363637)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,242.12121212121212)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,215.6060606060606)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,189.09090909090912)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,162.57575757575756)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,136.06060606060603)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,109.54545454545456)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,83.03030303030302)" d="M0,0L-6,0"></path>
-    <path transform="translate(40,56.51515151515153)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,373.1372549019608)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,338.8235294117647)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,304.5098039215686)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,270.1960784313726)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,235.88235294117646)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,201.5686274509804)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,167.2549019607843)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,132.94117647058826)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,98.62745098039215)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,64.31372549019608)" d="M0,0L-6,0"></path>
     <path transform="translate(40,30)" d="M0,0L-6,0"></path>
   </g>
   <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
-    <text y="0.32em" transform="translate(40,374.6969696969697)">−65</text>
-    <text y="0.32em" transform="translate(40,348.1818181818182)">−60</text>
-    <text y="0.32em" transform="translate(40,321.6666666666667)">−55</text>
-    <text y="0.32em" transform="translate(40,295.1515151515151)">−50</text>
-    <text y="0.32em" transform="translate(40,268.6363636363637)">−45</text>
-    <text y="0.32em" transform="translate(40,242.12121212121212)">−40</text>
-    <text y="0.32em" transform="translate(40,215.6060606060606)">−35</text>
-    <text y="0.32em" transform="translate(40,189.09090909090912)">−30</text>
-    <text y="0.32em" transform="translate(40,162.57575757575756)">−25</text>
-    <text y="0.32em" transform="translate(40,136.06060606060603)">−20</text>
-    <text y="0.32em" transform="translate(40,109.54545454545456)">−15</text>
-    <text y="0.32em" transform="translate(40,83.03030303030302)">−10</text>
-    <text y="0.32em" transform="translate(40,56.51515151515153)">−5</text>
+    <text y="0.32em" transform="translate(40,373.1372549019608)">−10</text>
+    <text y="0.32em" transform="translate(40,338.8235294117647)">−9</text>
+    <text y="0.32em" transform="translate(40,304.5098039215686)">−8</text>
+    <text y="0.32em" transform="translate(40,270.1960784313726)">−7</text>
+    <text y="0.32em" transform="translate(40,235.88235294117646)">−6</text>
+    <text y="0.32em" transform="translate(40,201.5686274509804)">−5</text>
+    <text y="0.32em" transform="translate(40,167.2549019607843)">−4</text>
+    <text y="0.32em" transform="translate(40,132.94117647058826)">−3</text>
+    <text y="0.32em" transform="translate(40,98.62745098039215)">−2</text>
+    <text y="0.32em" transform="translate(40,64.31372549019608)">−1</text>
     <text y="0.32em" transform="translate(40,30)">0</text>
   </g>
   <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,1)">
@@ -54,37 +48,118 @@
     <path transform="translate(525,30)" d="M0,0L0,-6"></path>
   </g>
   <g aria-label="x-axis tick label" transform="translate(43.5,-8.5)">
-    <text transform="translate(50,30)">0</text>
-    <text transform="translate(145,30)">1</text>
-    <text transform="translate(240,30)">2</text>
-    <text transform="translate(335,30)">3</text>
-    <text transform="translate(430,30)">4</text>
-    <text transform="translate(525,30)">5</text>
+    <text transform="translate(50,30)">A</text>
+    <text transform="translate(145,30)">B</text>
+    <text transform="translate(240,30)">C</text>
+    <text transform="translate(335,30)">D</text>
+    <text transform="translate(430,30)">E</text>
+    <text transform="translate(525,30)">F</text>
   </g>
-  <g aria-label="waffle" fill="#eee" stroke="red">
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-1">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+  <g aria-label="waffle" fill-opacity="0.4">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-2">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-3">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-4">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-5">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
     </pattern>
-    <pattern width="21.21212121212121" height="21.21212121212121" patternUnits="userSpaceOnUse" id="plot-pattern-6">
-      <rect x="0" y="0" width="21.21212121212121" height="21.21212121212121"></rect>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-6">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
     </pattern>
-    <path transform="translate(50.57575757575758,30)" d="M0,42.42424242424242L0,42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L21.21212121212121,21.21212121212121L21.21212121212121,31.818181818181817L0,31.818181818181817Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(145.57575757575756,30)" d="M21.21212121212121,63.63636363636363L0,63.63636363636363L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242L21.21212121212121,42.42424242424242Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(240.57575757575756,30)" d="M0,127.27272727272727L0,127.27272727272727L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,127.27272727272727L0,127.27272727272727L0,127.27272727272727L0,127.27272727272727Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(335.57575757575756,30)" d="M42.42424242424242,254.54545454545453L0,254.54545454545453L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331L42.42424242424242,233.33333333333331Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(430.57575757575756,30)" d="M42.42424242424242,360.60606060606057L0,360.60606060606057L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394L42.42424242424242,339.3939393939394Z" fill="url(#plot-pattern-5)"></path>
-    <path transform="translate(525.5757575757576,30)" d="M63.63636363636363,42.42424242424242L0,42.42424242424242L0,0L0,0L0,0L0,0L0,0L84.84848484848484,0L84.84848484848484,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121L63.63636363636363,21.21212121212121Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(62.11764705882353,30)" d="M0,20.58823529411765L0,20.58823529411765L0,30.88235294117647L20.58823529411765,30.88235294117647L20.58823529411765,41.1764705882353L61.76470588235294,41.1764705882353L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(157.11764705882354,30)" d="M0,61.76470588235294L20.58823529411765,61.76470588235294L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L61.76470588235294,82.3529411764706L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(252.11764705882354,30)" d="M0,102.94117647058825L20.58823529411765,102.94117647058825L20.58823529411765,113.23529411764699L41.1764705882353,113.23529411764699L41.1764705882353,123.52941176470588L61.76470588235294,123.52941176470588L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(347.11764705882354,30)" d="M0,144.11764705882354L41.1764705882353,144.11764705882354L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L61.76470588235294,164.7058823529412L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(442.11764705882354,30)" d="M0,185.29411764705884L41.1764705882353,185.29411764705884L41.1764705882353,195.58823529411765L61.76470588235294,195.58823529411765L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(537.1176470588235,30)" d="M0,205.8823529411765L0,205.8823529411765L0,226.47058823529397L20.58823529411765,226.47058823529397L20.58823529411765,226.47058823529414L61.76470588235294,226.47058823529414L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-6)"></path>
+  </g>
+  <g aria-label="waffle" stroke="red">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-7">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-8">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-9">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-10">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-11">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-12">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,30)" d="M0,61.76470588235294L0,61.76470588235294L0,72.05882352941174L20.58823529411765,72.05882352941174L20.58823529411765,82.3529411764706L61.76470588235294,82.3529411764706L61.76470588235294,41.1764705882353L20.58823529411765,41.1764705882353L20.58823529411765,30.88235294117647L0,30.88235294117647Z" fill="url(#plot-pattern-7)" stroke="url(#plot-pattern-7)"></path>
+    <path transform="translate(157.11764705882354,30)" d="M0,144.11764705882354L20.58823529411765,144.11764705882354L20.58823529411765,154.41176470588238L41.1764705882353,154.41176470588238L41.1764705882353,164.7058823529412L61.76470588235294,164.7058823529412L61.76470588235294,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,61.76470588235294L0,61.76470588235294Z" fill="url(#plot-pattern-8)" stroke="url(#plot-pattern-8)"></path>
+    <path transform="translate(252.11764705882354,30)" d="M0,226.47058823529414L41.1764705882353,226.47058823529414L41.1764705882353,236.76470588235296L61.76470588235294,236.76470588235296L61.76470588235294,123.52941176470588L41.1764705882353,123.52941176470588L41.1764705882353,113.23529411764699L20.58823529411765,113.23529411764699L20.58823529411765,102.94117647058825L0,102.94117647058825Z" fill="url(#plot-pattern-9)" stroke="url(#plot-pattern-9)"></path>
+    <path transform="translate(347.11764705882354,30)" d="M0,267.64705882352945L0,267.64705882352945L0,267.64705882352945L0,267.64705882352945L0,267.64705882352945L61.76470588235294,267.64705882352945L61.76470588235294,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,144.11764705882354L0,144.11764705882354Z" fill="url(#plot-pattern-10)" stroke="url(#plot-pattern-10)"></path>
+    <path transform="translate(442.11764705882354,30)" d="M0,308.82352941176475L41.1764705882353,308.82352941176475L41.1764705882353,319.1176470588234L61.76470588235294,319.1176470588234L61.76470588235294,205.8823529411765L61.76470588235294,205.8823529411765L61.76470588235294,195.58823529411765L41.1764705882353,195.58823529411765L41.1764705882353,185.29411764705884L0,185.29411764705884Z" fill="url(#plot-pattern-11)" stroke="url(#plot-pattern-11)"></path>
+    <path transform="translate(537.1176470588235,30)" d="M0,329.4117647058824L0,329.4117647058824L0,349.9999999999999L20.58823529411765,349.9999999999999L20.58823529411765,350L61.76470588235294,350L61.76470588235294,226.47058823529414L20.58823529411765,226.47058823529414L20.58823529411765,226.47058823529397L0,226.47058823529397Z" fill="url(#plot-pattern-12)" stroke="url(#plot-pattern-12)"></path>
+  </g>
+  <g aria-label="waffle" fill-opacity="0.4">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-13">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-14">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-15">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-16">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-17">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-18">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,30)" d="M0,20.58823529411765L0,20.58823529411765L0,30.88235294117647L20.58823529411765,30.88235294117647L20.58823529411765,41.1764705882353L61.76470588235294,41.1764705882353L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-13)"></path>
+    <path transform="translate(157.11764705882354,30)" d="M0,61.76470588235294L20.58823529411765,61.76470588235294L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L61.76470588235294,82.3529411764706L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-14)"></path>
+    <path transform="translate(252.11764705882354,30)" d="M0,102.94117647058825L20.58823529411765,102.94117647058825L20.58823529411765,113.23529411764699L41.1764705882353,113.23529411764699L41.1764705882353,123.52941176470588L61.76470588235294,123.52941176470588L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-15)"></path>
+    <path transform="translate(347.11764705882354,30)" d="M0,144.11764705882354L41.1764705882353,144.11764705882354L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L61.76470588235294,164.7058823529412L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-16)"></path>
+    <path transform="translate(442.11764705882354,30)" d="M0,185.29411764705884L41.1764705882353,185.29411764705884L41.1764705882353,195.58823529411765L61.76470588235294,195.58823529411765L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-17)"></path>
+    <path transform="translate(537.1176470588235,30)" d="M0,205.8823529411765L0,205.8823529411765L0,226.47058823529397L20.58823529411765,226.47058823529397L20.58823529411765,226.47058823529414L61.76470588235294,226.47058823529414L61.76470588235294,0L0,0L0,0L0,0Z" fill="url(#plot-pattern-18)"></path>
+  </g>
+  <g aria-label="waffle" fill="red">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-19">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-20">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-21">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-22">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-23">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-24">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,30)" d="M0,61.76470588235294L0,61.76470588235294L0,72.05882352941174L20.58823529411765,72.05882352941174L20.58823529411765,82.3529411764706L61.76470588235294,82.3529411764706L61.76470588235294,41.1764705882353L20.58823529411765,41.1764705882353L20.58823529411765,30.88235294117647L0,30.88235294117647Z" fill="url(#plot-pattern-19)"></path>
+    <path transform="translate(157.11764705882354,30)" d="M0,144.11764705882354L20.58823529411765,144.11764705882354L20.58823529411765,154.41176470588238L41.1764705882353,154.41176470588238L41.1764705882353,164.7058823529412L61.76470588235294,164.7058823529412L61.76470588235294,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,82.3529411764706L20.58823529411765,61.76470588235294L0,61.76470588235294Z" fill="url(#plot-pattern-20)"></path>
+    <path transform="translate(252.11764705882354,30)" d="M0,226.47058823529414L41.1764705882353,226.47058823529414L41.1764705882353,236.76470588235296L61.76470588235294,236.76470588235296L61.76470588235294,123.52941176470588L41.1764705882353,123.52941176470588L41.1764705882353,113.23529411764699L20.58823529411765,113.23529411764699L20.58823529411765,102.94117647058825L0,102.94117647058825Z" fill="url(#plot-pattern-21)"></path>
+    <path transform="translate(347.11764705882354,30)" d="M0,267.64705882352945L0,267.64705882352945L0,267.64705882352945L0,267.64705882352945L0,267.64705882352945L61.76470588235294,267.64705882352945L61.76470588235294,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,164.7058823529412L41.1764705882353,144.11764705882354L0,144.11764705882354Z" fill="url(#plot-pattern-22)"></path>
+    <path transform="translate(442.11764705882354,30)" d="M0,308.82352941176475L41.1764705882353,308.82352941176475L41.1764705882353,319.1176470588234L61.76470588235294,319.1176470588234L61.76470588235294,205.8823529411765L61.76470588235294,205.8823529411765L61.76470588235294,195.58823529411765L41.1764705882353,195.58823529411765L41.1764705882353,185.29411764705884L0,185.29411764705884Z" fill="url(#plot-pattern-23)"></path>
+    <path transform="translate(537.1176470588235,30)" d="M0,329.4117647058824L0,329.4117647058824L0,349.9999999999999L20.58823529411765,349.9999999999999L20.58823529411765,350L61.76470588235294,350L61.76470588235294,226.47058823529414L20.58823529411765,226.47058823529414L20.58823529411765,226.47058823529397L0,226.47058823529397Z" fill="url(#plot-pattern-24)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
+    <line x1="40" x2="620" y1="30" y2="30"></line>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleStrokePositive.svg b/test/output/waffleStrokePositive.svg
new file mode 100644
index 0000000000..cb2ab9cd2b
--- /dev/null
+++ b/test/output/waffleStrokePositive.svg
@@ -0,0 +1,165 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
+    <path transform="translate(40,370)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,335.6862745098039)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,301.37254901960785)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,267.0588235294117)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,232.74509803921566)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,198.4313725490196)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,164.11764705882354)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,129.80392156862746)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,95.49019607843134)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,61.17647058823526)" d="M0,0L-6,0"></path>
+    <path transform="translate(40,26.86274509803919)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
+    <text y="0.32em" transform="translate(40,370)">0</text>
+    <text y="0.32em" transform="translate(40,335.6862745098039)">1</text>
+    <text y="0.32em" transform="translate(40,301.37254901960785)">2</text>
+    <text y="0.32em" transform="translate(40,267.0588235294117)">3</text>
+    <text y="0.32em" transform="translate(40,232.74509803921566)">4</text>
+    <text y="0.32em" transform="translate(40,198.4313725490196)">5</text>
+    <text y="0.32em" transform="translate(40,164.11764705882354)">6</text>
+    <text y="0.32em" transform="translate(40,129.80392156862746)">7</text>
+    <text y="0.32em" transform="translate(40,95.49019607843134)">8</text>
+    <text y="0.32em" transform="translate(40,61.17647058823526)">9</text>
+    <text y="0.32em" transform="translate(40,26.86274509803919)">10</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(43.5,0)">
+    <path transform="translate(50,370)" d="M0,0L0,6"></path>
+    <path transform="translate(145,370)" d="M0,0L0,6"></path>
+    <path transform="translate(240,370)" d="M0,0L0,6"></path>
+    <path transform="translate(335,370)" d="M0,0L0,6"></path>
+    <path transform="translate(430,370)" d="M0,0L0,6"></path>
+    <path transform="translate(525,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(43.5,9.5)">
+    <text y="0.71em" transform="translate(50,370)">A</text>
+    <text y="0.71em" transform="translate(145,370)">B</text>
+    <text y="0.71em" transform="translate(240,370)">C</text>
+    <text y="0.71em" transform="translate(335,370)">D</text>
+    <text y="0.71em" transform="translate(430,370)">E</text>
+    <text y="0.71em" transform="translate(525,370)">F</text>
+  </g>
+  <g aria-label="waffle" fill-opacity="0.4">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-6">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-20.58823529411765L61.76470588235294,-20.58823529411765L61.76470588235294,-30.88235294117647L41.1764705882353,-30.88235294117647L41.1764705882353,-41.1764705882353L0,-41.1764705882353Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(157.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-82.3529411764706L0,-82.3529411764706Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(252.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-102.94117647058825L41.1764705882353,-102.94117647058825L41.1764705882353,-113.23529411764699L20.58823529411765,-113.23529411764699L20.58823529411765,-123.52941176470588L0,-123.52941176470588Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(347.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-164.7058823529412L0,-164.7058823529412Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(442.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-185.29411764705884L20.58823529411765,-185.29411764705884L20.58823529411765,-195.58823529411765L0,-195.58823529411765Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(537.1176470588235,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-205.8823529411765L61.76470588235294,-205.8823529411765L61.76470588235294,-226.47058823529397L41.1764705882353,-226.47058823529397L41.1764705882353,-226.47058823529414L0,-226.47058823529414Z" fill="url(#plot-pattern-6)"></path>
+  </g>
+  <g aria-label="waffle" stroke="red">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-7">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-8">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-9">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-10">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-11">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-12">
+      <rect x="0.5" y="0.5" width="19.58823529411765" height="19.58823529411765"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,370)" d="M0,-41.1764705882353L41.1764705882353,-41.1764705882353L41.1764705882353,-30.88235294117647L61.76470588235294,-30.88235294117647L61.76470588235294,-61.76470588235294L61.76470588235294,-61.76470588235294L61.76470588235294,-72.05882352941174L41.1764705882353,-72.05882352941174L41.1764705882353,-82.3529411764706L0,-82.3529411764706Z" fill="url(#plot-pattern-7)" stroke="url(#plot-pattern-7)"></path>
+    <path transform="translate(157.11764705882354,370)" d="M0,-82.3529411764706L41.1764705882353,-82.3529411764706L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L61.76470588235294,-61.76470588235294L61.76470588235294,-144.11764705882354L41.1764705882353,-144.11764705882354L41.1764705882353,-154.41176470588238L20.58823529411765,-154.41176470588238L20.58823529411765,-164.7058823529412L0,-164.7058823529412Z" fill="url(#plot-pattern-8)" stroke="url(#plot-pattern-8)"></path>
+    <path transform="translate(252.11764705882354,370)" d="M0,-123.52941176470588L20.58823529411765,-123.52941176470588L20.58823529411765,-113.23529411764699L41.1764705882353,-113.23529411764699L41.1764705882353,-102.94117647058825L61.76470588235294,-102.94117647058825L61.76470588235294,-226.47058823529414L20.58823529411765,-226.47058823529414L20.58823529411765,-236.76470588235296L0,-236.76470588235296Z" fill="url(#plot-pattern-9)" stroke="url(#plot-pattern-9)"></path>
+    <path transform="translate(347.11764705882354,370)" d="M0,-164.7058823529412L20.58823529411765,-164.7058823529412L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L61.76470588235294,-144.11764705882354L61.76470588235294,-267.64705882352945L0,-267.64705882352945L0,-267.64705882352945L0,-267.64705882352945Z" fill="url(#plot-pattern-10)" stroke="url(#plot-pattern-10)"></path>
+    <path transform="translate(442.11764705882354,370)" d="M0,-205.8823529411765L0,-205.8823529411765L0,-195.58823529411765L20.58823529411765,-195.58823529411765L20.58823529411765,-185.29411764705884L61.76470588235294,-185.29411764705884L61.76470588235294,-308.82352941176475L20.58823529411765,-308.82352941176475L20.58823529411765,-319.1176470588234L0,-319.1176470588234Z" fill="url(#plot-pattern-11)" stroke="url(#plot-pattern-11)"></path>
+    <path transform="translate(537.1176470588235,370)" d="M0,-226.47058823529414L41.1764705882353,-226.47058823529414L41.1764705882353,-226.47058823529397L61.76470588235294,-226.47058823529397L61.76470588235294,-329.4117647058824L61.76470588235294,-329.4117647058824L61.76470588235294,-349.9999999999999L41.1764705882353,-349.9999999999999L41.1764705882353,-350L0,-350Z" fill="url(#plot-pattern-12)" stroke="url(#plot-pattern-12)"></path>
+  </g>
+  <g aria-label="waffle" fill-opacity="0.4">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-13">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-14">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-15">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-16">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-17">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-18">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-20.58823529411765L61.76470588235294,-20.58823529411765L61.76470588235294,-30.88235294117647L41.1764705882353,-30.88235294117647L41.1764705882353,-41.1764705882353L0,-41.1764705882353Z" fill="url(#plot-pattern-13)"></path>
+    <path transform="translate(157.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-82.3529411764706L0,-82.3529411764706Z" fill="url(#plot-pattern-14)"></path>
+    <path transform="translate(252.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-102.94117647058825L41.1764705882353,-102.94117647058825L41.1764705882353,-113.23529411764699L20.58823529411765,-113.23529411764699L20.58823529411765,-123.52941176470588L0,-123.52941176470588Z" fill="url(#plot-pattern-15)"></path>
+    <path transform="translate(347.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-164.7058823529412L0,-164.7058823529412Z" fill="url(#plot-pattern-16)"></path>
+    <path transform="translate(442.11764705882354,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-185.29411764705884L20.58823529411765,-185.29411764705884L20.58823529411765,-195.58823529411765L0,-195.58823529411765Z" fill="url(#plot-pattern-17)"></path>
+    <path transform="translate(537.1176470588235,370)" d="M0,0L0,0L0,0L0,0L0,0L61.76470588235294,0L61.76470588235294,-205.8823529411765L61.76470588235294,-205.8823529411765L61.76470588235294,-226.47058823529397L41.1764705882353,-226.47058823529397L41.1764705882353,-226.47058823529414L0,-226.47058823529414Z" fill="url(#plot-pattern-18)"></path>
+  </g>
+  <g aria-label="waffle" fill="red">
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-19">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-20">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-21">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-22">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-23">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <pattern width="20.58823529411765" height="20.58823529411765" patternUnits="userSpaceOnUse" id="plot-pattern-24">
+      <rect x="5" y="5" width="10.588235294117649" height="10.588235294117649"></rect>
+    </pattern>
+    <path transform="translate(62.11764705882353,370)" d="M0,-41.1764705882353L41.1764705882353,-41.1764705882353L41.1764705882353,-30.88235294117647L61.76470588235294,-30.88235294117647L61.76470588235294,-61.76470588235294L61.76470588235294,-61.76470588235294L61.76470588235294,-72.05882352941174L41.1764705882353,-72.05882352941174L41.1764705882353,-82.3529411764706L0,-82.3529411764706Z" fill="url(#plot-pattern-19)"></path>
+    <path transform="translate(157.11764705882354,370)" d="M0,-82.3529411764706L41.1764705882353,-82.3529411764706L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L41.1764705882353,-61.76470588235294L61.76470588235294,-61.76470588235294L61.76470588235294,-144.11764705882354L41.1764705882353,-144.11764705882354L41.1764705882353,-154.41176470588238L20.58823529411765,-154.41176470588238L20.58823529411765,-164.7058823529412L0,-164.7058823529412Z" fill="url(#plot-pattern-20)"></path>
+    <path transform="translate(252.11764705882354,370)" d="M0,-123.52941176470588L20.58823529411765,-123.52941176470588L20.58823529411765,-113.23529411764699L41.1764705882353,-113.23529411764699L41.1764705882353,-102.94117647058825L61.76470588235294,-102.94117647058825L61.76470588235294,-226.47058823529414L20.58823529411765,-226.47058823529414L20.58823529411765,-236.76470588235296L0,-236.76470588235296Z" fill="url(#plot-pattern-21)"></path>
+    <path transform="translate(347.11764705882354,370)" d="M0,-164.7058823529412L20.58823529411765,-164.7058823529412L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L20.58823529411765,-144.11764705882354L61.76470588235294,-144.11764705882354L61.76470588235294,-267.64705882352945L0,-267.64705882352945L0,-267.64705882352945L0,-267.64705882352945Z" fill="url(#plot-pattern-22)"></path>
+    <path transform="translate(442.11764705882354,370)" d="M0,-205.8823529411765L0,-205.8823529411765L0,-195.58823529411765L20.58823529411765,-195.58823529411765L20.58823529411765,-185.29411764705884L61.76470588235294,-185.29411764705884L61.76470588235294,-308.82352941176475L20.58823529411765,-308.82352941176475L20.58823529411765,-319.1176470588234L0,-319.1176470588234Z" fill="url(#plot-pattern-23)"></path>
+    <path transform="translate(537.1176470588235,370)" d="M0,-226.47058823529414L41.1764705882353,-226.47058823529414L41.1764705882353,-226.47058823529397L61.76470588235294,-226.47058823529397L61.76470588235294,-329.4117647058824L61.76470588235294,-329.4117647058824L61.76470588235294,-349.9999999999999L41.1764705882353,-349.9999999999999L41.1764705882353,-350L0,-350Z" fill="url(#plot-pattern-24)"></path>
+  </g>
+  <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
+    <line x1="40" x2="620" y1="370" y2="370"></line>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index a3a4da862a..a605eb0ac4 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -61,11 +61,11 @@
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path transform="translate(80,35.426373845438235)" d="M296.03295900059805,10.76483487274902L296.03295900059805,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L290.65054156422354,16.14725230912353L290.65054156422354,16.14725230912353L294.2567612465944,16.14725230912353L294.2567612465944,10.76483487274902Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(80,56.426373845438235)" d="M543.6241610738255,0L543.6241610738255,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L538.241743637451,16.14725230912353L538.241743637451,5.38241743637451L543.5165127250981,5.38241743637451L543.5165127250981,0Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(80,77.42637384543823)" d="M366.0043856734667,10.76483487274902L366.0043856734667,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L360.6219682370922,16.14725230912353L360.6219682370922,16.14725230912353L363.52847365273436,16.14725230912353L363.52847365273436,10.76483487274902Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(80,98.42637384543823)" d="M226.06153232772942,5.38241743637451L226.06153232772942,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(80,119.42637384543823)" d="M226.06153232772942,5.38241743637451L226.06153232772942,0L0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(80,35.426373845438235)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L290.65054156422354,16.14725230912353L290.65054156422354,16.14725230912353L294.2567612465944,16.14725230912353L294.2567612465944,10.76483487274902L296.03295900059805,10.76483487274902L296.03295900059805,0Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(80,56.426373845438235)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L538.241743637451,16.14725230912353L538.241743637451,5.38241743637451L543.5165127250981,5.38241743637451L543.5165127250981,0Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(80,77.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L360.6219682370922,16.14725230912353L360.6219682370922,16.14725230912353L363.52847365273436,16.14725230912353L363.52847365273436,10.76483487274902L366.0043856734667,10.76483487274902L366.0043856734667,0Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(80,98.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451L226.06153232772942,5.38241743637451L226.06153232772942,0Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(80,119.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451L226.06153232772942,5.38241743637451L226.06153232772942,0Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="80" x2="80" y1="30" y2="140"></line>
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
index fc6c00f13a..cd308262ba 100644
--- a/test/output/waffleXStacked.svg
+++ b/test/output/waffleXStacked.svg
@@ -53,11 +53,11 @@
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="10.107360259607322" height="10.107360259607322" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path transform="translate(20,10.587437793337756)" d="M111.07360259607321,122.18096285568055L111.07360259607321,0L0,0L0,0L0,0L0,0L0,0L0,188.8251244133245L99.9662423364659,188.8251244133245L99.9662423364659,133.28832311528788L107.40817371040266,133.28832311528788L107.40817371040266,122.18096285568055Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(20,10.587437793337756)" d="M311.00608726900504,66.64416155764394L311.00608726900504,0L111.07360259607321,0L111.07360259607321,122.18096285568055L107.40817371040266,122.18096285568055L107.40817371040266,133.28832311528788L99.9662423364659,133.28832311528788L99.9662423364659,188.8251244133245L299.8987270093977,188.8251244133245L299.8987270093977,77.75152181725126L307.1185111781422,77.75152181725126L307.1185111781422,66.64416155764394Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(20,10.587437793337756)" d="M444.29441038429286,66.64416155764394L444.29441038429286,0L311.00608726900504,0L311.00608726900504,66.64416155764394L307.1185111781422,66.64416155764394L307.1185111781422,77.75152181725126L299.8987270093977,77.75152181725126L299.8987270093977,188.8251244133245L433.1870501246856,188.8251244133245L433.1870501246856,77.75152181725126L435.2974485740103,77.75152181725126L435.2974485740103,66.64416155764394Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(20,10.587437793337756)" d="M522.0459322015441,122.18096285568055L522.0459322015441,0L444.29441038429286,0L444.29441038429286,66.64416155764394L435.2974485740103,66.64416155764394L435.2974485740103,77.75152181725126L433.1870501246856,77.75152181725126L433.1870501246856,188.8251244133245L510.9385719419368,188.8251244133245L510.9385719419368,133.28832311528788L519.2690921366423,133.28832311528788L519.2690921366423,122.18096285568055Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(20,10.587437793337756)" d="M610.9048142784027,0L610.9048142784027,0L522.0459322015441,0L522.0459322015441,122.18096285568055L519.2690921366423,122.18096285568055L519.2690921366423,133.28832311528788L510.9385719419368,133.28832311528788L510.9385719419368,188.8251244133245L599.7974540187954,188.8251244133245L599.7974540187954,11.107360259607322L603.240735699273,11.107360259607322L603.240735699273,0Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M0,0L0,0L0,0L0,0L0,0L0,188.8251244133245L99.9662423364659,188.8251244133245L99.9662423364659,133.28832311528788L107.40817371040266,133.28832311528788L107.40817371040266,122.18096285568055L111.07360259607321,122.18096285568055L111.07360259607321,0Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M111.07360259607321,0L111.07360259607321,122.18096285568055L107.40817371040266,122.18096285568055L107.40817371040266,133.28832311528788L99.9662423364659,133.28832311528788L99.9662423364659,188.8251244133245L299.8987270093977,188.8251244133245L299.8987270093977,77.75152181725126L307.1185111781422,77.75152181725126L307.1185111781422,66.64416155764394L311.00608726900504,66.64416155764394L311.00608726900504,0Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M311.00608726900504,0L311.00608726900504,66.64416155764394L307.1185111781422,66.64416155764394L307.1185111781422,77.75152181725126L299.8987270093977,77.75152181725126L299.8987270093977,188.8251244133245L433.1870501246856,188.8251244133245L433.1870501246856,77.75152181725126L435.2974485740103,77.75152181725126L435.2974485740103,66.64416155764394L444.29441038429286,66.64416155764394L444.29441038429286,0Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M444.29441038429286,0L444.29441038429286,66.64416155764394L435.2974485740103,66.64416155764394L435.2974485740103,77.75152181725126L433.1870501246856,77.75152181725126L433.1870501246856,188.8251244133245L510.9385719419368,188.8251244133245L510.9385719419368,133.28832311528788L519.2690921366423,133.28832311528788L519.2690921366423,122.18096285568055L522.0459322015441,122.18096285568055L522.0459322015441,0Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M522.0459322015441,0L522.0459322015441,122.18096285568055L519.2690921366423,122.18096285568055L519.2690921366423,133.28832311528788L510.9385719419368,133.28832311528788L510.9385719419368,188.8251244133245L599.7974540187954,188.8251244133245L599.7974540187954,11.107360259607322L603.240735699273,11.107360259607322L603.240735699273,0Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
     <line x1="20" x2="20" y1="0" y2="210"></line>
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index 3210850112..2a971f484a 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -79,11 +79,11 @@
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="9.465811681839325" height="9.465811681839325" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path transform="translate(56.90384743172304,370)" d="M20.93162336367865,-198.85042195494717L0,-198.85042195494717L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-188.38461027310785L31.397435045517973,-188.38461027310785L31.397435045517973,-195.39670409994005L20.93162336367865,-195.39670409994005Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(169.90384743172302,370)" d="M31.397435045517973,-355.837597182537L0,-355.837597182537L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-345.37178550069774L41.8632467273573,-345.37178550069774L41.8632467273573,-355.62828094890045L31.397435045517973,-355.62828094890045Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(282.903847431723,370)" d="M52.32905840919663,-240.71366868230447L0,-240.71366868230447L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-230.24785700046516L62.794870091035946,-230.24785700046516L62.794870091035946,-235.8993953086583L52.32905840919663,-235.8993953086583Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(395.903847431723,370)" d="M73.26068177287527,-146.52136354575055L0,-146.52136354575055L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-136.05555186391123L83.7264934547146,-136.05555186391123L83.7264934547146,-141.91640640574127L73.26068177287527,-141.91640640574127Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(508.903847431723,370)" d="M73.26068177287527,-146.52136354575055L0,-146.52136354575055L0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-136.05555186391123L83.7264934547146,-136.05555186391123L83.7264934547146,-141.91640640574127L73.26068177287527,-141.91640640574127Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(56.90384743172304,370)" d="M0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-188.38461027310785L31.397435045517973,-188.38461027310785L31.397435045517973,-195.39670409994005L20.93162336367865,-195.39670409994005L20.93162336367865,-198.85042195494717L0,-198.85042195494717Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(169.90384743172302,370)" d="M0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-345.37178550069774L41.8632467273573,-345.37178550069774L41.8632467273573,-355.62828094890045L31.397435045517973,-355.62828094890045L31.397435045517973,-355.837597182537L0,-355.837597182537Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(282.903847431723,370)" d="M0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-230.24785700046516L62.794870091035946,-230.24785700046516L62.794870091035946,-235.8993953086583L52.32905840919663,-235.8993953086583L52.32905840919663,-240.71366868230447L0,-240.71366868230447Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(395.903847431723,370)" d="M0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-136.05555186391123L83.7264934547146,-136.05555186391123L83.7264934547146,-141.91640640574127L73.26068177287527,-141.91640640574127L73.26068177287527,-146.52136354575055L0,-146.52136354575055Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(508.903847431723,370)" d="M0,0L0,0L0,0L0,0L0,0L94.19230513655393,0L94.19230513655393,-136.05555186391123L83.7264934547146,-136.05555186391123L83.7264934547146,-141.91640640574127L73.26068177287527,-141.91640640574127L73.26068177287527,-146.52136354575055L0,-146.52136354575055Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYGrouped.svg b/test/output/waffleYGrouped.svg
index 284be9edcf..0e9b4ec8f7 100644
--- a/test/output/waffleYGrouped.svg
+++ b/test/output/waffleYGrouped.svg
@@ -189,34 +189,34 @@
     <pattern width="4.443504020313162" height="4.443504020313162" patternUnits="userSpaceOnUse" id="plot-pattern-28">
       <rect x="0.5" y="0.5" width="3.4435040203131617" height="3.4435040203131617"></rect>
     </pattern>
-    <path transform="translate(93.33474396953025,370)" d="M8.887008040626323,-351.0368176047398L0,-351.0368176047398L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-346.5933135844266L13.330512060939485,-346.5933135844266L13.330512060939485,-347.9263647905206L8.887008040626323,-347.9263647905206Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(233.33474396953025,370)" d="M0,-39.99153618281846L0,-39.99153618281846L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-35.548032162505294L4.443504020313162,-35.548032162505294L4.443504020313162,-38.2141345746932L0,-38.2141345746932Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(493.3347439695303,370)" d="M0,-22.21752010156581L0,-22.21752010156581L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L4.443504020313162,-17.774016081252647L4.443504020313162,-21.32881929750318L0,-21.32881929750318Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(193.33474396953025,370)" d="M4.443504020313162,-79.98307236563691L0,-79.98307236563691L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-75.53956834532374L8.887008040626323,-75.53956834532374L8.887008040626323,-77.76132035548034L4.443504020313162,-77.76132035548034Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(533.3347439695302,370)" d="M8.887008040626323,-17.774016081252647L0,-17.774016081252647L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-13.330512060939485Z" fill="url(#plot-pattern-5)"></path>
-    <path transform="translate(553.3347439695302,370)" d="M8.887008040626323,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L13.330512060939485,-53.32204824375794L13.330512060939485,-55.0994498518832L8.887008040626323,-55.0994498518832Z" fill="url(#plot-pattern-6)"></path>
-    <path transform="translate(53.33474396953026,370)" d="M0,-217.73169699534492L0,-217.73169699534492L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-213.28819297503176L4.443504020313162,-213.28819297503176L4.443504020313162,-215.50994498518835L0,-215.50994498518835Z" fill="url(#plot-pattern-7)"></path>
-    <path transform="translate(413.3347439695303,370)" d="M0,-44.43504020313162L0,-44.43504020313162L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-44.43504020313162L0,-44.43504020313162L0,-44.43504020313162L0,-44.43504020313162Z" fill="url(#plot-pattern-8)"></path>
-    <path transform="translate(593.3347439695302,370)" d="M8.887008040626323,-53.32204824375794L0,-53.32204824375794L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-48.87854422344478L13.330512060939485,-48.87854422344478L13.330512060939485,-50.21159542953871L8.887008040626323,-50.21159542953871Z" fill="url(#plot-pattern-9)"></path>
-    <path transform="translate(253.33474396953025,370)" d="M4.443504020313162,-93.3135844265764L0,-93.3135844265764L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-88.87008040626324L8.887008040626323,-88.87008040626324L8.887008040626323,-89.31443080829456L4.443504020313162,-89.31443080829456Z" fill="url(#plot-pattern-10)"></path>
-    <path transform="translate(453.3347439695303,370)" d="M0,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-57.765552264071104L0,-57.765552264071104L0,-57.765552264071104L0,-57.765552264071104Z" fill="url(#plot-pattern-11)"></path>
-    <path transform="translate(153.33474396953025,370)" d="M4.443504020313162,-44.43504020313162L0,-44.43504020313162L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-39.99153618281846L8.887008040626323,-39.99153618281846L8.887008040626323,-42.65763859500636L4.443504020313162,-42.65763859500636Z" fill="url(#plot-pattern-12)"></path>
-    <path transform="translate(213.33474396953025,370)" d="M4.443504020313162,-35.548032162505294L0,-35.548032162505294L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-31.10452814219213L8.887008040626323,-31.10452814219213L8.887008040626323,-31.99322894625476L4.443504020313162,-31.99322894625476Z" fill="url(#plot-pattern-13)"></path>
-    <path transform="translate(393.3347439695303,370)" d="M0,-84.42657638595007L0,-84.42657638595007L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-79.98307236563691L4.443504020313162,-79.98307236563691L4.443504020313162,-83.09352517985614L0,-83.09352517985614Z" fill="url(#plot-pattern-14)"></path>
-    <path transform="translate(353.3347439695303,370)" d="M0,-62.20905628438426L0,-62.20905628438426L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-57.765552264071104L4.443504020313162,-57.765552264071104L4.443504020313162,-58.65425306813375L0,-58.65425306813375Z" fill="url(#plot-pattern-15)"></path>
-    <path transform="translate(313.3347439695303,370)" d="M0,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L4.443504020313162,-53.32204824375794L4.443504020313162,-54.655099449851875L0,-54.655099449851875Z" fill="url(#plot-pattern-16)"></path>
-    <path transform="translate(113.33474396953025,370)" d="M8.887008040626323,-26.66102412187897L0,-26.66102412187897L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-22.21752010156581L13.330512060939485,-22.21752010156581L13.330512060939485,-23.106220905628437L8.887008040626323,-23.106220905628437Z" fill="url(#plot-pattern-17)"></path>
-    <path transform="translate(333.3347439695303,370)" d="M4.443504020313162,-66.65256030469743L0,-66.65256030469743L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-62.20905628438426L8.887008040626323,-62.20905628438426L8.887008040626323,-63.09775708844691L4.443504020313162,-63.09775708844691Z" fill="url(#plot-pattern-18)"></path>
-    <path transform="translate(373.3347439695303,370)" d="M4.443504020313162,-13.330512060939485L0,-13.330512060939485L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-8.887008040626323L8.887008040626323,-8.887008040626323L8.887008040626323,-9.775708844688957L4.443504020313162,-9.775708844688957Z" fill="url(#plot-pattern-19)"></path>
-    <path transform="translate(473.3347439695303,370)" d="M8.887008040626323,-26.66102412187897L0,-26.66102412187897L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-22.21752010156581L13.330512060939485,-22.21752010156581L13.330512060939485,-23.106220905628437L8.887008040626323,-23.106220905628437Z" fill="url(#plot-pattern-20)"></path>
-    <path transform="translate(173.33474396953025,370)" d="M0,-53.32204824375794L0,-53.32204824375794L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-48.87854422344478L4.443504020313162,-48.87854422344478L4.443504020313162,-49.3228946254761L0,-49.3228946254761Z" fill="url(#plot-pattern-21)"></path>
-    <path transform="translate(133.33474396953025,370)" d="M4.443504020313162,-44.43504020313162L0,-44.43504020313162L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-39.99153618281846L8.887008040626323,-39.99153618281846L8.887008040626323,-43.54633939906899L4.443504020313162,-43.54633939906899Z" fill="url(#plot-pattern-22)"></path>
-    <path transform="translate(273.3347439695303,370)" d="M0,-17.774016081252647L0,-17.774016081252647L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L0,-17.774016081252647L0,-17.774016081252647L0,-17.774016081252647Z" fill="url(#plot-pattern-23)"></path>
-    <path transform="translate(73.33474396953025,370)" d="M0,-22.21752010156581L0,-22.21752010156581L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L4.443504020313162,-17.774016081252647L4.443504020313162,-21.32881929750318L0,-21.32881929750318Z" fill="url(#plot-pattern-24)"></path>
-    <path transform="translate(573.3347439695302,370)" d="M4.443504020313162,-39.99153618281846L0,-39.99153618281846L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-35.548032162505294L8.887008040626323,-35.548032162505294L8.887008040626323,-39.10283537875583L4.443504020313162,-39.10283537875583Z" fill="url(#plot-pattern-25)"></path>
-    <path transform="translate(433.3347439695303,370)" d="M8.887008040626323,-57.765552264071104L0,-57.765552264071104L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-53.32204824375794Z" fill="url(#plot-pattern-26)"></path>
-    <path transform="translate(513.3347439695302,370)" d="M4.443504020313162,-31.10452814219213L0,-31.10452814219213L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-26.66102412187897L8.887008040626323,-26.66102412187897L8.887008040626323,-29.327126534066874L4.443504020313162,-29.327126534066874Z" fill="url(#plot-pattern-27)"></path>
-    <path transform="translate(293.3347439695303,370)" d="M8.887008040626323,-48.87854422344478L0,-48.87854422344478L0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-44.43504020313162L13.330512060939485,-44.43504020313162L13.330512060939485,-46.21244181125687L8.887008040626323,-46.21244181125687Z" fill="url(#plot-pattern-28)"></path>
+    <path transform="translate(93.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-346.5933135844266L13.330512060939485,-346.5933135844266L13.330512060939485,-347.9263647905206L8.887008040626323,-347.9263647905206L8.887008040626323,-351.0368176047398L0,-351.0368176047398Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(233.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-35.548032162505294L4.443504020313162,-35.548032162505294L4.443504020313162,-38.2141345746932L0,-38.2141345746932Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(493.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L4.443504020313162,-17.774016081252647L4.443504020313162,-21.32881929750318L0,-21.32881929750318Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(193.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-75.53956834532374L8.887008040626323,-75.53956834532374L8.887008040626323,-77.76132035548034L4.443504020313162,-77.76132035548034L4.443504020313162,-79.98307236563691L0,-79.98307236563691Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(533.3347439695302,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-13.330512060939485L8.887008040626323,-17.774016081252647L0,-17.774016081252647Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(553.3347439695302,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L13.330512060939485,-53.32204824375794L13.330512060939485,-55.0994498518832L8.887008040626323,-55.0994498518832L8.887008040626323,-57.765552264071104L0,-57.765552264071104Z" fill="url(#plot-pattern-6)"></path>
+    <path transform="translate(53.33474396953026,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-213.28819297503176L4.443504020313162,-213.28819297503176L4.443504020313162,-215.50994498518835L0,-215.50994498518835Z" fill="url(#plot-pattern-7)"></path>
+    <path transform="translate(413.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-44.43504020313162L0,-44.43504020313162L0,-44.43504020313162L0,-44.43504020313162Z" fill="url(#plot-pattern-8)"></path>
+    <path transform="translate(593.3347439695302,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-48.87854422344478L13.330512060939485,-48.87854422344478L13.330512060939485,-50.21159542953871L8.887008040626323,-50.21159542953871L8.887008040626323,-53.32204824375794L0,-53.32204824375794Z" fill="url(#plot-pattern-9)"></path>
+    <path transform="translate(253.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-88.87008040626324L8.887008040626323,-88.87008040626324L8.887008040626323,-89.31443080829456L4.443504020313162,-89.31443080829456L4.443504020313162,-93.3135844265764L0,-93.3135844265764Z" fill="url(#plot-pattern-10)"></path>
+    <path transform="translate(453.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-57.765552264071104L0,-57.765552264071104L0,-57.765552264071104L0,-57.765552264071104Z" fill="url(#plot-pattern-11)"></path>
+    <path transform="translate(153.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-39.99153618281846L8.887008040626323,-39.99153618281846L8.887008040626323,-42.65763859500636L4.443504020313162,-42.65763859500636L4.443504020313162,-44.43504020313162L0,-44.43504020313162Z" fill="url(#plot-pattern-12)"></path>
+    <path transform="translate(213.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-31.10452814219213L8.887008040626323,-31.10452814219213L8.887008040626323,-31.99322894625476L4.443504020313162,-31.99322894625476L4.443504020313162,-35.548032162505294L0,-35.548032162505294Z" fill="url(#plot-pattern-13)"></path>
+    <path transform="translate(393.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-79.98307236563691L4.443504020313162,-79.98307236563691L4.443504020313162,-83.09352517985614L0,-83.09352517985614Z" fill="url(#plot-pattern-14)"></path>
+    <path transform="translate(353.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-57.765552264071104L4.443504020313162,-57.765552264071104L4.443504020313162,-58.65425306813375L0,-58.65425306813375Z" fill="url(#plot-pattern-15)"></path>
+    <path transform="translate(313.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L4.443504020313162,-53.32204824375794L4.443504020313162,-54.655099449851875L0,-54.655099449851875Z" fill="url(#plot-pattern-16)"></path>
+    <path transform="translate(113.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-22.21752010156581L13.330512060939485,-22.21752010156581L13.330512060939485,-23.106220905628437L8.887008040626323,-23.106220905628437L8.887008040626323,-26.66102412187897L0,-26.66102412187897Z" fill="url(#plot-pattern-17)"></path>
+    <path transform="translate(333.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-62.20905628438426L8.887008040626323,-62.20905628438426L8.887008040626323,-63.09775708844691L4.443504020313162,-63.09775708844691L4.443504020313162,-66.65256030469743L0,-66.65256030469743Z" fill="url(#plot-pattern-18)"></path>
+    <path transform="translate(373.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-8.887008040626323L8.887008040626323,-8.887008040626323L8.887008040626323,-9.775708844688957L4.443504020313162,-9.775708844688957L4.443504020313162,-13.330512060939485L0,-13.330512060939485Z" fill="url(#plot-pattern-19)"></path>
+    <path transform="translate(473.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-22.21752010156581L13.330512060939485,-22.21752010156581L13.330512060939485,-23.106220905628437L8.887008040626323,-23.106220905628437L8.887008040626323,-26.66102412187897L0,-26.66102412187897Z" fill="url(#plot-pattern-20)"></path>
+    <path transform="translate(173.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-48.87854422344478L4.443504020313162,-48.87854422344478L4.443504020313162,-49.3228946254761L0,-49.3228946254761Z" fill="url(#plot-pattern-21)"></path>
+    <path transform="translate(133.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-39.99153618281846L8.887008040626323,-39.99153618281846L8.887008040626323,-43.54633939906899L4.443504020313162,-43.54633939906899L4.443504020313162,-44.43504020313162L0,-44.43504020313162Z" fill="url(#plot-pattern-22)"></path>
+    <path transform="translate(273.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L0,-17.774016081252647L0,-17.774016081252647L0,-17.774016081252647Z" fill="url(#plot-pattern-23)"></path>
+    <path transform="translate(73.33474396953025,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-17.774016081252647L4.443504020313162,-17.774016081252647L4.443504020313162,-21.32881929750318L0,-21.32881929750318Z" fill="url(#plot-pattern-24)"></path>
+    <path transform="translate(573.3347439695302,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-35.548032162505294L8.887008040626323,-35.548032162505294L8.887008040626323,-39.10283537875583L4.443504020313162,-39.10283537875583L4.443504020313162,-39.99153618281846L0,-39.99153618281846Z" fill="url(#plot-pattern-25)"></path>
+    <path transform="translate(433.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-53.32204824375794L8.887008040626323,-57.765552264071104L0,-57.765552264071104Z" fill="url(#plot-pattern-26)"></path>
+    <path transform="translate(513.3347439695302,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-26.66102412187897L8.887008040626323,-26.66102412187897L8.887008040626323,-29.327126534066874L4.443504020313162,-29.327126534066874L4.443504020313162,-31.10452814219213L0,-31.10452814219213Z" fill="url(#plot-pattern-27)"></path>
+    <path transform="translate(293.3347439695303,370)" d="M0,0L0,0L0,0L0,0L0,0L13.330512060939485,0L13.330512060939485,-44.43504020313162L13.330512060939485,-44.43504020313162L13.330512060939485,-46.21244181125687L8.887008040626323,-46.21244181125687L8.887008040626323,-48.87854422344478L0,-48.87854422344478Z" fill="url(#plot-pattern-28)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="40" x2="620" y1="370" y2="370"></line>
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 45fe91b958..71656356ca 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -90,11 +90,11 @@
       <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-5">
         <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path transform="translate(41.36538314948109,380)" d="M122.31163768226418,-76.44477355141511L0,-76.44477355141511L0,0L0,0L0,0L0,0L0,0L596.2692337010378,0L596.2692337010378,-61.15581884113209L137.60059239254718,-61.15581884113209L137.60059239254718,-71.39941849702153L122.31163768226418,-71.39941849702153Z" fill="url(#plot-pattern-1)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M550.4023695701887,-183.46745652339627L0,-183.46745652339627L0,-76.44477355141511L122.31163768226418,-76.44477355141511L122.31163768226418,-71.39941849702153L137.60059239254718,-71.39941849702153L137.60059239254718,-61.15581884113209L596.2692337010378,-61.15581884113209L596.2692337010378,-168.17850181311326L565.6913242804718,-168.17850181311326L565.6913242804718,-178.11632237479685L550.4023695701887,-178.11632237479685Z" fill="url(#plot-pattern-2)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M91.73372826169813,-275.20118478509437L0,-275.20118478509437L0,-183.46745652339627L550.4023695701887,-183.46745652339627L550.4023695701887,-178.11632237479685L565.6913242804718,-178.11632237479685L565.6913242804718,-168.17850181311326L596.2692337010378,-168.17850181311326L596.2692337010378,-259.91223007481136L107.02268297198115,-259.91223007481136L107.02268297198115,-262.81713146976426L91.73372826169813,-262.81713146976426Z" fill="url(#plot-pattern-3)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M198.75641123367927,-321.06804891594345L0,-321.06804891594345L0,-275.20118478509437L91.73372826169813,-275.20118478509437L91.73372826169813,-262.81713146976426L107.02268297198115,-262.81713146976426L107.02268297198115,-259.91223007481136L596.2692337010378,-259.91223007481136L596.2692337010378,-305.77909420566044L214.0453659439623,-305.77909420566044L214.0453659439623,-317.2458102383727L198.75641123367927,-317.2458102383727Z" fill="url(#plot-pattern-4)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M321.06804891594345,-366.93491304679253L0,-366.93491304679253L0,-321.06804891594345L198.75641123367927,-321.06804891594345L198.75641123367927,-317.2458102383727L214.0453659439623,-317.2458102383727L214.0453659439623,-305.77909420566044L596.2692337010378,-305.77909420566044L596.2692337010378,-351.6459583365095L336.3570036262265,-351.6459583365095L336.3570036262265,-356.3855342966964L321.06804891594345,-356.3855342966964Z" fill="url(#plot-pattern-5)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M0,0L0,0L0,0L0,0L0,0L596.2692337010378,0L596.2692337010378,-61.15581884113209L137.60059239254718,-61.15581884113209L137.60059239254718,-71.39941849702153L122.31163768226418,-71.39941849702153L122.31163768226418,-76.44477355141511L0,-76.44477355141511Z" fill="url(#plot-pattern-1)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M0,-76.44477355141511L122.31163768226418,-76.44477355141511L122.31163768226418,-71.39941849702153L137.60059239254718,-71.39941849702153L137.60059239254718,-61.15581884113209L596.2692337010378,-61.15581884113209L596.2692337010378,-168.17850181311326L565.6913242804718,-168.17850181311326L565.6913242804718,-178.11632237479685L550.4023695701887,-178.11632237479685L550.4023695701887,-183.46745652339627L0,-183.46745652339627Z" fill="url(#plot-pattern-2)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M0,-183.46745652339627L550.4023695701887,-183.46745652339627L550.4023695701887,-178.11632237479685L565.6913242804718,-178.11632237479685L565.6913242804718,-168.17850181311326L596.2692337010378,-168.17850181311326L596.2692337010378,-259.91223007481136L107.02268297198115,-259.91223007481136L107.02268297198115,-262.81713146976426L91.73372826169813,-262.81713146976426L91.73372826169813,-275.20118478509437L0,-275.20118478509437Z" fill="url(#plot-pattern-3)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M0,-275.20118478509437L91.73372826169813,-275.20118478509437L91.73372826169813,-262.81713146976426L107.02268297198115,-262.81713146976426L107.02268297198115,-259.91223007481136L596.2692337010378,-259.91223007481136L596.2692337010378,-305.77909420566044L214.0453659439623,-305.77909420566044L214.0453659439623,-317.2458102383727L198.75641123367927,-317.2458102383727L198.75641123367927,-321.06804891594345L0,-321.06804891594345Z" fill="url(#plot-pattern-4)"></path>
+      <path transform="translate(41.36538314948109,380)" d="M0,-321.06804891594345L198.75641123367927,-321.06804891594345L198.75641123367927,-317.2458102383727L214.0453659439623,-317.2458102383727L214.0453659439623,-305.77909420566044L596.2692337010378,-305.77909420566044L596.2692337010378,-351.6459583365095L336.3570036262265,-351.6459583365095L336.3570036262265,-356.3855342966964L321.06804891594345,-356.3855342966964L321.06804891594345,-366.93491304679253L0,-366.93491304679253Z" fill="url(#plot-pattern-5)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index 104881293e..eba4f4b20c 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -12,19 +12,167 @@ Elderly 65+,65+,12456`,
 );
 
 export function waffleShorthand() {
-  return Plot.waffleY([4, 9, 24, 46, 66, 7]).plot();
+  return Plot.plot({
+    y: {inset: 12},
+    marks: [
+      Plot.waffleY([4, 9, 24, 46, 66, 7], {fill: "currentColor"}),
+      Plot.waffleY([-4, -9, -24, -46, -66, -7], {fill: "red"})
+    ]
+  });
 }
 
-export function waffleShorthandNegative() {
-  return Plot.waffleY([-4, -9, -24, -46, -66, -7]).plot({x: {axis: "top"}});
+export function waffleStroke() {
+  return Plot.plot({
+    y: {inset: 12},
+    marks: [
+      Plot.waffleY([4, 9, 24, 46, 66, 7], {fill: "currentColor", stroke: "red", gap: 0}),
+      Plot.waffleY([-4, -9, -24, -46, -66, -7], {fill: "red", stroke: "currentColor", gap: 0})
+    ]
+  });
 }
 
-export function waffleStroke() {
-  return Plot.waffleY([4.5, 9, 24, 46, 66, 7], {fill: "#eee", stroke: "red", gap: 0}).plot();
+export function waffleRound() {
+  return Plot.plot({
+    y: {inset: 12},
+    marks: [
+      Plot.waffleY([4, 9, 24, 46, 66, 7], {fill: "currentColor", rx: "100%"}),
+      Plot.waffleY([-4, -9, -24, -46, -66, -7], {fill: "red", rx: "100%"})
+    ]
+  });
+}
+
+export function waffleStrokeMixed() {
+  return Plot.plot({
+    y: {insetBottom: 16},
+    marks: [
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [-1.1, -2.2, -3.3, -4.4, -5.5, -6.6],
+          y2: [2.3, 4.5, 6.7, 7.8, 9.1, 10.2],
+          unit: 0.2,
+          fill: "currentColor",
+          stroke: "red"
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [2.3, 4.5, 6.7, 7.8, 9.1, 10.2],
+          y2: [-1.1, -2.2, -3.3, -4.4, -5.5, -6.6],
+          unit: 0.2,
+          gap: 10,
+          fill: "red"
+        }
+      ),
+      Plot.ruleY([0])
+    ]
+  });
 }
 
 export function waffleStrokeNegative() {
-  return Plot.waffleY([-4.5, -9, -24, -46, -66, -7], {fill: "#eee", stroke: "red", gap: 0}).plot({x: {axis: "top"}});
+  return Plot.plot({
+    x: {axis: "top"},
+    marks: [
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: 0,
+          y2: [-1.1, -2.2, -3.3, -4.4, -5.5, -6.6],
+          unit: 0.2,
+          fillOpacity: 0.4
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [-1.1, -2.2, -3.3, -4.4, -5.5, -6.6],
+          y2: [-2.3, -4.5, -6.7, -7.8, -9.1, -10.2],
+          unit: 0.2,
+          fill: "currentColor",
+          stroke: "red"
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [-1.1, -2.2, -3.3, -4.4, -5.5, -6.6],
+          y2: 0,
+          gap: 10,
+          unit: 0.2,
+          fillOpacity: 0.4
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [-2.3, -4.5, -6.7, -7.8, -9.1, -10.2],
+          y2: [-1.1, -2.2, -3.3, -4.4, -5.5, -6.6],
+          unit: 0.2,
+          gap: 10,
+          fill: "red"
+        }
+      ),
+      Plot.ruleY([0])
+    ]
+  });
+}
+
+export function waffleStrokePositive() {
+  return Plot.plot({
+    marks: [
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: 0,
+          y2: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6],
+          unit: 0.2,
+          fillOpacity: 0.4
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6],
+          y2: [2.3, 4.5, 6.7, 7.8, 9.1, 10.2],
+          unit: 0.2,
+          fill: "currentColor",
+          stroke: "red"
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6],
+          y2: 0,
+          gap: 10,
+          unit: 0.2,
+          fillOpacity: 0.4
+        }
+      ),
+      Plot.waffleY(
+        {length: 6},
+        {
+          x: ["A", "B", "C", "D", "E", "F"],
+          y1: [2.3, 4.5, 6.7, 7.8, 9.1, 10.2],
+          y2: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6],
+          unit: 0.2,
+          gap: 10,
+          fill: "red"
+        }
+      ),
+      Plot.ruleY([0])
+    ]
+  });
 }
 
 export function waffleX() {

From d128cff48a3488fc7dacf607c4a95c917333df19 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 2 Aug 2024 20:48:55 -0400
Subject: [PATCH 20/22] test polish

---
 test/output/waffleX.svg         | 67 +++++++++++++++++---------------
 test/output/waffleXStacked.svg  | 27 +++++++------
 test/output/waffleY.svg         | 59 +++++++++++++++-------------
 test/output/waffleYStacked.html | 69 +++++++++++++++++----------------
 test/plots/waffle.ts            | 21 +++++++---
 5 files changed, 132 insertions(+), 111 deletions(-)

diff --git a/test/output/waffleX.svg b/test/output/waffleX.svg
index a605eb0ac4..7ab8f53e3b 100644
--- a/test/output/waffleX.svg
+++ b/test/output/waffleX.svg
@@ -14,36 +14,39 @@
     }
   </style>
   <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,10)">
-    <path transform="translate(80,34)" d="M0,0L-6,0"></path>
-    <path transform="translate(80,55)" d="M0,0L-6,0"></path>
-    <path transform="translate(80,76)" d="M0,0L-6,0"></path>
-    <path transform="translate(80,97)" d="M0,0L-6,0"></path>
-    <path transform="translate(80,118)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,24)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,45)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,66)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,87)" d="M0,0L-6,0"></path>
+    <path transform="translate(80,108)" d="M0,0L-6,0"></path>
   </g>
   <g aria-label="y-axis tick label" text-anchor="end" transform="translate(-8.5,10)">
-    <text y="0.32em" transform="translate(80,34)">Infants &lt;1</text>
-    <text y="0.32em" transform="translate(80,55)">Children &lt;11</text>
-    <text y="0.32em" transform="translate(80,76)">Teens 12-17</text>
-    <text y="0.32em" transform="translate(80,97)">Adults 18+</text>
-    <text y="0.32em" transform="translate(80,118)">Elderly 65+</text>
+    <text y="0.32em" transform="translate(80,24)">Infants &lt;1</text>
+    <text y="0.32em" transform="translate(80,45)">Children &lt;11</text>
+    <text y="0.32em" transform="translate(80,66)">Teens 12-17</text>
+    <text y="0.32em" transform="translate(80,87)">Adults 18+</text>
+    <text y="0.32em" transform="translate(80,108)">Elderly 65+</text>
   </g>
-  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,1)">
-    <path transform="translate(80,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(169.70695727290848,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(259.413914545817,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(349.1208718187255,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(438.827829091634,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(528.5347863645425,30)" d="M0,0L0,-6"></path>
-    <path transform="translate(618.241743637451,30)" d="M0,0L0,-6"></path>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)">
+    <path transform="translate(80,130)" d="M0,0L0,6"></path>
+    <path transform="translate(169.70695727290848,130)" d="M0,0L0,6"></path>
+    <path transform="translate(259.413914545817,130)" d="M0,0L0,6"></path>
+    <path transform="translate(349.1208718187255,130)" d="M0,0L0,6"></path>
+    <path transform="translate(438.827829091634,130)" d="M0,0L0,6"></path>
+    <path transform="translate(528.5347863645425,130)" d="M0,0L0,6"></path>
+    <path transform="translate(618.241743637451,130)" d="M0,0L0,6"></path>
   </g>
-  <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)">
-    <text transform="translate(80,30)">0</text>
-    <text transform="translate(169.70695727290848,30)">50</text>
-    <text transform="translate(259.413914545817,30)">100</text>
-    <text transform="translate(349.1208718187255,30)">150</text>
-    <text transform="translate(438.827829091634,30)">200</text>
-    <text transform="translate(528.5347863645425,30)">250</text>
-    <text transform="translate(618.241743637451,30)">300</text>
+  <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
+    <text y="0.71em" transform="translate(80,130)">0</text>
+    <text y="0.71em" transform="translate(169.70695727290848,130)">5</text>
+    <text y="0.71em" transform="translate(259.413914545817,130)">10</text>
+    <text y="0.71em" transform="translate(349.1208718187255,130)">15</text>
+    <text y="0.71em" transform="translate(438.827829091634,130)">20</text>
+    <text y="0.71em" transform="translate(528.5347863645425,130)">25</text>
+    <text y="0.71em" transform="translate(618.241743637451,130)">30</text>
+  </g>
+  <g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
+    <text transform="translate(620,130)">Frequency (thousands) →</text>
   </g>
   <g aria-label="waffle">
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-1">
@@ -61,13 +64,13 @@
     <pattern width="5.38241743637451" height="5.38241743637451" patternUnits="userSpaceOnUse" id="plot-pattern-5">
       <rect x="0.5" y="0.5" width="4.38241743637451" height="4.38241743637451" fill="rgb(175, 240, 91)"></rect>
     </pattern>
-    <path transform="translate(80,35.426373845438235)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L290.65054156422354,16.14725230912353L290.65054156422354,16.14725230912353L294.2567612465944,16.14725230912353L294.2567612465944,10.76483487274902L296.03295900059805,10.76483487274902L296.03295900059805,0Z" fill="url(#plot-pattern-1)"></path>
-    <path transform="translate(80,56.426373845438235)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L538.241743637451,16.14725230912353L538.241743637451,5.38241743637451L543.5165127250981,5.38241743637451L543.5165127250981,0Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(80,77.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L360.6219682370922,16.14725230912353L360.6219682370922,16.14725230912353L363.52847365273436,16.14725230912353L363.52847365273436,10.76483487274902L366.0043856734667,10.76483487274902L366.0043856734667,0Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(80,98.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451L226.06153232772942,5.38241743637451L226.06153232772942,0Z" fill="url(#plot-pattern-4)"></path>
-    <path transform="translate(80,119.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451L226.06153232772942,5.38241743637451L226.06153232772942,0Z" fill="url(#plot-pattern-5)"></path>
+    <path transform="translate(80,25.426373845438235)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L290.65054156422354,16.14725230912353L290.65054156422354,16.14725230912353L294.2567612465944,16.14725230912353L294.2567612465944,10.76483487274902L296.03295900059805,10.76483487274902L296.03295900059805,0Z" fill="url(#plot-pattern-1)"></path>
+    <path transform="translate(80,46.426373845438235)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L538.241743637451,16.14725230912353L538.241743637451,5.38241743637451L543.5165127250981,5.38241743637451L543.5165127250981,0Z" fill="url(#plot-pattern-2)"></path>
+    <path transform="translate(80,67.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L360.6219682370922,16.14725230912353L360.6219682370922,16.14725230912353L363.52847365273436,16.14725230912353L363.52847365273436,10.76483487274902L366.0043856734667,10.76483487274902L366.0043856734667,0Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(80,88.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451L226.06153232772942,5.38241743637451L226.06153232772942,0Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(80,109.42637384543823)" d="M0,0L0,0L0,0L0,0L0,0L0,16.14725230912353L220.6791148913549,16.14725230912353L220.6791148913549,10.76483487274902L223.69326865572467,10.76483487274902L223.69326865572467,5.38241743637451L226.06153232772942,5.38241743637451L226.06153232772942,0Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
-    <line x1="80" x2="80" y1="30" y2="140"></line>
+    <line x1="80" x2="80" y1="20" y2="130"></line>
   </g>
 </svg>
\ No newline at end of file
diff --git a/test/output/waffleXStacked.svg b/test/output/waffleXStacked.svg
index cd308262ba..15b8312d1c 100644
--- a/test/output/waffleXStacked.svg
+++ b/test/output/waffleXStacked.svg
@@ -21,21 +21,24 @@
     <path transform="translate(281.3496531672311,210)" d="M0,0L0,6"></path>
     <path transform="translate(346.6870664590389,210)" d="M0,0L0,6"></path>
     <path transform="translate(412.0244797508467,210)" d="M0,0L0,6"></path>
-    <path transform="translate(477.3618930426545,210)" d="M0,0L0,6"></path>
+    <path transform="translate(477.3618930426544,210)" d="M0,0L0,6"></path>
     <path transform="translate(542.6993063344622,210)" d="M0,0L0,6"></path>
     <path transform="translate(608.03671962627,210)" d="M0,0L0,6"></path>
   </g>
   <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
     <text y="0.71em" transform="translate(20,210)">0</text>
-    <text y="0.71em" transform="translate(85.33741329180778,210)">100</text>
-    <text y="0.71em" transform="translate(150.67482658361556,210)">200</text>
-    <text y="0.71em" transform="translate(216.01223987542335,210)">300</text>
-    <text y="0.71em" transform="translate(281.3496531672311,210)">400</text>
-    <text y="0.71em" transform="translate(346.6870664590389,210)">500</text>
-    <text y="0.71em" transform="translate(412.0244797508467,210)">600</text>
-    <text y="0.71em" transform="translate(477.3618930426545,210)">700</text>
-    <text y="0.71em" transform="translate(542.6993063344622,210)">800</text>
-    <text y="0.71em" transform="translate(608.03671962627,210)">900</text>
+    <text y="0.71em" transform="translate(85.33741329180778,210)">10</text>
+    <text y="0.71em" transform="translate(150.67482658361556,210)">20</text>
+    <text y="0.71em" transform="translate(216.01223987542335,210)">30</text>
+    <text y="0.71em" transform="translate(281.3496531672311,210)">40</text>
+    <text y="0.71em" transform="translate(346.6870664590389,210)">50</text>
+    <text y="0.71em" transform="translate(412.0244797508467,210)">60</text>
+    <text y="0.71em" transform="translate(477.3618930426544,210)">70</text>
+    <text y="0.71em" transform="translate(542.6993063344622,210)">80</text>
+    <text y="0.71em" transform="translate(608.03671962627,210)">90</text>
+  </g>
+  <g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
+    <text transform="translate(620,210)">Frequency (thousands) →</text>
   </g>
   <g aria-label="waffle">
     <pattern width="11.107360259607322" height="11.107360259607322" patternUnits="userSpaceOnUse" id="plot-pattern-1">
@@ -55,8 +58,8 @@
     </pattern>
     <path transform="translate(20,10.587437793337756)" d="M0,0L0,0L0,0L0,0L0,0L0,188.8251244133245L99.9662423364659,188.8251244133245L99.9662423364659,133.28832311528788L107.40817371040266,133.28832311528788L107.40817371040266,122.18096285568055L111.07360259607321,122.18096285568055L111.07360259607321,0Z" fill="url(#plot-pattern-1)"></path>
     <path transform="translate(20,10.587437793337756)" d="M111.07360259607321,0L111.07360259607321,122.18096285568055L107.40817371040266,122.18096285568055L107.40817371040266,133.28832311528788L99.9662423364659,133.28832311528788L99.9662423364659,188.8251244133245L299.8987270093977,188.8251244133245L299.8987270093977,77.75152181725126L307.1185111781422,77.75152181725126L307.1185111781422,66.64416155764394L311.00608726900504,66.64416155764394L311.00608726900504,0Z" fill="url(#plot-pattern-2)"></path>
-    <path transform="translate(20,10.587437793337756)" d="M311.00608726900504,0L311.00608726900504,66.64416155764394L307.1185111781422,66.64416155764394L307.1185111781422,77.75152181725126L299.8987270093977,77.75152181725126L299.8987270093977,188.8251244133245L433.1870501246856,188.8251244133245L433.1870501246856,77.75152181725126L435.2974485740103,77.75152181725126L435.2974485740103,66.64416155764394L444.29441038429286,66.64416155764394L444.29441038429286,0Z" fill="url(#plot-pattern-3)"></path>
-    <path transform="translate(20,10.587437793337756)" d="M444.29441038429286,0L444.29441038429286,66.64416155764394L435.2974485740103,66.64416155764394L435.2974485740103,77.75152181725126L433.1870501246856,77.75152181725126L433.1870501246856,188.8251244133245L510.9385719419368,188.8251244133245L510.9385719419368,133.28832311528788L519.2690921366423,133.28832311528788L519.2690921366423,122.18096285568055L522.0459322015441,122.18096285568055L522.0459322015441,0Z" fill="url(#plot-pattern-4)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M311.00608726900504,0L311.00608726900504,66.64416155764394L307.1185111781422,66.64416155764394L307.1185111781422,77.75152181725126L299.8987270093977,77.75152181725126L299.8987270093977,188.8251244133245L433.1870501246856,188.8251244133245L433.1870501246856,77.75152181725126L435.2974485740116,77.75152181725126L435.2974485740116,66.64416155764394L444.29441038429286,66.64416155764394L444.29441038429286,0Z" fill="url(#plot-pattern-3)"></path>
+    <path transform="translate(20,10.587437793337756)" d="M444.29441038429286,0L444.29441038429286,66.64416155764394L435.2974485740116,66.64416155764394L435.2974485740116,77.75152181725126L433.1870501246856,77.75152181725126L433.1870501246856,188.8251244133245L510.9385719419368,188.8251244133245L510.9385719419368,133.28832311528788L519.2690921366423,133.28832311528788L519.2690921366423,122.18096285568055L522.0459322015441,122.18096285568055L522.0459322015441,0Z" fill="url(#plot-pattern-4)"></path>
     <path transform="translate(20,10.587437793337756)" d="M522.0459322015441,0L522.0459322015441,122.18096285568055L519.2690921366423,122.18096285568055L519.2690921366423,133.28832311528788L510.9385719419368,133.28832311528788L510.9385719419368,188.8251244133245L599.7974540187954,188.8251244133245L599.7974540187954,11.107360259607322L603.240735699273,11.107360259607322L603.240735699273,0Z" fill="url(#plot-pattern-5)"></path>
   </g>
   <g aria-label="rule" stroke="currentColor" transform="translate(0.5,0)">
diff --git a/test/output/waffleY.svg b/test/output/waffleY.svg
index 2a971f484a..5bdf4e4117 100644
--- a/test/output/waffleY.svg
+++ b/test/output/waffleY.svg
@@ -13,6 +13,20 @@
       white-space: pre;
     }
   </style>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(51.5,0)">
+    <path transform="translate(53,370)" d="M0,0L0,6"></path>
+    <path transform="translate(166,370)" d="M0,0L0,6"></path>
+    <path transform="translate(279,370)" d="M0,0L0,6"></path>
+    <path transform="translate(392,370)" d="M0,0L0,6"></path>
+    <path transform="translate(505,370)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(51.5,9.5)">
+    <text y="0.71em" transform="translate(53,370)">Infants &lt;1</text>
+    <text y="0.71em" transform="translate(166,370)">Children &lt;11</text>
+    <text y="0.71em" transform="translate(279,370)">Teens 12-17</text>
+    <text y="0.71em" transform="translate(392,370)">Adults 18+</text>
+    <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
+  </g>
   <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
     <path transform="translate(40,370)" d="M0,0L-6,0"></path>
     <path transform="translate(40,346.7426407070237)" d="M0,0L-6,0"></path>
@@ -33,35 +47,24 @@
   </g>
   <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
     <text y="0.32em" transform="translate(40,370)">0</text>
-    <text y="0.32em" transform="translate(40,346.7426407070237)">20</text>
-    <text y="0.32em" transform="translate(40,323.48528141404745)">40</text>
-    <text y="0.32em" transform="translate(40,300.2279221210712)">60</text>
-    <text y="0.32em" transform="translate(40,276.9705628280949)">80</text>
-    <text y="0.32em" transform="translate(40,253.7132035351186)">100</text>
-    <text y="0.32em" transform="translate(40,230.45584424214235)">120</text>
-    <text y="0.32em" transform="translate(40,207.19848494916607)">140</text>
-    <text y="0.32em" transform="translate(40,183.9411256561898)">160</text>
-    <text y="0.32em" transform="translate(40,160.68376636321352)">180</text>
-    <text y="0.32em" transform="translate(40,137.42640707023725)">200</text>
-    <text y="0.32em" transform="translate(40,114.16904777726096)">220</text>
-    <text y="0.32em" transform="translate(40,90.9116884842847)">240</text>
-    <text y="0.32em" transform="translate(40,67.65432919130842)">260</text>
-    <text y="0.32em" transform="translate(40,44.39696989833213)">280</text>
-    <text y="0.32em" transform="translate(40,21.139610605355855)">300</text>
+    <text y="0.32em" transform="translate(40,346.7426407070237)">2</text>
+    <text y="0.32em" transform="translate(40,323.48528141404745)">4</text>
+    <text y="0.32em" transform="translate(40,300.2279221210712)">6</text>
+    <text y="0.32em" transform="translate(40,276.9705628280949)">8</text>
+    <text y="0.32em" transform="translate(40,253.7132035351186)">10</text>
+    <text y="0.32em" transform="translate(40,230.45584424214235)">12</text>
+    <text y="0.32em" transform="translate(40,207.19848494916607)">14</text>
+    <text y="0.32em" transform="translate(40,183.9411256561898)">16</text>
+    <text y="0.32em" transform="translate(40,160.68376636321352)">18</text>
+    <text y="0.32em" transform="translate(40,137.42640707023725)">20</text>
+    <text y="0.32em" transform="translate(40,114.16904777726096)">22</text>
+    <text y="0.32em" transform="translate(40,90.9116884842847)">24</text>
+    <text y="0.32em" transform="translate(40,67.65432919130842)">26</text>
+    <text y="0.32em" transform="translate(40,44.39696989833213)">28</text>
+    <text y="0.32em" transform="translate(40,21.139610605355855)">30</text>
   </g>
-  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(51.5,0)">
-    <path transform="translate(53,370)" d="M0,0L0,6"></path>
-    <path transform="translate(166,370)" d="M0,0L0,6"></path>
-    <path transform="translate(279,370)" d="M0,0L0,6"></path>
-    <path transform="translate(392,370)" d="M0,0L0,6"></path>
-    <path transform="translate(505,370)" d="M0,0L0,6"></path>
-  </g>
-  <g aria-label="x-axis tick label" transform="translate(51.5,9.5)">
-    <text y="0.71em" transform="translate(53,370)">Infants &lt;1</text>
-    <text y="0.71em" transform="translate(166,370)">Children &lt;11</text>
-    <text y="0.71em" transform="translate(279,370)">Teens 12-17</text>
-    <text y="0.71em" transform="translate(392,370)">Adults 18+</text>
-    <text y="0.71em" transform="translate(505,370)">Elderly 65+</text>
+  <g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
+    <text y="0.71em" transform="translate(40,20)">↑ Frequency (thousands)</text>
   </g>
   <g aria-label="waffle">
     <pattern width="10.465811681839325" height="10.465811681839325" patternUnits="userSpaceOnUse" id="plot-pattern-1">
diff --git a/test/output/waffleYStacked.html b/test/output/waffleYStacked.html
index 71656356ca..71dbdad274 100644
--- a/test/output/waffleYStacked.html
+++ b/test/output/waffleYStacked.html
@@ -52,49 +52,52 @@
     </style>
     <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)">
       <path transform="translate(40,380)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,340.7975520249154)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,301.59510404983064)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,262.392656074746)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,223.1902080996613)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,183.98776012457665)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,144.78531214949197)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,105.5828641744073)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,66.38041619932265)" d="M0,0L-6,0"></path>
-      <path transform="translate(40,27.177968224238)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,341.88650891311215)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,303.77301782622425)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,265.6595267393364)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,227.5460356524485)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,189.43254456556065)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,151.31905347867277)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,113.20556239178492)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,75.09207130489702)" d="M0,0L-6,0"></path>
+      <path transform="translate(40,36.97858021800917)" d="M0,0L-6,0"></path>
     </g>
     <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
       <text y="0.32em" transform="translate(40,380)">0</text>
-      <text y="0.32em" transform="translate(40,340.7975520249154)">100</text>
-      <text y="0.32em" transform="translate(40,301.59510404983064)">200</text>
-      <text y="0.32em" transform="translate(40,262.392656074746)">300</text>
-      <text y="0.32em" transform="translate(40,223.1902080996613)">400</text>
-      <text y="0.32em" transform="translate(40,183.98776012457665)">500</text>
-      <text y="0.32em" transform="translate(40,144.78531214949197)">600</text>
-      <text y="0.32em" transform="translate(40,105.5828641744073)">700</text>
-      <text y="0.32em" transform="translate(40,66.38041619932265)">800</text>
-      <text y="0.32em" transform="translate(40,27.177968224238)">900</text>
+      <text y="0.32em" transform="translate(40,341.88650891311215)">10</text>
+      <text y="0.32em" transform="translate(40,303.77301782622425)">20</text>
+      <text y="0.32em" transform="translate(40,265.6595267393364)">30</text>
+      <text y="0.32em" transform="translate(40,227.5460356524485)">40</text>
+      <text y="0.32em" transform="translate(40,189.43254456556065)">50</text>
+      <text y="0.32em" transform="translate(40,151.31905347867277)">60</text>
+      <text y="0.32em" transform="translate(40,113.20556239178492)">70</text>
+      <text y="0.32em" transform="translate(40,75.09207130489702)">80</text>
+      <text y="0.32em" transform="translate(40,36.97858021800917)">90</text>
+    </g>
+    <g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
+      <text y="0.71em" transform="translate(40,20)">↑ Frequency (thousands)</text>
     </g>
     <g aria-label="waffle">
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-1">
-        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(110, 64, 170)"></rect>
+      <pattern width="14.864261523886269" height="14.864261523886269" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+        <rect x="0.5" y="0.5" width="13.864261523886269" height="13.864261523886269" fill="rgb(110, 64, 170)"></rect>
       </pattern>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-2">
-        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(65, 125, 224)"></rect>
+      <pattern width="14.864261523886269" height="14.864261523886269" patternUnits="userSpaceOnUse" id="plot-pattern-2">
+        <rect x="0.5" y="0.5" width="13.864261523886269" height="13.864261523886269" fill="rgb(65, 125, 224)"></rect>
       </pattern>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-3">
-        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(26, 199, 194)"></rect>
+      <pattern width="14.864261523886269" height="14.864261523886269" patternUnits="userSpaceOnUse" id="plot-pattern-3">
+        <rect x="0.5" y="0.5" width="13.864261523886269" height="13.864261523886269" fill="rgb(26, 199, 194)"></rect>
       </pattern>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-4">
-        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(64, 243, 115)"></rect>
+      <pattern width="14.864261523886269" height="14.864261523886269" patternUnits="userSpaceOnUse" id="plot-pattern-4">
+        <rect x="0.5" y="0.5" width="13.864261523886269" height="13.864261523886269" fill="rgb(64, 243, 115)"></rect>
       </pattern>
-      <pattern width="15.288954710283022" height="15.288954710283022" patternUnits="userSpaceOnUse" id="plot-pattern-5">
-        <rect x="0.5" y="0.5" width="14.288954710283022" height="14.288954710283022" fill="rgb(175, 240, 91)"></rect>
+      <pattern width="14.864261523886269" height="14.864261523886269" patternUnits="userSpaceOnUse" id="plot-pattern-5">
+        <rect x="0.5" y="0.5" width="13.864261523886269" height="13.864261523886269" fill="rgb(175, 240, 91)"></rect>
       </pattern>
-      <path transform="translate(41.36538314948109,380)" d="M0,0L0,0L0,0L0,0L0,0L596.2692337010378,0L596.2692337010378,-61.15581884113209L137.60059239254718,-61.15581884113209L137.60059239254718,-71.39941849702153L122.31163768226418,-71.39941849702153L122.31163768226418,-76.44477355141511L0,-76.44477355141511Z" fill="url(#plot-pattern-1)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M0,-76.44477355141511L122.31163768226418,-76.44477355141511L122.31163768226418,-71.39941849702153L137.60059239254718,-71.39941849702153L137.60059239254718,-61.15581884113209L596.2692337010378,-61.15581884113209L596.2692337010378,-168.17850181311326L565.6913242804718,-168.17850181311326L565.6913242804718,-178.11632237479685L550.4023695701887,-178.11632237479685L550.4023695701887,-183.46745652339627L0,-183.46745652339627Z" fill="url(#plot-pattern-2)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M0,-183.46745652339627L550.4023695701887,-183.46745652339627L550.4023695701887,-178.11632237479685L565.6913242804718,-178.11632237479685L565.6913242804718,-168.17850181311326L596.2692337010378,-168.17850181311326L596.2692337010378,-259.91223007481136L107.02268297198115,-259.91223007481136L107.02268297198115,-262.81713146976426L91.73372826169813,-262.81713146976426L91.73372826169813,-275.20118478509437L0,-275.20118478509437Z" fill="url(#plot-pattern-3)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M0,-275.20118478509437L91.73372826169813,-275.20118478509437L91.73372826169813,-262.81713146976426L107.02268297198115,-262.81713146976426L107.02268297198115,-259.91223007481136L596.2692337010378,-259.91223007481136L596.2692337010378,-305.77909420566044L214.0453659439623,-305.77909420566044L214.0453659439623,-317.2458102383727L198.75641123367927,-317.2458102383727L198.75641123367927,-321.06804891594345L0,-321.06804891594345Z" fill="url(#plot-pattern-4)"></path>
-      <path transform="translate(41.36538314948109,380)" d="M0,-321.06804891594345L198.75641123367927,-321.06804891594345L198.75641123367927,-317.2458102383727L214.0453659439623,-317.2458102383727L214.0453659439623,-305.77909420566044L596.2692337010378,-305.77909420566044L596.2692337010378,-351.6459583365095L336.3570036262265,-351.6459583365095L336.3570036262265,-356.3855342966964L321.06804891594345,-356.3855342966964L321.06804891594345,-366.93491304679253L0,-366.93491304679253Z" fill="url(#plot-pattern-5)"></path>
+      <path transform="translate(49.646900284217736,380)" d="M0,0L0,0L0,0L0,0L0,0L579.7061994315645,0L579.7061994315645,-59.457046095545074L133.77835371497642,-59.457046095545074L133.77835371497642,-69.41610131654869L118.91409219109015,-69.41610131654869L118.91409219109015,-74.32130761943134L0,-74.32130761943134Z" fill="url(#plot-pattern-1)"></path>
+      <path transform="translate(49.646900284217736,380)" d="M0,-74.32130761943134L118.91409219109015,-74.32130761943134L118.91409219109015,-69.41610131654869L133.77835371497642,-69.41610131654869L133.77835371497642,-59.457046095545074L579.7061994315645,-59.457046095545074L579.7061994315645,-163.50687676274896L549.977676383792,-163.50687676274896L549.977676383792,-173.1686467532747L535.1134148599057,-173.1686467532747L535.1134148599057,-178.37113828663522L0,-178.37113828663522Z" fill="url(#plot-pattern-2)"></path>
+      <path transform="translate(49.646900284217736,380)" d="M0,-178.37113828663522L535.1134148599057,-178.37113828663522L535.1134148599057,-173.1686467532747L549.977676383792,-173.1686467532747L549.977676383792,-163.50687676274896L579.7061994315645,-163.50687676274896L579.7061994315645,-252.69244590606655L104.04983066720388,-252.69244590606655L104.04983066720388,-255.51665559560576L89.18556914331761,-255.51665559560576L89.18556914331761,-267.55670742995284L0,-267.55670742995284Z" fill="url(#plot-pattern-3)"></path>
+      <path transform="translate(49.646900284217736,380)" d="M0,-267.55670742995284L89.18556914331761,-267.55670742995284L89.18556914331761,-255.51665559560576L104.04983066720388,-255.51665559560576L104.04983066720388,-252.69244590606655L579.7061994315645,-252.69244590606655L579.7061994315645,-297.28523047772535L208.09966133440776,-297.28523047772535L208.09966133440776,-308.4334266206401L193.2353998105215,-308.4334266206401L193.2353998105215,-312.14949200161163L0,-312.14949200161163Z" fill="url(#plot-pattern-4)"></path>
+      <path transform="translate(49.646900284217736,380)" d="M0,-312.14949200161163L193.2353998105215,-312.14949200161163L193.2353998105215,-308.4334266206401L208.09966133440776,-308.4334266206401L208.09966133440776,-297.28523047772535L579.7061994315645,-297.28523047772535L579.7061994315645,-341.8780150493842L327.0137535254979,-341.8780150493842L327.0137535254979,-346.4859361217881L312.14949200161163,-346.4859361217881L312.14949200161163,-356.74227657327043L0,-356.74227657327043Z" fill="url(#plot-pattern-5)"></path>
     </g>
     <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
       <line x1="40" x2="639" y1="380" y2="380"></line>
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index eba4f4b20c..de295fb463 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -178,11 +178,11 @@ export function waffleStrokePositive() {
 export function waffleX() {
   return Plot.plot({
     marginLeft: 80,
-    x: {axis: "top"},
     y: {label: null},
     color: {scheme: "cool"},
     marks: [
-      Plot.waffleX(demographics, {y: "group", fill: "group", x: (d) => d.freq / 100, sort: {y: null, color: null}}),
+      Plot.axisX({label: "Frequency (thousands)", tickFormat: (d) => d / 1000}),
+      Plot.waffleX(demographics, {y: "group", fill: "group", x: "freq", unit: 100, sort: {y: null, color: null}}),
       Plot.ruleX([0])
     ]
   });
@@ -192,7 +192,11 @@ export function waffleXStacked() {
   return Plot.plot({
     height: 240,
     color: {scheme: "cool"},
-    marks: [Plot.waffleX(demographics, {fill: "group", x: (d) => d.freq / 100, sort: {color: null}}), Plot.ruleX([0])]
+    marks: [
+      Plot.axisX({label: "Frequency (thousands)", tickFormat: (d) => d / 1000}),
+      Plot.waffleX(demographics, {fill: "group", x: "freq", unit: 100, sort: {color: null}}),
+      Plot.ruleX([0])
+    ]
   });
 }
 
@@ -201,7 +205,8 @@ export function waffleY() {
     x: {label: null},
     color: {scheme: "cool"},
     marks: [
-      Plot.waffleY(demographics, {x: "group", fill: "group", y: (d) => d.freq / 100, sort: {x: null, color: null}}),
+      Plot.axisY({label: "Frequency (thousands)", tickFormat: (d) => d / 1000}),
+      Plot.waffleY(demographics, {x: "group", fill: "group", y: "freq", unit: 100, sort: {x: null, color: null}}),
       Plot.ruleY([0])
     ]
   });
@@ -209,9 +214,13 @@ export function waffleY() {
 
 export function waffleYStacked() {
   return Plot.plot({
-    x: {label: null},
+    y: {insetTop: 10},
     color: {scheme: "cool", legend: true},
-    marks: [Plot.waffleY(demographics, {fill: "group", y: (d) => d.freq / 100, sort: {color: null}}), Plot.ruleY([0])]
+    marks: [
+      Plot.axisY({label: "Frequency (thousands)", tickFormat: (d) => d / 1000}),
+      Plot.waffleY(demographics, {fill: "group", y: "freq", unit: 100, sort: {color: null}}),
+      Plot.ruleY([0])
+    ]
   });
 }
 

From 29911e3f210881f625567ba42fa093f7ef6348a6 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Sun, 4 Aug 2024 15:22:32 -0400
Subject: [PATCH 21/22] padding tip

---
 docs/marks/waffle.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md
index e1d12d56cb..e57faaa81f 100644
--- a/docs/marks/waffle.md
+++ b/docs/marks/waffle.md
@@ -123,6 +123,9 @@ Plot.waffleX([apples], {y: ["apples"]}).plot({height: 240})
 :::info
 The number of rows in the waffle above is guaranteed to be an integer, but it might not be a multiple or factor of the *x*-axis tick interval. For example, the waffle might have 15 rows while the *x*-axis shows ticks every 100 units.
 :::
+:::tip
+While you can’t control the number of rows (or columns) directly, you can affect it via the **padding** option on the corresponding band scale. Padding defaults to 0.1; a higher value may produce more rows, while a lower (or zero) value may produce fewer rows.
+:::
 
 ## Waffle options
 

From 399caff8c2bb604768c5f206790bf1ca970f9a27 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Sun, 4 Aug 2024 15:29:54 -0400
Subject: [PATCH 22/22] squish waffles if needed

---
 src/marks/waffle.js            | 15 +++++-----
 test/output/waffleSquished.svg | 54 ++++++++++++++++++++++++++++++++++
 test/plots/waffle.ts           |  4 +++
 3 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 test/output/waffleSquished.svg

diff --git a/src/marks/waffle.js b/src/marks/waffle.js
index ab2b4957a3..358b721fb9 100644
--- a/src/marks/waffle.js
+++ b/src/marks/waffle.js
@@ -49,25 +49,26 @@ function waffleRender(y) {
     const columns = Math.max(1, Math.floor(Math.sqrt(barwidth / scale)));
 
     // The outer size of each square cell, in pixels, including the gap.
-    const cellsize = scale * columns;
+    const cx = Math.min(barwidth, scale * columns);
+    const cy = scale * columns;
 
     // TODO insets?
-    const transform = y === "y" ? ([x, y]) => [x * cellsize, -y * cellsize] : ([x, y]) => [y * cellsize, x * cellsize];
-    const tx = (barwidth - columns * cellsize) / 2;
+    const transform = y === "y" ? ([x, y]) => [x * cx, -y * cy] : ([x, y]) => [y * cy, x * cx];
+    const tx = (barwidth - columns * cx) / 2;
     const x0 = typeof barx === "function" ? (i) => barx(i) + tx : barx + tx;
     const y0 = scales[y](0);
 
     // Create a base pattern with shared attributes for cloning.
     const patternId = getPatternId();
     const basePattern = document.createElementNS(namespaces.svg, "pattern");
-    basePattern.setAttribute("width", cellsize);
-    basePattern.setAttribute("height", cellsize);
+    basePattern.setAttribute("width", y === "y" ? cx : cy);
+    basePattern.setAttribute("height", y === "y" ? cy : cx);
     basePattern.setAttribute("patternUnits", "userSpaceOnUse");
     const basePatternRect = basePattern.appendChild(document.createElementNS(namespaces.svg, "rect"));
     basePatternRect.setAttribute("x", gap / 2);
     basePatternRect.setAttribute("y", gap / 2);
-    basePatternRect.setAttribute("width", cellsize - gap);
-    basePatternRect.setAttribute("height", cellsize - gap);
+    basePatternRect.setAttribute("width", (y === "y" ? cx : cy) - gap);
+    basePatternRect.setAttribute("height", (y === "y" ? cy : cx) - gap);
     if (rx != null) basePatternRect.setAttribute("rx", rx);
     if (ry != null) basePatternRect.setAttribute("ry", ry);
 
diff --git a/test/output/waffleSquished.svg b/test/output/waffleSquished.svg
new file mode 100644
index 0000000000..aeff76873d
--- /dev/null
+++ b/test/output/waffleSquished.svg
@@ -0,0 +1,54 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="80" viewBox="0 0 640 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,12.5)">
+    <path transform="translate(40,23)" d="M0,0L-6,0"></path>
+  </g>
+  <g aria-label="y-axis tick label" text-anchor="end" transform="translate(-8.5,12.5)">
+    <text y="0.32em" transform="translate(40,23)">0</text>
+  </g>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)">
+    <path transform="translate(40,50)" d="M0,0L0,6"></path>
+    <path transform="translate(98,50)" d="M0,0L0,6"></path>
+    <path transform="translate(156,50)" d="M0,0L0,6"></path>
+    <path transform="translate(214,50)" d="M0,0L0,6"></path>
+    <path transform="translate(272,50)" d="M0,0L0,6"></path>
+    <path transform="translate(330,50)" d="M0,0L0,6"></path>
+    <path transform="translate(388,50)" d="M0,0L0,6"></path>
+    <path transform="translate(446,50)" d="M0,0L0,6"></path>
+    <path transform="translate(504,50)" d="M0,0L0,6"></path>
+    <path transform="translate(562,50)" d="M0,0L0,6"></path>
+    <path transform="translate(620,50)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
+    <text y="0.71em" transform="translate(40,50)">0</text>
+    <text y="0.71em" transform="translate(98,50)">1</text>
+    <text y="0.71em" transform="translate(156,50)">2</text>
+    <text y="0.71em" transform="translate(214,50)">3</text>
+    <text y="0.71em" transform="translate(272,50)">4</text>
+    <text y="0.71em" transform="translate(330,50)">5</text>
+    <text y="0.71em" transform="translate(388,50)">6</text>
+    <text y="0.71em" transform="translate(446,50)">7</text>
+    <text y="0.71em" transform="translate(504,50)">8</text>
+    <text y="0.71em" transform="translate(562,50)">9</text>
+    <text y="0.71em" transform="translate(620,50)">10</text>
+  </g>
+  <g aria-label="waffle">
+    <pattern width="58" height="24" patternUnits="userSpaceOnUse" id="plot-pattern-1">
+      <rect x="0.5" y="0.5" width="57" height="23"></rect>
+    </pattern>
+    <path transform="translate(40,23)" d="M0,0L0,0L0,0L0,0L0,0L0,24L580,24L580,0L580,0L580,0Z" fill="url(#plot-pattern-1)"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/plots/waffle.ts b/test/plots/waffle.ts
index de295fb463..cbd24a1bad 100644
--- a/test/plots/waffle.ts
+++ b/test/plots/waffle.ts
@@ -11,6 +11,10 @@ Elderly 65+,65+,12456`,
   d3.autoType
 );
 
+export function waffleSquished() {
+  return Plot.waffleX([10]).plot();
+}
+
 export function waffleShorthand() {
   return Plot.plot({
     y: {inset: 12},