Color Legend

100%

Color Legend - Swatches

✓ Published0🌍 Public

Last edited Sep 21, 2020

Created on Sep 21, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

Color Legend

This example demonstrates how to create color and size legends in D3 v5 using reusable functions. It shows ordinal color scaling mapping fruit names to pastel colors, and a square-root size scale with transitioning circles. The SVG rendering includes animated transitions on the size legend, while text labels accompany each legend entry. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3's selection join pattern with `.enter()` and `.merge()`.

LLudovicGouverneur

88% match

Loading thumbnail…

Color legend

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.

EEngine194

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

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

87% match

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

87% match