Color and Size Legends

Color and Size Legends

This example demonstrates two reusable legend components built with D3 v5: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend renders colored circles with domain labels, while the size legend displays circles scaled proportionally to tick values with corresponding text offsets. Both legends are implemented as modular functions that append SVG groups and circles, using D3’s selection and merge pattern to handle updates efficiently.

AAegon95

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5: a color legend using an ordinal scale for categorical data (apple, lemon, lime, orange) and a size legend using a square-root scale for continuous numeric values. The color legend renders colored circles with text labels, while the size legend generates circles whose radii correspond to tick values, filtering out zero. Both legends are implemented as reusable functions that append SVG groups, using `scaleOrdinal` and `scaleSqrt` to map data domains to visual properties, with spacing and text offsets controlled by configuration props.

PPhilRG

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend and a size legend. The color legend maps categorical domain values like ‘apple’ and ‘lemon’ to distinct fill colors using `scaleOrdinal`, while the size legend visualizes a continuous numeric range with `scaleSqrt`, rendering circles whose radii grow proportionally. Both legends use SVG groups and the enter–update–exit pattern to bind data, with ticks and text labels positioned via transform attributes. The size legend filters out zero and reverses tick order for clarity.

MMunTatt Yap

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for quantitative scales. The color legend maps fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric ticks as proportional circle radii. Both legends are rendered as SVG groups with circles and text, using `.call()` to apply the component functions. The size legend filters out zero values and reverses tick order to display larger circles first.

Nnkohdatavis

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations. The color legend maps a categorical color scale to labeled circles, while the size legend uses a square-root scale to vary circle radii across numeric ticks. Both legends are implemented as custom D3 functions (`colorLegend` and `sizeLegend`) that append SVG groups with circles and text. The code uses `d3.scaleOrdinal` and `d3.scaleSqrt` to define the scales, and the rendering is done with SVG elements on a 960×500 canvas.

Hhenry1987

Color and Size Legend

This example demonstrates two custom legend components built with D3 v5: a categorical color legend for fruit categories and a quantitative size legend for a numeric scale. The color legend maps ordinal domain values to a range of colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to translate tick values into circle radii. Both legends render as SVG groups with circles and text labels, with spacing and offsets applied via `attr("transform")` and positioned within an `svg` element.

KKazushige Okuma

Color and Size Legends

Two reusable D3 v5 legend components render categorical and quantitative scales side by side in SVG. A color legend uses `scaleOrdinal` to map fruit names to colored circles, while a size legend uses `scaleSqrt` with `ticks` to display varying radii for a numeric domain. Both components handle enter, update, and exit selections via `selection.data`, `merge`, and exit removal, positioning circles and labels with spacing and text offsets.

ZZ-Richard

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