Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published60🌍 Public
CCurran Kelleher
Last edited Jun 9, 2019
Created on Sep 24, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Colour and Size Legends

This example demonstrates two distinct legend types for mapping data to visual encodings. A color legend displays ordinal categories—apple, lemon, lime, and orange—paired with distinct hues using `d3.scaleOrdinal`. Adjacent to it, a size legend uses `d3.scaleSqrt` to map a continuous numeric domain from 0 to 10 to circle radii, filtering out zero and reversing tick order for display. Both legends are built with reusable D3 functions that append SVG groups, circles, and text elements, with tick styling applied via CSS classes.

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

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

TThomas Seberechts
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate legends for color and size encodings. The color legend maps ordinal data categories to distinct hues, while the size legend translates a continuous quantitative scale into proportional circle radii. Both legends are rendered as SVG groups using D3 v5, with the ordinal color scale and square-root size scale defined via `scaleOrdinal` and `scaleSqrt`. The legends are drawn through custom `colorLegend` and `sizeLegend` functions, which manage tick marks with circles and text labels.

LLiu2021311512
95% match
Loading thumbnail…

Color and Size Legends

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.

Fframptonb
95% 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 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
94% match