Color legend

100%

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

A custom color legend displays four ordinal categories—apple, lemon, lime, and orange—as colored circles or squares, rendered with D3 v7's `scaleOrdinal` for domain and range mapping. The legend component supports configurable shapes, spacing, and offsets, using SVG `g`, `rect`, `circle`, and `text` elements. The example demonstrates a reusable legend pattern with enter/merge/exit updates, invoked via `.call(colorLegend.render, {square: false})` to show circular swatches with labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

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

91% match

Loading thumbnail…

Color and size legends

A legend displays a color scale for four fruit categories—apple, lemon, lime, and orange—as colored circles with matching text labels. Built with D3 v5, the example uses `scaleOrdinal` to map domain values to specific colors and a custom `colorLegend` function that binds data to SVG groups via `selection.selectAll` and `enter()`. The legend is rendered with circle radius, spacing, and text offset as configurable props, demonstrating reusable legend components in SVG.

Xxiaoma1002

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

90% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build a color legend using D3 v5, displaying categories apple, lemon, limes, and orange with distinct colors and circular markers. The visualization uses a custom `colorLegend` function that binds ordinal scale domain values to groups, appending circles and text labels with specified spacing and offsets. The code imports `select` and `scaleOrdinal` from D3, applies the legend to an SVG canvas, and sets explicit styling for text, circles, and background in CSS.

Jjay

89% match

Loading thumbnail…

Color and Size Legends

This example demonstrates a reusable legend component for mapping ordinal color scales to categorical data. The visualization renders four fruit categories—apple, lemon, lime, and orange—as colored circles, with each circle’s fill derived from a `scaleOrdinal` and its position spaced vertically via a custom `colorLegend` function. The code uses D3 v5’s `select`, `scaleOrdinal`, and data join pattern to create SVG `<g>` groups containing circles and text labels. The legend is styled with CSS classes for tick elements, and the SVG container includes a border for visual framing.

AApoorv Agnihotri

89% match

Loading thumbnail…

Color and size legend

This example demonstrates a custom color legend for ordinal data, showing categories as colored circles with matching labels. The legend displays two fruit categories, apple and lemon, each assigned a distinct color via `d3.scaleOrdinal`. The visualization uses D3 v5 with an SVG rendering approach, where the `colorLegend` function appends circle and text elements to the SVG canvas. Labels are positioned below the circles, and all elements are centered vertically using the SVG height attribute. The code also includes transition handling for updating the legend dynamically.

ZZhengyan Yu

88% match

Loading thumbnail…

Color Legends

This example shows a reusable color legend component that maps ordinal categories to colored circles with labels. Using d3.scaleOrdinal, it defines a domain of fruit types and a range of colors, rendering each category as a red or yellow circle positioned horizontally with a text label below. The code exports a colorLegend function that leverages D3’s enter, merge, and exit selections to update groups dynamically, while the SVG is populated via d3.select and custom xPosition and height-based transforms.

AAli Ahmed

88% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom legends for both ordinal color scales and continuous size scales in D3 v5. It shows a color legend with four fruit categories (apple, lemon, lime, orange) rendered as colored circles, and a separate size legend with scaled circles representing values from 0 to 10. The code builds reusable legend components using D3’s `scaleOrdinal`, `scaleSqrt`, and `selection.call()`, rendering everything as SVG elements with styled fonts and circle strokes defined in CSS.

JJustine Giaky Huynh

88% match