Skip to main content
SimilarExport ZIP
100%

Colour and Size Legends

✓ Published1🌍 Public
Ppkcesar
Last edited Jul 7, 2020
Created on Jul 7, 2020

This example demonstrates two types of map legends rendered as SVG. A color legend for an ordinal scale shows four fruit categories with distinct colors, while a size legend for a square-root scale displays five circular symbols whose radii encode numeric values. The code builds reusable legend components using D3 v5 selection methods, including `selectAll`, `enter`, and `merge`, with scales from `scaleOrdinal` and `scaleSqrt`. Both legends are positioned manually via `translate` and styled with CSS classes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Colour and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend displaying an ordinal scale with fruit names and assigned colors, and a size legend using a square-root scale to map numeric values to circle radii. The code uses D3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and `selection.call` to bind the legend functions. Each legend updates through data joins, with circles and text elements positioned using transform attributes and spacing constants.

Jjrodg
95% match
Loading thumbnail…

colour and size legends

This example demonstrates two separate SVG legends: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend using a square-root scale with circular marks whose radii encode numeric values. The color legend renders colored circles for each category, while the size legend displays five ticks with proportional circle sizes and labels offset by the scaled radius. Both legends use reusable functions (`colorLegend` and `sizeLegend`) built with D3 v5, leveraging `selectAll`, `enter`, `merge`, and `exit` for data joins, with SVG elements styled via CSS.

KKurt J Nilsen
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

Aannadehtiarova
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Ddaigokawabe
94% 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
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom D3.js legend components rendered as SVG. A color legend uses `scaleOrdinal` with categorical domains to map fruit names to distinct colors, while a size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are built by dynamically appending `g` groups with circle and text elements, using D3's enter/merge/exit pattern for updates. The code relies on D3 v5 selection methods and scale APIs to generate the visual encodings.

PPabloReyesBetanzo
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend designs for SVG visualizations: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to represent numeric values through circle radii. The color legend renders four labeled circles with custom spacing, while the size legend generates five ticks with varying circle sizes and text offsets. Both legends are built using D3 v5 data joins, scaleOrdinal, scaleSqrt, and explicit enter/merge/exit patterns, with styling applied through CSS classes on tick groups.

0007ebey
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

TThomas Seberechts
93% match