Skip to main content
SimilarExport ZIP
100%

Color size legend with D3.js!

✓ Published0🌍 Public
CCarloWK1202
Last edited Jul 21, 2022
Created on Jul 19, 2022

Two custom D3.js legends display categorical and quantitative mappings side by side. The color legend pairs a nominal `scaleOrdinal` with four fruit names, each linked to a distinct fill color, while the size legend uses a `scaleSqrt` to map numerical values to circle radii. Both legends are built as reusable SVG components, with `selection.selectAll` and `.merge` managing tick groups, and circles receiving graphic attributes directly from their respective scales.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

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

Color and Size Legends

This example demonstrates how to create separate legends for categorical color scales and quantitative size scales in D3.js. A color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a size legend uses `d3.scaleSqrt` to show the relationship between numeric values and circle radii. The legends are built from reusable custom components (`colorLegend` and `sizeLegend`) that generate SVG groups with circles and text labels, using the `enter`/`merge` pattern for efficient updates. Ticks for the size scale are generated via `sizeScale.ticks()` and filtered to exclude zero.

Bbprokopowicz
93% match
Loading thumbnail…

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

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

D3 Color & Size Legends

This example builds two custom legend components for categorical color and quantitative size encodings. The color legend uses `scaleOrdinal` to map fruit names to colors, with SVG circles and text labels. The size legend uses `scaleSqrt` to map a 0-10 domain to circle radii, computing five ticks via `sizeScale.ticks()`, and stacking circles with dynamic vertical offsets so their spacing accounts for their varying diameters. Both components use a merge pattern to update existing SVG groups efficiently.

YYoung Song
92% match
Loading thumbnail…

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
92% match