From bc882aff5df681dd79c66ee5e43b8bbcce9b1dfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Tue, 3 Aug 2021 18:49:40 +0200
Subject: [PATCH 1/3] software versions example

with thanks to @yurivish
---
 test/data/software-versions.csv | 431 ++++++++++++++++++++++++++++++++
 test/plots/index.js             |   1 +
 test/plots/software-versions.js |  47 ++++
 3 files changed, 479 insertions(+)
 create mode 100644 test/data/software-versions.csv
 create mode 100644 test/plots/software-versions.js

diff --git a/test/data/software-versions.csv b/test/data/software-versions.csv
new file mode 100644
index 0000000000..672206b9e6
--- /dev/null
+++ b/test/data/software-versions.csv
@@ -0,0 +1,431 @@
+key
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v369
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v369
+v359
+v369
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v348
+v368
+v368
+v368
+v368
+v348
+v368
+v348
+v348
+v348
+v369
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v359
+v359
+v359
+v324
+v348
+v348
+v348
+v368
+v368
+v348
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v348
+v348
+v348
+v348
+v348
+v368
+v369
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v369
+v359
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v368
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v368
+v348
+v369
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v359
+v359
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v359
+v359
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v369
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v368
+v369
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v369
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v359
+v369
+v369
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v369
+v348
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v369
+v368
+v368
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v369
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v369
+v359
+v369
+v359
+v324
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v348
+v368
+v368
+v368
+v368
+v368
+v368
+v368
+v369
+v369
+v359
+v359
+v368
+v368
+v368
+v368
+v369
+v368
+v368
+v368
+v368
+v369
+v381
+v381
+v381
+v381
+v381
+v381
+v381
+v381
+v381
+v381
+v381
+v381
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
+v429
\ No newline at end of file
diff --git a/test/plots/index.js b/test/plots/index.js
index 67812e74c1..694adcd6ec 100644
--- a/test/plots/index.js
+++ b/test/plots/index.js
@@ -88,6 +88,7 @@ export {default as sfTemperatureBandArea} from "./sf-temperature-band-area.js";
 export {default as simpsonsRatings} from "./simpsons-ratings.js";
 export {default as simpsonsRatingsDots} from "./simpsons-ratings-dots.js";
 export {default as simpsonsViews} from "./simpsons-views.js";
+export {default as softwareVersions} from "./software-versions.js";
 export {default as stackedBar} from "./stacked-bar.js";
 export {default as stocksIndex} from "./stocks-index.js";
 export {default as travelersYearOverYear} from "./travelers-year-over-year.js";
diff --git a/test/plots/software-versions.js b/test/plots/software-versions.js
new file mode 100644
index 0000000000..6d800bfeca
--- /dev/null
+++ b/test/plots/software-versions.js
@@ -0,0 +1,47 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const data = await d3.csv("data/software-versions.csv");
+  return Plot.plot({
+    x: { percent: true },
+    color: { scheme: "blues" },
+    marks: [
+      Plot.barX(
+        data,
+        Plot.stackX(
+          Plot.groupZ(
+            {
+              x: "proportion",
+              text: "first"
+            },
+            {
+              fill: "key",
+              text: "key",
+              order: "value",
+              stroke: "black"
+            }
+          )
+        )
+      ),
+      Plot.text(
+        data,
+        Plot.stackX(
+          Plot.groupZ(
+            {
+              x: "proportion",
+              text: "first"
+            },
+            {
+              z: "key",
+              text: "key",
+              order: "value"
+            }
+          )
+        )
+      ),
+      Plot.frame()
+    ],
+    width: 940
+  });
+}

From e5b4066b3b0788d2c38db63c7e7a0ec84eda456b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Tue, 3 Aug 2021 21:36:27 +0200
Subject: [PATCH 2/3] forgot the test output

---
 test/output/softwareVersions.svg | 48 ++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 test/output/softwareVersions.svg

