Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Feb 18, 2023

Created on Feb 17, 2023

Forked from General Update Pattern and DOM Element Select Event Handling

This example demonstrates how to build both a color legend and a size legend using D3.js v5. The color legend maps ordinal categories (Apple, Lemon, Lime, Orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numerical values from 0 to 10 as circle radii. Both legends implement a general update pattern with `selection.merge()` for enter and exit transitions, rendering circles and text labels in SVG. The ticks for the size legend are generated using `sizeScale.ticks()`, with all elements styled via CSS classes.

AI-generated description

Creating a color legend and a Size Legend with D3.js (based on a tutorial by Curran Kelleher)

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are built with reusable functions that accept `selection` and `props`, appending SVG groups with circles and text labels. The size legend filters out zero values and reverses tick order, displaying five ticks with semi-transparent black circles.

FFlying ACE

96% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. A color legend maps ordinal categories to distinct colors, while a size legend uses a square root scale to represent numeric values with varying circle radii. The code defines reusable `colorLegend` and `sizeLegend` functions that handle tick creation, circle rendering, and text labels, then calls them with `selection.call()`. Both legends render as SVG groups with styled text and outlined circles, using `scaleOrdinal` and `scaleSqrt` from the d3 module.

Ccodexmon

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct custom legends for both color and size encodings in D3 v5 with SVG rendering. The color legend displays four ordinal categories—apple, lemon, lime, and orange—using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to map numeric tick values to circle radii. Both legends use reusable functions that bind data to groups, append circles and text, and position them with translate transforms.

CCurran Kelleher

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations: a color legend mapping ordinal categories (apple, lemon, lime, orange) to distinct hues, and a size legend using a square-root scale to represent numeric values. The color legend renders colored circles with labels, while the size legend positions circles of varying radii with tick marks. Both use SVG groups and the `selection.merge` pattern for enter-update-exit handling, with styling applied via the `.tick` class.

Eexcalibur1987

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends: a color legend for ordinal categories (apple, lemon, lime, orange) and a size legend for a square-root scale mapping values 0–10 to circle radii. Both legends use SVG groups with tick marks, rendered via D3 v6’s `scaleOrdinal` and `scaleSqrt`, and are constructed through reusable functions that append circles and labels with dynamic positioning. The color legend assigns categorical colors, while the size legend computes tick values using `sizeScale.ticks`, filters out zero, and reverses the order. Styling is applied through CSS classes for text and circle strokes.

HHe Jianfeng

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend techniques for encoding data values. The color legend maps ordinal categories like "apple" and "lemon" to distinct colors using `d3.scaleOrdinal`. The size legend uses `d3.scaleSqrt` to translate a continuous numeric range from 0 to 10 into proportional circle radii, with tick labels derived from the scale's `.ticks()` method. Both legends are built as custom SVG components that render groups of circles and text, with the size legend's circles using a semi-transparent fill. The code relies on D3 v5's selection and merge APIs, and the `d3.select` function, to efficiently create and update the SVG elements.

RRubens

94% match

Loading thumbnail…

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

94% match