radius legends

Author: Fil

README.md

@@ -498,7 +498,7 @@ When the *include* or *exclude* facet mode is chosen, the mark data must be para
 
 ## Legends
 
-Plot can generate legends for *color*, *opacity*, and *symbol* [scales](#scale-options). (An opacity scale is treated as a color scale with varying transparency.) For an inline legend, use the *scale*.**legend** option:
+Plot can generate legends for *color*, *radius*, *opacity*, and *symbol* [scales](#scale-options). (An opacity scale is treated as a color scale with varying transparency.) For an inline legend, use the *scale*.**legend** option:
 
 * *scale*.**legend** - if truthy, generate a legend for the given scale
 
@@ -551,6 +551,18 @@ Continuous color legends are rendered as a ramp, and can be configured with the
 * *options*.**marginBottom** - the legend’s bottom margin
 * *options*.**marginLeft** - the legend’s left margin
 
+Radius legends are rendered as circles sharing a same base, and a line connecting each circle to the corresponding tick label. The ticks are computed in a way that guarantees that they are not occluded. Radius legens can be configured with the following options:
+
+* *options*.**label** - the scale’s label
+* *options*.**ticks** - the desired number of ticks, or an array of tick values
+* *options*.**tickFormat** - a function that formats the ticks
+* *options*.**strokeWidth** - the stroke width for the connectors, defaults to 0.5
+* *options*.**strokeDasharray** - the stroke dash-array for the connectors, defaults to [5, 4]
+* *options*.**lineHeight** - the minimum line height, to avoid label occlusion
+* *options*.**gap** — the gap between the circles and the tick labels, defaults to 20 pixels
+* *options*.**className** - a className for the legend
+* *options*.**style** - styles (a string or an object)
+
 ### Plot.legend(*options*)
 
 Returns a standalone legend for the given *scale* definition, passing the *options* described in the previous section. For example:

src/legends.js

@@ -1,13 +1,15 @@
 import {rgb} from "d3";
 import {normalizeScale} from "./scales.js";
 import {legendRamp} from "./legends/ramp.js";
+import {legendRadius} from "./legends/radius.js";
 import {legendSwatches, legendSymbols} from "./legends/swatches.js";
 import {isObject} from "./mark.js";
 
 const legendRegistry = new Map([
   ["color", legendColor],
   ["symbol", legendSymbols],
-  ["opacity", legendOpacity]
+  ["opacity", legendOpacity],
+  ["r", legendRadius]
 ]);
 
 export function legend(options = {}) {

src/legends/radius.js

@@ -0,0 +1,65 @@
+import {plot} from "../plot.js";
+import {link} from "../marks/link.js";
+import {text} from "../marks/text.js";
+import {dot} from "../marks/dot.js";
+import {maybeClassName} from "../style.js";
+
+export function legendRadius(scale, {
+  label = scale.label,
+  ticks = 5,
+  tickFormat = d => d,
+  strokeWidth = 0.5,
+  strokeDasharray = [5, 4],
+  lineHeight = 8,
+  gap = 20,
+  style,
+  className
+}) {
+  className = maybeClassName(className);
+  const s = scale.scale;
+  const r0 = scale.range[1];
+  const shiftY = label ? 10 : 0;
+
+  let h = Infinity;
+  const values = s.ticks(ticks).reverse()
+    .filter((t) => h - s(t) > lineHeight / 2 && (h = s(t)));
+
+  return plot({
+    x: { type: "identity", axis: null },
+    r: { type: "identity" },
+    y: { type: "identity", axis: null },
+    marks: [
+      link(values, {
+        x1: r0 + 2,
+        y1: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY,
+        x2: 2 * r0 + 2 + gap,
+        y2: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY,
+        strokeWidth: strokeWidth / 2,
+        strokeDasharray
+      }),
+      dot(values, {
+        r: s,
+        x: r0 + 2,
+        y: (d) => 8 + 2 * r0 - s(d) + shiftY,
+        strokeWidth
+      }),
+      text(values, {
+        x: 2 * r0 + 2 + gap,
+        y: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY,
+        textAnchor: "start",
+        dx: 4,
+        text: tickFormat
+      }),
+      text(label ? [label] : [], {
+        x: 0,
+        y: 6,
+        textAnchor: "start",
+        fontWeight: "bold",
+        text: tickFormat
+      })
+    ],
+    height: 2 * r0 + 10 + shiftY,
+    className,
+    style
+  });
+}

test/output/radiusLegend.svg

@@ -138,3 +138,4 @@ export {default as wordLengthMobyDick} from "./word-length-moby-dick.js";
 
 export * from "./legend-color.js";
 export * from "./legend-opacity.js";
+export * from "./legend-radius.js";

test/plots/index.js

@@ -0,0 +1,5 @@
+import * as Plot from "@observablehq/plot";
+
+export function radiusLegend() {
+  return Plot.plot({r: {label: "radial", domain: [0, 4500], range: [0, 100]}}).legend("r");
+}