Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
NNico Donovan
Last edited Jul 17, 2020
Created on Jul 16, 2020

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.

AI-generated description

creating a color legend component

encoding area using a square root scale

computing ticks from size scale

creating a size legend component

tweaking the styles

MIT Licensed

Similar vizzes

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

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales using D3 v5. A color legend maps fruit names to distinct colors with equally spaced circles, while a size legend displays circular markers whose radii scale proportionally to numeric values using `scaleSqrt`. Both legends are implemented as reusable functions via `selection.call()`, with the color legend using `scaleOrdinal` and the size legend using `scaleSqrt().ticks()` to generate tick values. The SVG rendering includes custom text and circle styling defined in external CSS.

PPaul Kumar
95% match
Loading thumbnail…

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

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

Color and Size Legends

This example demonstrates two methods for building interactive legends in D3.js v5: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to distinct colors, while the size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via `translate` transforms. The reusable legend functions (`colorLegend` and `sizeLegend`) accept configuration objects specifying spacing, circle radius, and tick counts, allowing flexible customization within a single SVG canvas.

KKarkG
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct types of chart legends created with D3.js v5: a color legend using an ordinal scale mapping fruit names to specific colors, and a size legend using a square-root scale to map numeric tick values to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned programmatically via `attr('transform')` calls. The color legend uses `scaleOrdinal` for categorical colors, while the size legend uses `scaleSqrt` and `ticks()` to generate evenly spaced, non-zero values, with circles filled using a semi-transparent black.

Ppanmenghan
95% match