ordinal color legend label support

observablehq · Apr 6, 2023 · c87d494 · c87d494
1 parent 44f4f9a
commit c87d494
Show file tree

Hide file tree

Showing 45 changed files with 1,168 additions and 1,042 deletions.
diff --git a/README.md b/README.md
@@ -648,7 +648,8 @@ If there is no scale with the given *scaleName* on the given *plot*, then *plot*
 
 Categorical and ordinal color legends are rendered as swatches, unless *options*.**legend** is set to *ramp*. The swatches can be configured with the following options:
 
-* *options*.**tickFormat** - a format function for the labels
+* *options*.**label** - the scale’s label
+* *options*.**tickFormat** - a format function for the domain values
 * *options*.**swatchSize** - the size of the swatch (if square)
 * *options*.**swatchWidth** - the swatches’ width
 * *options*.**swatchHeight** - the swatches’ height

diff --git a/src/legends.js b/src/legends.js
@@ -39,8 +39,8 @@ export function exposeLegends(scales, context, defaults = {}) {
   };
 }
 
-function legendOptions(context, {label, ticks, tickFormat} = {}, options) {
-  return inherit(options, context, {label, ticks, tickFormat});
+function legendOptions(context, {label, ticks, tickFormat} = {}, options = {}) {
+  return inherit(options, context, {label, ticks, tickFormat, ...options});
 }
 
 function legendColor(color, {legend = true, ...options}) {

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
@@ -89,7 +89,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     columns,
     tickFormat,
     fontVariant = inferFontVariant(scale),
-    // TODO label,
+    label = scale.label,
     swatchSize = 15,
     swatchWidth = swatchSize,
     swatchHeight = swatchSize,
@@ -112,10 +112,23 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       `
     );
 
-  let extraStyle;
+  const hasTitle = label != null && label !== "";
+  const palette = hasTitle
+    ? swatches.call((div) => div.append("div").attr("class", `${className}-title`).text(label)).append("div")
+    : swatches;
+  palette.classed(`${className}-palette`, true);
+
+  let extraStyle = hasTitle
+    ? `
+      .${className}-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }`
+    : "";
 
   if (columns != null) {
-    extraStyle = `
+    extraStyle += `
       .${className}-swatch {
         display: flex;
         align-items: center;
@@ -132,7 +145,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       }
     `;
 
-    swatches
+    palette
       .style("columns", columns)
       .selectAll()
       .data(scale.domain)
@@ -144,10 +157,10 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
         item.append("div").attr("class", `${className}-label`).attr("title", tickFormat).text(tickFormat)
       );
   } else {
-    extraStyle = `
-      .${className} {
+    extraStyle += `
+      .${className}-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -158,7 +171,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       }
     `;
 
-    swatches
+    palette
       .selectAll()
       .data(scale.domain)
       .enter()

diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,27 +35,29 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>IOA</span>
+    </style>
+    <div class="plot-title">nationality</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>IOA</span></div>
   </div><svg class="plot-2" 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>
       .plot-2 {

diff --git a/test/output/athletesSortNullLimit.html b/test/output/athletesSortNullLimit.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,27 +35,29 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>IOA</span>
+    </style>
+    <div class="plot-title">nationality</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>IOA</span></div>
   </div><svg class="plot-2" 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>
       .plot-2 {

diff --git a/test/output/caltrain.html b/test/output/caltrain.html
@@ -1,5 +1,5 @@
 <figure style="max-width: initial;">
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -17,9 +17,9 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }

diff --git a/test/output/colorLegendCategorical.html b/test/output/colorLegendCategorical.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

diff --git a/test/output/colorLegendCategoricalColumns.html b/test/output/colorLegendCategoricalColumns.html
@@ -1,4 +1,7 @@
-<div class="plot" style="--swatchWidth: 15px; --swatchHeight: 15px; columns: 180px;">
+<div class="plot" style="
+        --swatchWidth: 15px;
+        --swatchHeight: 15px;
+      ">
   <style>
     .plot {
       font-family: system-ui, sans-serif;
@@ -13,6 +16,12 @@
       margin-right: 0.5em;
     }
 
+    .plot-title {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 0.4em;
+    }
+
     .plot-swatch {
       display: flex;
       align-items: center;
@@ -30,54 +39,57 @@
       text-overflow: ellipsis;
     }
   </style>
-  <div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Manufacturing">Manufacturing</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Business services">Business services</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Construction">Construction</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Education and Health">Education and Health</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Government">Government</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Finance">Finance</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Self-employed">Self-employed</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Other">Other</div>
+  <div class="plot-title">Industry</div>
+  <div class="plot-palette" style="columns: 180px;">
+    <div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Manufacturing">Manufacturing</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Business services">Business services</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Construction">Construction</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Education and Health">Education and Health</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Government">Government</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Finance">Finance</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Self-employed">Self-employed</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Other">Other</div>
+    </div>
   </div>
 </div>