Color and Size Legends

100%

Color and Size Legends

✓ Published1🌍 Public

Last edited Jan 28, 2020

Created on Jan 28, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates reusable legend components for both categorical color scales and quantitative size scales. It renders four fruit categories (apple, lemon, lime, orange) using a d3.scaleOrdinal with distinct colors, alongside a d3.scaleSqrt size legend with five ticks. Both legends are built with SVG groups, circles, and text elements, using d3 selections and the .call() method to invoke the custom colorLegend and sizeLegend functions. The size legend filters out zero values and reverses tick order for visual clarity.

MMukund Khandelwal

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

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

93% match

Loading thumbnail…

Color and size legends

A standalone SVG legend demonstrates how to encode categorical and quantitative data through color and size. The color legend maps fruit names (apple, lemon, lime, orange) to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric domain from 0 to 10 to circle radii. Both legends are rendered as reusable components via the `colorLegend` and `sizeLegend` functions, positioned with appended SVG groups and `d3.select`. The example relies on D3 v5 and custom tick formatting.

SSagar Malviya

93% match

Loading thumbnail…

Color and Size legends

This example demonstrates how a legend can encode both color and size for categorical data, using a row of fruits and a separate legend of circles to map each fruit type to a specific hue and radius. Built with D3 v5 and rendered as SVG, the `colorLegend` function defines reusable, data-bound groups and circles, while `index.js` applies an ordinal color scale mapping 'apples' and 'lemon' to red and a muted yellow-green. The visualization updates dynamically as data changes, with the legend and circles responding to the same color and radius scales for consistent encoding.

SShane Carey

92% match

Loading thumbnail…

Color and size legends

This example demonstrates how to construct reusable legends for categorical color scales in D3 v5. A color legend maps fruit names to distinct colors using `scaleOrdinal`, rendering circles with corresponding fills and text labels. The legend is implemented as a custom function that leverages D3’s data-join pattern with `selection.merge` to handle updates efficiently. The SVG output positions each legend item vertically with configurable spacing, circle radius, and text offset.

IIgor Borzunov

92% match