Color Legend

100%

✓ Published1🌍 Public

Last edited Jul 30, 2020

Created on Jul 30, 2020

Forked from Bowl of fruit. General update pattern

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color Legend

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.

CChristine Lanser

92% 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 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 legend horizontal

A horizontal legend displays ordinal color and size encoding for two fruit categories, apple and lemon, using distinct red and yellow circles. Built with D3 v6, the visualization applies `scaleOrdinal` to map domain values to colors and a custom `colorLegend` function to position each legend item along the x-axis. SVG groups contain circles and text labels, with spacing and offsets controlled by passed properties, while the legend updates cleanly through enter/merge/exit selections.

JJoachim Klug

88% match

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

88% match

Loading thumbnail…

Color and size legends

A color legend maps fruit types to both color and size, displaying apples in red and lemons in yellow. Two sets of text labels appear, one above the circles and one below, using d3.scaleOrdinal for color encoding and a custom radius scale for sizing. The example builds SVG circles and text elements with D3 v5, using data joins and merge operations to update the legend.

1123fischer

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