Skip to main content
SimilarExport ZIP
100%

Color Legend

✓ Published1🌍 Public
CChristine Lanser
Last edited Nov 12, 2020
Created on Oct 7, 2020

A categorical color legend maps fruit names to colored circles using an ordinal scale. The legend renders as a vertical list of four circles, each paired with a text label, with spacing controlled by a parameter. The code uses d3.scaleOrdinal and d3-selection to bind data to SVG groups, appending circles and text elements. The colorLegend function is invoked via selection.call, with the legend positioned by an SVG transform.

AI-generated description

creating Color and Size Legends

MIT Licensed

Similar vizzes

Loading thumbnail…

Color Legend

A color legend maps fruit names to colors via an ordinal scale. Circles display red, yellow, light green, and orange for apple, lemon, lime, and orange respectively. The legend is built with `d3.scaleOrdinal` and rendered with SVG, using D3's selection API in functional style. The SVG element is selected and sized from the HTML attributes, and the legend is positioned in a vertical layout with animated enter/exit transitions.

AAlex Arobelidze
92% 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
91% match
Loading thumbnail…

Color and Size Legends

A legend example displays categorical color scales using D3 v6’s scaleOrdinal, rendering SVG circles and text labels. Each circle’s fill is mapped directly from the color scale’s domain, while a text offset places labels beside the markers. The colorLegend function accepts a color scale and spacing properties, using selection.merge and enter/update patterns to manage the DOM. Data originates from a hardcoded array of fruit names, with no external dataset loaded.

Hhanulik.ondrej@gmail.com
90% match
Loading thumbnail…

Color and size legends

A vertical color legend displays four fruit categories—apple, lemon, lime, and orange—as colored circles, with each fruit’s name placed to the right. The legend is generated using D3 v5’s `scaleOrdinal` for color mapping and a custom `colorLegend` function that binds data to SVG groups, appending circles and text elements with computed spacing and offsets. All shapes are rendered as SVG elements within a 960×500 viewport, with styling defined in an external CSS file.

CClara Hu
89% 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
89% match
Loading thumbnail…

Color and Size Legends

Four ordinary categorical color swatches form a simple legend for fruit types. Each circle is rendered with a distinct fill from an ordinal color scale, and its label appears below it. The example demonstrates how to build a reusable legend component by binding the color scale’s domain to SVG circles and text elements. It uses D3’s `select`, `scaleOrdinal`, and the custom `colorLegend` function to position groups horizontally and update them reactively.

Hhenry1987
89% match
Loading thumbnail…

Legend

This example demonstrates a reusable categorical color legend with colored circles and matching text labels for fruit categories. Using D3 v5, the `colorLegend` function creates a group per domain value, binds circles and text, and positions them with a vertical spacing transform. A `scaleOrdinal` maps the domain to a color range, with the legend called via `selection.call()`. The SVG rendering applies styled ticks and circle strokes from an external stylesheet.

Rrigt
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