Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
JJustine Giaky Huynh
Last edited Feb 23, 2020
Created on Feb 23, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom legends for both ordinal color scales and quantitative size scales in D3 v5. The color legend displays four fruit categories with distinct colored circles, while the size legend uses a sqrt scale to show proportional circle radii for numeric tick values. The code exports reusable legend functions that use D3’s selection joins, `scaleOrdinal`, `scaleSqrt`, and generated SVG groups with circles and text labels.

KKevinw97
96% 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
95% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates how to create legends for both color and size scales in D3. A color legend displays four fruit categories as colored circles using a `scaleOrdinal`, while a size legend uses a `scaleSqrt` with five tick values to show proportional circle radii. Both legends are built with reusable functions that append SVG groups, circles, and text elements. The code uses D3 v5 selections and scales, with transparent circles and black strokes styled via CSS.

MMuhammad Jarir Kanji
95% match
Loading thumbnail…

Colors and Size Legends

This example demonstrates how to build custom legends for both ordinal color scales and sequential size scales in D3 v5 with SVG rendering. The color legend vertically displays five fruit categories, each with a colored circle and text label, while the size legend uses a square-root scale to show five tick values (10, 8, 6, 4, 2) as proportionally sized circles. The code implements reusable legend functions via `selection.call()`, with `scaleOrdinal`, `scaleSqrt`, and `ticks()` to generate the legend items.

AAsperge-Atomique
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend uses a square-root scale to map numeric values to circle radii. Both legends are built with D3 v5, using `scaleOrdinal` and `scaleSqrt`, with custom functions that handle enter/merge/exit selections. The code imports `select` from D3 and renders the legends via the `call` method.

MMichał Szumnarski
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for visualizing color and size encodings in D3 v5. The color legend displays a categorical scale with fruit names (apple, lemon, lime, orange) using distinct colors, while the size legend uses a square-root scale to represent numeric values from 0 to 10 with proportional circle radii. Both legends are rendered as SVG groups with tick marks, using D3’s selection joins and scales (`scaleOrdinal`, `scaleSqrt`). Circles and text labels are positioned dynamically based on spacing and scale values, with styles defined in external CSS.

Jjesramyep1263
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

MMinwoo Pak
95% 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
95% match