Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Nov 14, 2019

Created on Nov 14, 2019

This example demonstrates how to construct two distinct legends for visualizing data: a color legend for ordinal values and a size legend for quantitative values. The color legend displays categories like apple, lemon, lime, and orange using colored rectangles, while the size legend uses scaled circles representing numeric ticks. The visualization is built with D3 v5, employing `scaleOrdinal` for colors and `scaleSqrt` for sizing, with SVG rendering and custom reusable legend components.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two methods of creating legends in a D3.js visualization: a categorical color legend showing fruit types with distinct colors, and a quantitative size legend representing numeric values with scaled circles. The SVG-based visualization uses D3 v5's scaling functions, specifically `scaleOrdinal` for the color mapping and `scaleSqrt` for the size mapping, with custom legend constructors `colorLegend` and `sizeLegend` building the tick marks, circles, and labels.

Ppin84

94% 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

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two common legend types for D3 visualizations: an ordinal color legend for categories and a square-root size legend for quantitative values. The color legend maps fruit names to distinct colors, while the size legend encodes numeric values using proportional circle radii. Both legends are rendered as SVG groups using reusable functions that leverage D3's `scaleOrdinal`, `scaleSqrt`, and `selection.join` pattern for enter/update/exit handling.

Ssakhabutdinov

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components built with D3 v5: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend renders colored circles with domain labels, while the size legend displays circles scaled proportionally to tick values with corresponding text offsets. Both legends are implemented as modular functions that append SVG groups and circles, using D3’s selection and merge pattern to handle updates efficiently.

AAegon95

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5: a color legend using an ordinal scale for categorical data (apple, lemon, lime, orange) and a size legend using a square-root scale for continuous numeric values. The color legend renders colored circles with text labels, while the size legend generates circles whose radii correspond to tick values, filtering out zero. Both legends are implemented as reusable functions that append SVG groups, using `scaleOrdinal` and `scaleSqrt` to map data domains to visual properties, with spacing and text offsets controlled by configuration props.

PPhilRG

94% 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

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps categorical values like "apple" and "lemon" to distinct colors, while the size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are built with D3 v5 data joins, using selection.enter and merge to update groups, circles, and text. The code exports modular functions from colorLegend.js and sizeLegend.js, with styling applied via CSS classes like .tick.

VVineel Gannu

93% 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

93% match