Color and Size Legends

Color and Size Legends.js

Two reusable legend components render D3 scales as SVG groups. A color legend maps ordinal fruit categories to circle fills using `scaleOrdinal`, while a size legend uses `scaleSqrt` with `ticks()` to generate circle radii. Both employ the enter-merge-exit pattern and rely on `selection.call()` to attach legends to the SVG. Text labels and circles are styled via CSS.

Xxsg13

color and size legends

Two reusable legend components illustrate categorical and quantitative scales in D3 v5. The color legend maps four fruit names through `d3.scaleOrdinal` to distinct hues, displaying circles with aligned text labels. The size legend uses `d3.scaleSqrt` to represent numeric ticks from 0 to 10 as proportionally sized circles. Both legends render in SVG, with the size legend filtering out zero values and reversing tick order. The code demonstrates shared update patterns using `selection.merge` for enter and exit transitions.

JJenny

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in an SVG: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend built from a square-root scale with circular marks sized proportionally to tick values. Both legends use D3 v5’s selection joins to update enter and exit states. The color legend calls `scaleOrdinal`. The size legend uses `scaleSqrt.ticks()` for tick generation.

Ffbudwill

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends use D3 v5’s data join pattern, with Enter and merge selections to update ticks. The size legend calculates tick values via `scale.ticks` and filters out zero.

RResl411

Color and Size Legends

Two reusable legend components demonstrate how D3 scales drive SVG circle size and color. A sequential color legend maps fruit categories to distinct hues via `scaleOrdinal`, while a quantitative size legend uses `scaleSqrt` with `ticks()` to generate proportional radii. Both components animate circle radius changes with `transition().duration(1000)`, handling enter, update, and exit selections through `merge()` and promise-based removal. The example uses D3 v5 selection methods to bind data and render labeled legends with configurable spacing and text offsets.

Ccarlos157oliveira

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

D3 Color and Size Legends

This example demonstrates two reusable D3 legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories as colored circles with labels, while the size legend visualizes numeric values through scaled circle radii. Both components use D3’s selection join pattern with `selection.enter` and `selection.merge` to update elements. The size legend relies on `scaleSqrt.ticks` to generate tick values, while the color legend maps ordinal domain values to a range of colors via `scaleOrdinal`.

Rrdeichert

Color and Size Legends

Two custom reusable legend components in D3 v5 display categorical color scales with colored circles and quantitative size scales with scaled circles. The color legend uses `scaleOrdinal` with fixed domain values like apple and lemon, while the size legend applies `scaleSqrt` with generated ticks. Both render as SVG groups with positioned circles and text labels, demonstrating generic legend creation patterns independent of any particular chart.

IIsabel