Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Zzlastefcia
Last edited Sep 25, 2020
Created on Sep 25, 2020

This example demonstrates two SVG legends for mapping data to visual channels. The color legend uses a `scaleOrdinal` with domain categories and a range of colors, while the size legend uses `scaleSqrt` with five ticks to show proportional circle radii. Both legends are implemented as reusable functions, `colorLegend` and `sizeLegend`, which bind data to groups and update circles and text elements. The code uses D3 v5 selections, `enter`/`merge`/`exit` patterns, and SVG attributes like `r`, `fill`, and `transform` for layout.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for mapping data to visual properties. The color legend uses a `scaleOrdinal` to map categorical names to colors, while the size legend uses a `scaleSqrt` to map numeric values to circle radii with tick marks. Both legends are implemented as reusable functions that append SVG `<g>` elements containing circles and text labels. The code uses D3 v5's selection and merge pattern to efficiently update the legend elements.

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

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in SVG. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct fill colors, with labeled circles spaced vertically. The size legend uses `scaleSqrt` to encode numeric values in circle radius, showing five ticks from 0 to 10 with semi-transparent black fills. Both legends are built with D3 v5’s `selection.call()`, `scaleOrdinal`, and `scaleSqrt`, positioning groups via translate transforms and entering/exiting DOM nodes dynamically. The code exports `colorLegend` and `sizeLegend` as functions for modular reuse.

ZZhang Shengli
93% match
Loading thumbnail…

color and size legends

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.

AAndrew Fletcher
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend techniques for encoding data values. The color legend maps ordinal categories like "apple" and "lemon" to distinct colors using `d3.scaleOrdinal`. The size legend uses `d3.scaleSqrt` to translate a continuous numeric range from 0 to 10 into proportional circle radii, with tick labels derived from the scale's `.ticks()` method. Both legends are built as custom SVG components that render groups of circles and text, with the size legend's circles using a semi-transparent fill. The code relies on D3 v5's selection and merge APIs, and the `d3.select` function, to efficiently create and update the SVG elements.

RRubens
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two interactive legends for mapping data to visual channels in D3 v5. A color legend uses `scaleOrdinal` to associate fruit names with distinct hues, while a size legend employs `scaleSqrt` to encode numeric values through circle radii. Both legends animate their tick marks using `transition().duration(3000)` as they enter or update. The code implements custom legend components through D3 selections and data joins, rendering SVG circles and text elements with configurable spacing and offsets.

Cceresfin
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
Loading thumbnail…

Color and Size Legends

The example shows two legends for mapping data to visual encodings: one for color using ordinal categories and one for size using a square-root scale. It renders SVG elements via D3 v5, with the color legend displaying discrete fruit names mapped to distinct hues, while the size legend displays a reversed set of numeric ticks with proportional circle radii. Reusable functions `colorLengend` and `sizeLengend` manage enter, update, and exit selections for the legends.

LLex
92% match