Skip to main content
SimilarExport ZIP
100%

color and size legends

✓ Published0🌍 Public
AAndrew Fletcher
Last edited Jan 24, 2020
Created on Jan 24, 2020

This example demonstrates two distinct legend types for mapping data to visual channels. A color legend displays a categorical scale with ordinal values (apple, lemon, lime, orange) mapped to distinct hues, while a size legend uses a square-root scale to encode quantitative values from 0 to 10 through circle radius. Both legends are rendered as SVG groups using D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data-join patterns, with ticks generated via `sizeScale.ticks()`. Orange circles and text labels are positioned with translated group elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Colour and Size Legends

This example demonstrates two distinct legend types for mapping data to visual encodings. A color legend displays ordinal categories—apple, lemon, lime, and orange—paired with distinct hues using `d3.scaleOrdinal`. Adjacent to it, a size legend uses `d3.scaleSqrt` to map a continuous numeric domain from 0 to 10 to circle radii, filtering out zero and reversing tick order for display. Both legends are built with reusable D3 functions that append SVG groups, circles, and text elements, with tick styling applied via CSS classes.

Ccornshoots
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends: a color legend for ordinal categories (apple, lemon, lime, orange) and a size legend for a square-root scale mapping values 0–10 to circle radii. Both legends use SVG groups with tick marks, rendered via D3 v6’s `scaleOrdinal` and `scaleSqrt`, and are constructed through reusable functions that append circles and labels with dynamic positioning. The color legend assigns categorical colors, while the size legend computes tick values using `sizeScale.ticks`, filters out zero, and reverses the order. Styling is applied through CSS classes for text and circle strokes.

HHe Jianfeng
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

WWarren-Fitzhenry
94% 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
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations: a color legend mapping ordinal categories (apple, lemon, lime, orange) to distinct hues, and a size legend using a square-root scale to represent numeric values. The color legend renders colored circles with labels, while the size legend positions circles of varying radii with tick marks. Both use SVG groups and the `selection.merge` pattern for enter-update-exit handling, with styling applied via the `.tick` class.

Eexcalibur1987
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends built with D3 v5: a color legend for an ordinal scale and a size legend for a square-root scale. The color legend maps fruit names to distinct colors, while the size legend uses `sizeScale.ticks` to generate five circle radii. Both legends are rendered as SVG groups, with circles and text positioned using `spacing` and `textOffset` parameters from custom `colorLegend` and `sizeLegend` modules.

Aanuj1450
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct custom legends for both color and size encodings in D3 v5 with SVG rendering. The color legend displays four ordinal categories—apple, lemon, lime, and orange—using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to map numeric tick values to circle radii. Both legends use reusable functions that bind data to groups, append circles and text, and position them with translate transforms.

CCurran Kelleher
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types: a color legend with ordinal categories for fruits and a size legend with a square-root scale mapping numeric values to circle radii. Using D3 v5, it renders SVG circles and text labels, with the color legend employing `scaleOrdinal` and the size legend using `scaleSqrt` with tick generation. The size legend positions circles based on cumulative radius sums with spacing, while both legends use reusable functions (`colorLegend` and `sizeLegend`) called via D3’s selection `.call()` pattern.

GGuillaume Calmettes
93% match