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] 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])
+    ]
   });
 }