color+symbol legend

observablehq · Jan 6, 2022 · 3daa852 · 3daa852
1 parent b40e779
commit 3daa852
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 69 deletions.
diff --git a/src/legends.js b/src/legends.js
@@ -14,7 +14,7 @@ export function legend(options = {}) {
   for (const [key, value] of legendRegistry) {
     const scale = options[key];
     if (isObject(scale)) { // e.g., ignore {color: "red"}
-      return value(normalizeScale(key, scale), legendOptions(scale, options));
+      return value(normalizeScale(key, scale), legendOptions(scale, options), key => isObject(options[key]) ? normalizeScale(key, options[key]) : null);
     }
   }
   throw new Error("unknown legend type");
@@ -24,7 +24,7 @@ export function exposeLegends(scales, defaults = {}) {
   return (key, options) => {
     if (!legendRegistry.has(key)) throw new Error(`unknown legend type: ${key}`);
     if (!(key in scales)) return;
-    return legendRegistry.get(key)(scales[key], legendOptions(defaults[key], options));
+    return legendRegistry.get(key)(scales[key], legendOptions(defaults[key], options), key => scales[key]);
   };
 }
 
@@ -65,7 +65,7 @@ export function Legends(scales, options) {
   for (const [key, value] of legendRegistry) {
     const o = options[key];
     if (o && o.legend) {
-      legends.push(value(scales[key], legendOptions(scales[key], o)));
+      legends.push(value(scales[key], legendOptions(scales[key], o), key => scales[key]));
     }
   }
   return legends;

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
@@ -26,17 +26,19 @@ export function legendSymbols(symbol, {
   strokeOpacity = 1,
   strokeWidth = 1.5,
   ...options
-} = {}) {
-  fill = maybeColorChannel(fill)[1];
+} = {}, scale) {
+  const [vf, cf] = maybeColorChannel(fill);
+  const [vs, cs] = maybeColorChannel(stroke);
   fillOpacity = maybeNumberChannel(fillOpacity)[1];
-  stroke = maybeColorChannel(stroke)[1];
   strokeOpacity = maybeNumberChannel(strokeOpacity)[1];
   strokeWidth = maybeNumberChannel(strokeWidth)[1];
   return legendItems(
     symbol,
     options,
     selection => selection.append("svg")
         .attr("viewBox", "-8 -8 16 16")
+        .attr("fill", vf === "color" ? d => scale(vf).scale(d) : null)
+        .attr("stroke", vs === "color" ? d => scale(vs).scale(d) : null)
       .append("path")
         .attr("d", d => {
           const p = path();
@@ -48,9 +50,9 @@ export function legendSymbols(symbol, {
         height: var(--swatchHeight);
         margin-right: 0.5em;
         overflow: visible;
-        fill: ${fill};
+        fill: ${cf};
         fill-opacity: ${fillOpacity};
-        stroke: ${stroke};
+        stroke: ${cs};
         stroke-width: ${strokeWidth}px;
         stroke-opacity: ${strokeOpacity};
       }`