opacity legend (#587)

* opacity legend

* add color option

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

README.md

@@ -258,7 +258,7 @@ Continuous color legends are rendered as a ramp, and can be configured with the
 
 #### Plot.legend({[*name*]: *scale*, ...*options*})
 
-Returns a legend for the given *scale* definition, passing the options described in the previous section. The only supported name for now is *color*.
+Returns a legend for the given *scale* definition, passing the options described in the previous section. Currently supports only *color* and *opacity* scales. An opacity scale is treated as a color scale with varying transparency.
 
 ### Position options
 

src/legends.js

@@ -1,14 +1,17 @@
 import {normalizeScale} from "./scales.js";
 import {legendColor} from "./legends/color.js";
+import {legendOpacity} from "./legends/opacity.js";
+import {isObject} from "./mark.js";
 
 const legendRegistry = new Map([
-  ["color", legendColor]
+  ["color", legendColor],
+  ["opacity", legendOpacity]
 ]);
 
 export function legend(options = {}) {
   for (const [key, value] of legendRegistry) {
     const scale = options[key];
-    if (scale != null) {
+    if (isObject(scale)) { // e.g., ignore {color: "red"}
       return value(normalizeScale(key, scale), legendOptions(scale, options));
     }
   }

src/legends/opacity.js

@@ -0,0 +1,19 @@
+import {rgb} from "d3";
+import {legendColor} from "./color.js";
+
+const black = rgb(0, 0, 0);
+
+export function legendOpacity({type, interpolate, ...scale}, {
+  legend = "ramp",
+  color = black,
+  ...options
+}) {
+  if (!interpolate) throw new Error(`${type} opacity scales are not supported`);
+  if (`${legend}`.toLowerCase() !== "ramp") throw new Error(`${legend} opacity legends are not supported`);
+  return legendColor({type, ...scale, interpolate: interpolateOpacity(color)}, {legend, ...options});
+}
+
+function interpolateOpacity(color) {
+  const {r, g, b} = rgb(color) || black; // treat invalid color as black
+  return t => `rgba(${r},${g},${b},${t})`;
+}

src/mark.js

@@ -173,12 +173,15 @@ export function arrayify(data, type) {
     : (data instanceof type ? data : type.from(data)));
 }
 
+// Disambiguates an options object (e.g., {y: "x2"}) from a primitive value.
+export function isObject(option) {
+  return option && option.toString === objectToString;
+}
+
 // Disambiguates an options object (e.g., {y: "x2"}) from a channel value
 // definition expressed as a channel transform (e.g., {transform: …}).
 export function isOptions(option) {
-  return option
-    && option.toString === objectToString
-    && typeof option.transform !== "function";
+  return isObject(option) && typeof option.transform !== "function";
 }
 
 // For marks specified either as [0, x] or [x1, x2], such as areas and bars.