Sequential Color Legend in D3

100%

Sequential Color Legend in D3

✓ Published0🌍 Public

Last edited Mar 5, 2026

Created on Sep 27, 2022

This example demonstrates how to generate a sequential color legend using Susie Lu’s d3-legend library. It renders a small SVG with a legend title and five color cells, mapping a domain of seven distance values to a red interpolator via `d3.scaleSequential` and `d3.interpolateReds`. The legend is created with `d3.legendColor()`, configured with a title and scale, and attached to an SVG group using a standard D3 selection and `.call()`. The chart uses D3 v7 and d3-legend v2.25.6, rendering entirely as inline SVG.

AI-generated description

Demonstration of the use of Susie Lu's d3-legend to display a color legend that uses a sequential color scale.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates how to create a continuous color legend using D3’s `d3.scaleSequential` with the interpolator `d3.interpolateViridis`. The legend is rendered as a vertical gradient bar on a Canvas element, where each pixel’s color is drawn with the Canvas 2D API. An SVG overlay adds a `d3.axisRight` for numeric tick labels, with the color scale domain set from 0 to 7. The code uses D3 v5 with the d3-scale-chromatic module for interpolators.

Mmkt-ds

80% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend and a size legend. The color legend maps categorical domain values like ‘apple’ and ‘lemon’ to distinct fill colors using `scaleOrdinal`, while the size legend visualizes a continuous numeric range with `scaleSqrt`, rendering circles whose radii grow proportionally. Both legends use SVG groups and the enter–update–exit pattern to bind data, with ticks and text labels positioned via transform attributes. The size legend filters out zero and reverses tick order for clarity.

MMunTatt Yap

77% match

Loading thumbnail…

Color Legends !

This example presents a reusable color legend component built with D3 v5. The visualization displays four categorical color swatches—apple, lemon, lime, and orange—using circles filled via a `scaleOrdinal` color scale. The `colorLegend` function, exported from `colorLegend.js`, appends grouped circle and text elements to an SVG, with spacing, text offset, and circle radius configured through its props. The legend is transformed into position using a `translate` attribute and rendered with the d3 `select` and `call` methods.

SShareSha

77% match

Loading thumbnail…

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

SShane Carey

77% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli

77% match

Loading thumbnail…

D3 Color and Size Legends

This example demonstrates two reusable D3 legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories as colored circles with labels, while the size legend visualizes numeric values through scaled circle radii. Both components use D3’s selection join pattern with `selection.enter` and `selection.merge` to update elements. The size legend relies on `scaleSqrt.ticks` to generate tick values, while the color legend maps ordinal domain values to a range of colors via `scaleOrdinal`.

Rrdeichert

77% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

TThomas Seberechts

77% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in SVG. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct fill colors, with labeled circles spaced vertically. The size legend uses `scaleSqrt` to encode numeric values in circle radius, showing five ticks from 0 to 10 with semi-transparent black fills. Both legends are built with D3 v5’s `selection.call()`, `scaleOrdinal`, and `scaleSqrt`, positioning groups via translate transforms and entering/exiting DOM nodes dynamically. The code exports `colorLegend` and `sizeLegend` as functions for modular reuse.

ZZhang Shengli

77% match