Skip to main content
SimilarExport ZIP
100%

Color Legends !

✓ Published1🌍 Public
SShareSha
Last edited Apr 14, 2020
Created on Apr 14, 2020

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.

AI-generated description
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

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

Color and Size Legends

A static SVG legend demonstrates categorical color mapping and fixed circle sizing using D3 v5 and React. The `colorLegend` function renders colored circles for fruit categories (`apple`, `lemon`, `lime`, `orange`) via `scaleOrdinal`, with text labels positioned by `textOffset`. The code uses D3 selections (`selectAll`, `enter`, `merge`, `exit`) to bind data, setting circle fills from the color scale and spacing items vertically. The legend appears at a translated SVG coordinate, with font size and anchor attributes applied to text elements.

Ccathykan
88% match