SizeLegend

A nested-circle legend for a size scale: concentric circles sharing a bottom tangent, each labeled with the value its radius encodes.

Charts that size marks by a size accessor (bubble plots, Geomap points, Network, Rings) draw one automatically in their bottom-right corner (see sizeLegend and sizeLegendConfig on the chart). On its own, give it any d3 continuous scale that maps values to pixel radii.

Basic example

Give scale any d3 continuous scale that maps values to pixel radii. By default the legend draws three concentric circles, for the domain’s minimum, its maximum, and a round value in between. The circles share a bottom edge, and a short leader line runs from the top of each circle to its label, under a centered title.

const sqrtScale = (domain, range, label) => {
  const [d0, d1] = domain.map(Math.sqrt);
  const scale = v =>
    range[0] + ((Math.sqrt(v) - d0) / (d1 - d0)) * (range[1] - range[0]);
  scale.domain = () => domain;
  scale.invert = r =>
    (((r - range[0]) / (range[1] - range[0])) * (d1 - d0) + d0) ** 2;
  return scale;
};

const config = {
  scale: sqrtScale(
    [10, 1000],
    [4, 40],
    "d3.scaleSqrt().domain([10, 1000]).range([4, 40])",
  ),
  title: "Population",
};

Custom values

values picks which circles to draw: an array of values, or a number for how many to pick automatically. tickFormat formats each label; by default labels use the locale’s abbreviated number format. Labels that would overlap, like those of the two smallest circles here, are pushed apart.

const sqrtScale = (domain, range, label) => {
  const [d0, d1] = domain.map(Math.sqrt);
  const scale = v =>
    range[0] + ((Math.sqrt(v) - d0) / (d1 - d0)) * (range[1] - range[0]);
  scale.domain = () => domain;
  scale.invert = r =>
    (((r - range[0]) / (range[1] - range[0])) * (d1 - d0) + d0) ** 2;
  return scale;
};

const config = {
  scale: sqrtScale(
    [0, 5000000],
    [0, 36],
    "d3.scaleSqrt().domain([0, 5e6]).range([0, 36])",
  ),
  values: [5000000, 2500000, 1000000, 250000],
  tickFormat: d => `$${d / 1e6}M`,
  title: "Annual Revenue",
};

Styled

shapeConfig styles the circles, lineConfig the leader lines, and labelConfig/titleConfig the text. Each object is merged into the defaults, so you only set what you want to change.

const sqrtScale = (domain, range, label) => {
  const [d0, d1] = domain.map(Math.sqrt);
  const scale = v =>
    range[0] + ((Math.sqrt(v) - d0) / (d1 - d0)) * (range[1] - range[0]);
  scale.domain = () => domain;
  scale.invert = r =>
    (((r - range[0]) / (range[1] - range[0])) * (d1 - d0) + d0) ** 2;
  return scale;
};

const config = {
  scale: sqrtScale(
    [1, 100],
    [3, 30],
    "d3.scaleSqrt().domain([1, 100]).range([3, 30])",
  ),
  shapeConfig: {
    fill: "#4269d0",
    fillOpacity: 0.15,
    stroke: "#4269d0",
    strokeWidth: 1.5,
  },
  lineConfig: {stroke: "#4269d0", strokeDasharray: [2, 2]},
  labelConfig: {fontColor: "#4269d0", fontSize: 12},
  title: "Score",
  titleConfig: {fontColor: "#4269d0"},
};

Configuration

import {SizeLegend} from "@d3plus/core";

Extends BaseClass.

Filter 14 config keys

classNamestring | array.<string> | undefined: CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.
colorDefaultscolordefaultsconfig: Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.
configd3plusconfig: Methods that correspond to the key/value pairs and returns this class.
labelConfigsizelegendtextconfig: Font settings for the value labels: fontColor, fontFamily, fontSize. Merged into the current settings.
lineConfigsizelegendlineconfig: Paint for the leader lines: stroke, strokeWidth, strokeOpacity, strokeDasharray. Merged into the current settings.
localestring | object: The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.
onstring: Event listener for the specified event typenames. Mirrors the core d3-selection behavior.
parentunknown: Parent config used by the wrapper.
renderfunction: Renders the legend. Standalone, it paints into the select container (sized to the legend); inside a chart (renderMode("compute")) it only lays out, and the chart composes toScene().
selectstring | htmlelement | svgelement: The container element for a standalone render, as a d3 selector or DOM element.
shapeConfigsizelegendshapeconfig: Paint for the circles: fill, fillOpacity, stroke, strokeWidth, strokeOpacity. Merged into the current settings.
titleConfigsizelegendtextconfig: Font settings for the title: fontColor, fontFamily, fontSize, fontWeight. Merged into the current settings.
toScenenumberDefault 0: Produces a backend-agnostic scene graph of the last layout, offset by the optional transform.
translatefunction: Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.