diff --git a/test/output/softwareVersions.svg b/test/output/softwareVersions.svg
new file mode 100644
index 0000000000..dd492b23df
--- /dev/null
+++ b/test/output/softwareVersions.svg
@@ -0,0 +1,48 @@
+<svg class="plot" fill="currentColor" text-anchor="middle" width="940" height="60" viewBox="0 0 940 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+    <g class="tick" opacity="1" transform="translate(20.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(110.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(200.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">20</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(290.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">30</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(380.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(470.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">50</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(560.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">60</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(650.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">70</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(740.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">80</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(830.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">90</text>
+    </g>
+    <g class="tick" opacity="1" transform="translate(920.5,0)">
+      <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">100</text>
+    </g><text fill="currentColor" transform="translate(940,30)" dy="-0.32em" text-anchor="end">Frequency (%) →</text>
+  </g>
+  <g stroke="black">
+    <rect x="20" width="20.930232558139537" y="0" height="30" fill="#eff3ff"></rect>
+    <rect x="40.93023255813954" width="25.116279069767444" y="0" height="30" fill="#2171b5"></rect>
+    <rect x="66.04651162790698" width="43.95348837209302" y="0" height="30" fill="#4292c6"></rect>
+    <rect x="110" width="54.41860465116284" y="0" height="30" fill="#9ecae1"></rect>
+    <rect x="164.41860465116284" width="100.46511627906975" y="0" height="30" fill="#084594"></rect>
+    <rect x="264.8837209302326" width="205.11627906976742" y="0" height="30" fill="#6baed6"></rect>
+    <rect x="470" width="450" y="0" height="30" fill="#c6dbef"></rect>
+  </g>
+  <g transform="translate(0.5,0.5)"><text dy="0.32em" x="30.46511627906977" y="15">v324</text><text dy="0.32em" x="53.48837209302325" y="15">v381</text><text dy="0.32em" x="88.02325581395348" y="15">v369</text><text dy="0.32em" x="137.2093023255814" y="15">v359</text><text dy="0.32em" x="214.65116279069767" y="15">v429</text><text dy="0.32em" x="367.44186046511624" y="15">v368</text><text dy="0.32em" x="695" y="15">v348</text></g>
+  <rect fill="none" stroke="currentColor" transform="translate(0.5,0.5)" x="20" y="0" width="900" height="30"></rect>
+</svg>
\ No newline at end of file

From 25b1b292395019d1b5943b423023c94d542e8c75 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Tue, 3 Aug 2021 15:52:12 -0700
Subject: [PATCH 3/3] tweak example

---
 test/data/software-versions.csv  | 862 +++++++++++++++----------------
 test/output/softwareVersions.svg |  47 +-
 test/plots/software-versions.js  |  70 ++-
 3 files changed, 488 insertions(+), 491 deletions(-)

diff --git a/test/data/software-versions.csv b/test/data/software-versions.csv
index 672206b9e6..9f8a6496a5 100644
--- a/test/data/software-versions.csv
+++ b/test/data/software-versions.csv
@@ -1,431 +1,431 @@
-key
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v369
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v369
-v359
-v369
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v348
-v368
-v368
-v368
-v368
-v348
-v368
-v348
-v348
-v348
-v369
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v359
-v359
-v359
-v324
-v348
-v348
-v348
-v368
-v368
-v348
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v348
-v348
-v348
-v348
-v348
-v368
-v369
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v369
-v359
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v368
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v368
-v348
-v369
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v359
-v359
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v359
-v359
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v369
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v368
-v369
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v369
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v359
-v369
-v369
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v369
-v348
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v369
-v368
-v368
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v369
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v369
-v359
-v369
-v359
-v324
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v348
-v368
-v368
-v368
-v368
-v368
-v368
-v368
-v369
-v369
-v359
-v359
-v368
-v368
-v368
-v368
-v369
-v368
-v368
-v368
-v368
-v369
-v381
-v381
-v381
-v381
-v381
-v381
-v381
-v381
-v381
-v381
-v381
-v381
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
-v429
\ No newline at end of file
+version
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+369
+348
+348
+348
+348
+368
+368
+368
+368
+368
+368
+359
+369
+359
+369
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+368
+348
+368
+368
+368
+368
+348
+368
+348
+348
+348
+369
+348
+368
+368
+368
+368
+368
+368
+368
+359
+359
+359
+359
+324
+348
+348
+348
+368
+368
+348
+348
+348
+348
+348
+368
+368
+368
+348
+348
+348
+348
+348
+368
+369
+348
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+359
+369
+359
+359
+324
+348
+348
+348
+348
+348
+348
+348
+368
+368
+348
+348
+348
+348
+348
+348
+348
+348
+368
+368
+348
+369
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+359
+359
+359
+359
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+368
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+359
+359
+359
+359
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+369
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+359
+368
+369
+359
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+369
+348
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+359
+369
+369
+359
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+368
+369
+348
+348
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+369
+368
+368
+359
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+369
+348
+348
+368
+368
+368
+368
+368
+368
+368
+369
+359
+369
+359
+324
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+348
+368
+368
+368
+368
+368
+368
+368
+369
+369
+359
+359
+368
+368
+368
+368
+369
+368
+368
+368
+368
+369
+381
+381
+381
+381
+381
+381
+381
+381
+381
+381
+381
+381
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
+429
diff --git a/test/output/softwareVersions.svg b/test/output/softwareVersions.svg
index dd492b23df..ef91ed9fde 100644
--- a/test/output/softwareVersions.svg
+++ b/test/output/softwareVersions.svg
@@ -1,48 +1,51 @@
-<svg class="plot" fill="currentColor" text-anchor="middle" width="940" height="60" viewBox="0 0 940 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(110.5,0)">
+    <g class="tick" opacity="1" transform="translate(80.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(200.5,0)">
+    <g class="tick" opacity="1" transform="translate(140.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">20</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(290.5,0)">
+    <g class="tick" opacity="1" transform="translate(200.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">30</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(380.5,0)">
+    <g class="tick" opacity="1" transform="translate(260.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(470.5,0)">
+    <g class="tick" opacity="1" transform="translate(320.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">50</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(560.5,0)">
+    <g class="tick" opacity="1" transform="translate(380.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">60</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(650.5,0)">
+    <g class="tick" opacity="1" transform="translate(440.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">70</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(740.5,0)">
+    <g class="tick" opacity="1" transform="translate(500.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">80</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(830.5,0)">
+    <g class="tick" opacity="1" transform="translate(560.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">90</text>
     </g>
-    <g class="tick" opacity="1" transform="translate(920.5,0)">
+    <g class="tick" opacity="1" transform="translate(620.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">100</text>
-    </g><text fill="currentColor" transform="translate(940,30)" dy="-0.32em" text-anchor="end">Frequency (%) →</text>
+    </g><text fill="currentColor" transform="translate(640,30)" dy="-0.32em" text-anchor="end">Frequency (%) →</text>
+  </g>
+  <g>
+    <rect x="20.5" width="299" y="0" height="30" fill="#c6dbef"></rect>
+    <rect x="320.5" width="135.7441860465117" y="0" height="30" fill="#6baed6"></rect>
+    <rect x="457.2441860465117" width="65.9767441860464" y="0" height="30" fill="#084594"></rect>
+    <rect x="524.2209302325581" width="35.27906976744191" y="0" height="30" fill="#9ecae1"></rect>
+    <rect x="560.5" width="28.30232558139528" y="0" height="30" fill="#4292c6"></rect>
+    <rect x="589.8023255813953" width="15.7441860465118" y="0" height="30" fill="#2171b5"></rect>
+    <rect x="606.5465116279071" width="12.95348837209292" y="0" height="30" fill="#eff3ff"></rect>
   </g>
-  <g stroke="black">
-    <rect x="20" width="20.930232558139537" y="0" height="30" fill="#eff3ff"></rect>
-    <rect x="40.93023255813954" width="25.116279069767444" y="0" height="30" fill="#2171b5"></rect>
-    <rect x="66.04651162790698" width="43.95348837209302" y="0" height="30" fill="#4292c6"></rect>
-    <rect x="110" width="54.41860465116284" y="0" height="30" fill="#9ecae1"></rect>
-    <rect x="164.41860465116284" width="100.46511627906975" y="0" height="30" fill="#084594"></rect>
-    <rect x="264.8837209302326" width="205.11627906976742" y="0" height="30" fill="#6baed6"></rect>
-    <rect x="470" width="450" y="0" height="30" fill="#c6dbef"></rect>
+  <g transform="translate(0.5,0.5)"><text dy="0.32em" x="170" y="15">348</text><text dy="0.32em" x="388.3720930232558" y="15">368</text><text dy="0.32em" x="490.2325581395348" y="15">429</text><text dy="0.32em" x="541.860465116279" y="15">359</text><text dy="0.32em" x="574.6511627906978" y="15">369</text><text dy="0.32em" x="597.6744186046511" y="15">381</text><text dy="0.32em" x="613.0232558139534" y="15">324</text></g>
+  <g stroke="currentColor" transform="translate(0.5,0)">
+    <line x1="20" x2="20" y1="0" y2="30"></line>
+    <line x1="620" x2="620" y1="0" y2="30"></line>
   </g>
-  <g transform="translate(0.5,0.5)"><text dy="0.32em" x="30.46511627906977" y="15">v324</text><text dy="0.32em" x="53.48837209302325" y="15">v381</text><text dy="0.32em" x="88.02325581395348" y="15">v369</text><text dy="0.32em" x="137.2093023255814" y="15">v359</text><text dy="0.32em" x="214.65116279069767" y="15">v429</text><text dy="0.32em" x="367.44186046511624" y="15">v368</text><text dy="0.32em" x="695" y="15">v348</text></g>
-  <rect fill="none" stroke="currentColor" transform="translate(0.5,0.5)" x="20" y="0" width="900" height="30"></rect>
 </svg>
\ No newline at end of file
diff --git a/test/plots/software-versions.js b/test/plots/software-versions.js
index 6d800bfeca..b691e7a069 100644
--- a/test/plots/software-versions.js
+++ b/test/plots/software-versions.js
@@ -3,45 +3,39 @@ import * as d3 from "d3";
 
 export default async function() {
   const data = await d3.csv("data/software-versions.csv");
+
+  function stack({text, fill, ...options} = {}) {
+    return Plot.stackX(
+      {
+        ...Plot.groupZ(
+          {
+            x: "proportion",
+            text: "first"
+          },
+          {
+            z: "version",
+            order: "value",
+            text,
+            fill
+          }
+        ),
+        reverse: true,
+        ...options
+      }
+    );
+  }
+
   return Plot.plot({
-    x: { percent: true },
-    color: { scheme: "blues" },
+    x: {
+      percent: true
+    },
+    color: {
+      scheme: "blues"
+    },
     marks: [
-      Plot.barX(
-        data,
-        Plot.stackX(
-          Plot.groupZ(
-            {
-              x: "proportion",
-              text: "first"
-            },
-            {
-              fill: "key",
-              text: "key",
-              order: "value",
-              stroke: "black"
-            }
-          )
-        )
-      ),
-      Plot.text(
-        data,
-        Plot.stackX(
-          Plot.groupZ(
-            {
-              x: "proportion",
-              text: "first"
-            },
-            {
-              z: "key",
-              text: "key",
-              order: "value"
-            }
-          )
-        )
-      ),
-      Plot.frame()
-    ],
-    width: 940
+      Plot.barX(data, stack({fill: "version", insetLeft: 0.5, insetRight: 0.5})),
+      Plot.text(data, stack({text: "version"})),
+      Plot.ruleX([0, 1])
+    ]
   });
 }