opacity legend

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,8 +1,10 @@
 import {normalizeScale} from "./scales.js";
 import {legendColor} from "./legends/color.js";
+import {legendOpacity} from "./legends/opacity.js";
 
 const legendRegistry = new Map([
-  ["color", legendColor]
+  ["color", legendColor],
+  ["opacity", legendOpacity]
 ]);
 
 export function legend(options = {}) {

src/legends/opacity.js

@@ -0,0 +1,11 @@
+import {legendColor} from "./color.js";
+
+export function legendOpacity({type, interpolate, ...scale}, {legend = "ramp", ...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}, {legend, ...options});
+}
+
+function interpolateOpacity(t) {
+  return `rgba(0,0,0,${t})`;
+}

test/output/opacityLegend.svg

@@ -52,7 +52,6 @@ export {default as industryUnemployment} from "./industry-unemployment.js";
 export {default as industryUnemploymentShare} from "./industry-unemployment-share.js";
 export {default as industryUnemploymentStream} from "./industry-unemployment-stream.js";
 export {default as learningPoverty} from "./learning-poverty.js";
-export * from "./legend-color.js";
 export {default as letterFrequencyBar} from "./letter-frequency-bar.js";
 export {default as letterFrequencyCloud} from "./letter-frequency-cloud.js";
 export {default as letterFrequencyColumn} from "./letter-frequency-column.js";
@@ -129,3 +128,6 @@ export {default as usRetailSales} from "./us-retail-sales.js";
 export {default as usStatePopulationChange} from "./us-state-population-change.js";
 export {default as wordCloud} from "./word-cloud.js";
 export {default as wordLengthMobyDick} from "./word-length-moby-dick.js";
+
+export * from "./legend-color.js";
+export * from "./legend-opacity.js";

test/output/opacityLegendLinear.svg

@@ -0,0 +1,21 @@
+import * as Plot from "@observablehq/plot";
+
+export function opacityLegend() {
+  return Plot.legend({opacity: {domain: [0, 10], label: "Quantitative"}});
+}
+
+export function opacityLegendRange() {
+  return Plot.legend({opacity: {domain: [0, 1], range: [0.5, 1], label: "Range"}});
+}
+
+export function opacityLegendLinear() {
+  return Plot.legend({opacity: {type: "linear", domain: [0, 10], label: "Linear"}});
+}
+
+export function opacityLegendLog() {
+  return Plot.legend({opacity: {type: "log", domain: [1, 10], label: "Log"}});
+}
+
+export function opacityLegendSqrt() {
+  return Plot.legend({opacity: {type: "sqrt", domain: [0, 1], label: "Sqrt"}});
+}