allow threshold swatches (#972)

Author: mbostock

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 *Not yet released. These are forthcoming changes in the main branch.*
 
-Swatches legends are now rendered in SVG, supporting patterns and gradients. Swatches legends now require an ordinal color scale and will throw an error if you attempt to use them with a non-ordinal color scale (such as a linear or diverging scale).
+Swatches legends are now rendered in SVG, supporting patterns and gradients. Swatches legends now require an *ordinal*, *categorical*, or *threshold* color scale and will throw an error if you attempt to use them with an unsupported color scale type (such as a *linear* or *diverging* scale).
 
 The new top-level **document** option specifies the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) used to create plot elements. It defaults to window.document, but can be changed to another document, say when using a virtual DOM library for server-side rendering in Node.
 

src/legends/swatches.js

@@ -3,7 +3,7 @@ import {inferFontVariant} from "../axes.js";
 import {maybeAutoTickFormat} from "../axis.js";
 import {Context, create} from "../context.js";
 import {isNoneish, maybeColorChannel, maybeNumberChannel} from "../options.js";
-import {isOrdinalScale} from "../scales.js";
+import {isOrdinalScale, isThresholdScale} from "../scales.js";
 import {applyInlineStyles, impliedString, maybeClassName} from "../style.js";
 
 function maybeScale(scale, key) {
@@ -14,7 +14,7 @@ function maybeScale(scale, key) {
 }
 
 export function legendSwatches(color, options) {
-  if (!isOrdinalScale(color)) throw new Error(`swatches legend requires ordinal color scale (not ${color.type})`);
+  if (!isOrdinalScale(color) && !isThresholdScale(color)) throw new Error(`swatches legend requires ordinal or threshold color scale (not ${color.type})`);
   return legendItems(
     color,
     options,

src/scales.js

@@ -306,7 +306,7 @@ export function isOrdinalScale({type}) {
   return type === "ordinal" || type === "point" || type === "band" || type === ordinalImplicit;
 }
 
-function isThresholdScale({type}) {
+export function isThresholdScale({type}) {
   return type === "threshold";
 }
 

test/legends/legends-test.ts

@@ -7,8 +7,10 @@ it(`Plot.legend({color: {type: "identity"}}) returns undefined`, () => {
 });
 
 it(`Plot.legend({legend: "swatches", color: {type: "<not-ordinal>"}}) throws an error`, () => {
-  assert.throws(() => Plot.legend({legend: "swatches", color: {type: "linear"}}), /swatches legend requires ordinal color scale \(not linear\)/);
-  assert.throws(() => Plot.legend({legend: "swatches", color: {type: "diverging"}}), /swatches legend requires ordinal color scale \(not diverging\)/);
+  assert.throws(() => Plot.legend({legend: "swatches", color: {type: "linear"}}), /swatches legend requires ordinal/);
+  assert.throws(() => Plot.legend({legend: "swatches", color: {type: "linear"}}), /\(not linear\)/);
+  assert.throws(() => Plot.legend({legend: "swatches", color: {type: "diverging"}}), /swatches legend requires ordinal/);
+  assert.throws(() => Plot.legend({legend: "swatches", color: {type: "diverging"}}), /\(not diverging\)/);
 });
 
 it("Plot.legend({}) throws an error", () => {

test/output/colorLegendQuantileSwatches.html

@@ -0,0 +1,41 @@
+<div class="plot" style="--swatchWidth: 15px; --swatchHeight: 15px; font-variant: tabular-nums;">
+  <style>
+    .plot {
+      font-family: system-ui, sans-serif;
+      font-size: 10px;
+      margin-bottom: 0.5em;
+      margin-left: 0px;
+    }
+
+    .plot-swatch svg {
+      width: var(--swatchWidth);
+      height: var(--swatchHeight);
+      margin-right: 0.5em;
+    }
+
+    .plot {
+      display: flex;
+      align-items: center;
+      min-height: 33px;
+      flex-wrap: wrap;
+    }
+
+    .plot-swatch {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 1em;
+    }
+  </style><span class="plot-swatch"><svg fill="#320a5e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>200</span><span class="plot-swatch"><svg fill="#781c6d" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>800</span><span class="plot-swatch"><svg fill="#bc3754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>1,800</span><span class="plot-swatch"><svg fill="#ed6925" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>3,201</span><span class="plot-swatch"><svg fill="#fbb61a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>5,001</span><span class="plot-swatch"><svg fill="#fcffa4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>7,201</span>
+</div>

test/plots/legend-color.js

@@ -178,7 +178,7 @@ export function colorLegendThresholdTickSize() {
   });
 }
 
-// This quantile scale is implicitly converted to a threshold scale!
+// Quantile scales are implicitly converted to threshold scales.
 export function colorLegendQuantile() {
   return Plot.legend({
     color: {
@@ -192,7 +192,6 @@ export function colorLegendQuantile() {
   });
 }
 
-// This quantile scale is implicitly converted to a threshold scale!
 export function colorLegendQuantileImplicit() {
   return Plot.plot({
     color: {
@@ -208,7 +207,21 @@ export function colorLegendQuantileImplicit() {
   }).legend("color");
 }
 
-// Quantize scales are implicitly converted to a threshold scale
+export function colorLegendQuantileSwatches() {
+  return Plot.legend({
+    legend: "swatches",
+    color: {
+      type: "quantile",
+      scheme: "inferno",
+      domain: d3.range(100).map(i => i ** 2),
+      n: 7,
+      label: "Inferno"
+    },
+    tickFormat: ",d"
+  });
+}
+
+// Quantize scales are implicitly converted to threshold scales.
 export function colorLegendQuantize() {
   return Plot.legend({
     color: {