d3 color-legend example

100%

d3 color-legend example

✓ Published0🌍 Public

Last edited May 6, 2020

Created on Dec 7, 2023

This example shows how to render a D3 ordinal color scale as a legend of colored swatches in a plain HTML page, using the `swatches` function from the Observable `@d3/color-legend` notebook. The color scale and margin values come from the stacked-area-chart example, with categories like “Manufacturing” and “Government” mapped to `d3.schemeCategory10`. It imports the Observable `Runtime` and loads the notebook’s cell via `module.value("swatches")`, then appends the returned DOM element to a container. The legend uses a fixed column width of 180 pixels.

AI-generated description

In response to a question on Twitter by @everybody_kurts:

“Hi @mbostock, I was looking at your stacked area chart at https://observablehq.com/@d3/stacked-area-chart. At the end of the file, you import swatches from "@d3/color-legend". I tried finding this on npmjs but to no avail. Is this exclusive to @observablehq only?”

This shows how to use the swatches function from the @d3/color-legend notebook in a plain HTML page. The example data for the swatches (the color scale and margin) is copied from the @d3/stacked-area-chart notebook.

Similar vizzes

Loading thumbnail…

Color Legends

A color legend maps ordinal categories to hues, displaying two large circular swatches for "apple" and "lemon" against a white background. The `d3.scaleOrdinal` assigns red and yellow, while a custom `colorLegend` function binds the scale's domain to SVG groups. Circles and text labels are appended and updated via enter/merge/exit selections, with transform positions calculated from array index and a fixed height. The example demonstrates reusable D3 v5 code for building legends with dynamic scaling.

AAli Ahmed

81% 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

81% match

Loading thumbnail…

Color Legend - Swatches

A set of colored squares arranged in a vertical list functions as an ordinal color legend, mapping fruit names to distinct hues. The visualization demonstrates reusable legend logic through D3 v5, using `scaleOrdinal` for the color mapping and SVG `<rect>` elements for the swatches. The custom `colorLegend` function creates an enter-merge-exit pattern to bind data, with each row positioned via a translate transform. Text labels are placed beside each square, with spacing controlled by `circleRadius`, `circleSpacing`, and `textOffset` parameters.

MMaciek Sitkowski

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a straightforward color legend using D3's ordinal scale, displaying three categories—blueberries, oranges, and apples—each assigned a color from the `d3.schemeCategory10` palette. The visualization renders swatches and labels via the `Swatches` function, which builds an HTML structure with inline styles for swatch dimensions and text formatting. The code imports `select` from D3 and applies the `swatches` helper to generate the legend, relying on D3 v7 loaded from a CDN. The page itself is minimal, centering the legend with a large font size, showcasing a simple starter template for D3-based data displays.

謝謝惠喻

80% 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

79% match

Loading thumbnail…

legend

This example displays a four-category ordinal legend for values from “Insignificant” to “High,” rendered as colored squares with adjacent text labels inside an SVG. It uses a custom `d3.legend()` function built with `d3.scaleOrdinal` to map domain values to color ranges, and appends the legend to a blank SVG canvas via a D3 selection. The legend’s position and colors are configurable through `.translate()` and `.colors()`, and a callback logs “Done!” after rendering. The code includes a separate `d3.legend.js` file and relies on D3 v4.

MMTClass

79% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can visually encode data through both color and size. It uses a D3 ordinal color scale to map the categories "apple" and "lemon" to red and yellow swatches, while fixed circle radii and text offsets in the custom `colorLegend` function control the legend’s spatial layout. The SVG-based visualization is rendered using D3 v5, with the legend positioned via an SVG transform and styled through external CSS.

Pprincit

79% match

Loading thumbnail…

D3 Legend Example

This example demonstrates how to create a color legend using the d3-legend library in conjunction with ColorBrewer color scales. The visualization renders an SVG-based legend with a series of colored swatches, each paired with a text label. The color palette is drawn from ColorBrewer's sequential schemes, providing visually distinct and perceptually uniform colors. The example highlights how to integrate a third-party legend library with D3's SVG rendering to efficiently produce clean, customizable legends for data visualizations.

CCurran Kelleher

78% match