Color and Size Legends

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales in D3 v5. The color legend uses a `scaleOrdinal` with fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups using custom reusable functions that bind data to enter/merge/exit selections, positioning circles and text labels with transform attributes and spacing offsets.

MMounikaBeerelly

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

Color and Size Legends

This example demonstrates how to construct separate color and size legends for ordinal and quantitative scales. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` with `ticks` to display five circle radii. Both legends are built with reusable functions that append SVG `<g>` groups, circles, and text elements. The code uses D3 v5 APIs including `selection.call`, `selection.merge`, and `selection.exit` to update legend components dynamically.

YYF

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales using D3 v5. The color legend displays four fruit categories with distinct colored circles, while the size legend uses a square root scale to show five tick values with proportionally sized semi-transparent circles. Both legends are built with reusable functions that bind data to SVG groups, using `selection.merge` and `transition.attr` for smooth updates. The SVG output uses class-based styling for tick text and circles.

Ggilbster

Color and Size Legends

This example demonstrates two legends: a color legend for ordinal data and a size legend for quantitative data. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` with five ticks to map numeric values to circle radii. Both legends are rendered as SVG groups using reusable functions that handle enter, update, and exit selections. The code relies on D3 v5’s `selection.call`, `selection.merge`, and scale methods to create interactive-looking, standalone legend components.

Ggregosaure

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

Color and Size Legends

This example demonstrates how to create reusable color and size legends in D3 v5. It uses two custom functions, `colorLegend` and `sizeLegend`, to render ordinal color scales and square-root size scales as SVG groups. The color legend maps fruit categories to distinct fills, while the size legend displays tick values with proportional circle radii. Both legends use D3’s selection joins and scale APIs (`scaleOrdinal`, `scaleSqrt`) to update efficiently.

Ooptimizeresume

Color and Size Legends

This example demonstrates how to create categorical color legends and quantitative size legends using D3.js v5’s `scaleOrdinal` and `scaleSqrt` APIs. The color legend maps fruit names to distinct hues, while the size legend encodes numeric values through circle radii using a square root transformation, with tick marks generated from the scale’s `ticks` method. Both legends are rendered as SVG groups containing circles and text, using the nested general update pattern to handle enter/update/exit transitions efficiently.

NNico Donovan