Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Jul 30, 2020

Created on Jul 30, 2020

This example demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for quantitative scales. The color legend maps fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric ticks as proportional circle radii. Both legends are rendered as SVG groups with circles and text, using `.call()` to apply the component functions. The size legend filters out zero values and reverses tick order to display larger circles first.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Colour and Size Legends

This example demonstrates two reusable legend components for D3 v5 visualizations: an ordinal color legend and a quantitative size legend. The color legend maps fruit categories to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to transform numeric values into circle radii. Both components render as SVG groups with tick marks and labels, using data joins and enter/merge/exit patterns for dynamic updates. The size legend generates ticks via the scale’s `ticks` method, filtering out zero, and positions circle centers according to the scaled radius.

JJordan Chiu

97% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

MMinwoo Pak

97% match

Loading thumbnail…

Color and Size Legends

Two reusable legend components demonstrate color and size encoding in D3 v5. The color legend uses `scaleOrdinal` to map fruit categories to distinct colors with fixed-radius circles, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends render as SVG groups with tick marks, using D3’s data join pattern and `.call()` to apply each component. The size legend filters out zero values and reverses tick order, with text offset dynamically calculated from each circle’s radius.

KKaavya Lakshmanan

96% match

Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components: a color legend for ordinal data and a size legend for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend maps numeric values to circle radii. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with reusable functions `colorLegend` and `sizeLegend` that bind data to SVG groups. Circles and text labels are positioned via transforms, with tick values generated by `sizeScale.ticks(numTicks)`. The SVG rendering includes configurable spacing, text offsets, and fill styles.

SSophia Murage

96% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colored circles, while the size legend shows five circular markers scaled by magnitude using `d3.scaleSqrt`. Both components render as SVG groups with nested circles and text labels, utilizing D3 v5 data joins. The legends are positioned manually within an SVG canvas, with text offset from circle centers for readability.

JJuyeonee

96% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend uses a square-root scale to map numeric values to circle radii. Both legends are built with D3 v5, using `scaleOrdinal` and `scaleSqrt`, with custom functions that handle enter/merge/exit selections. The code imports `select` from D3 and renders the legends via the `call` method.

MMichał Szumnarski

96% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends use D3 v5’s data join pattern, with Enter and merge selections to update ticks. The size legend calculates tick values via `scale.ticks` and filters out zero.

RResl411

96% match

Loading thumbnail…

Color and Size Legend

This example demonstrates two custom legend components built with D3 v5: a categorical color legend for fruit categories and a quantitative size legend for a numeric scale. The color legend maps ordinal domain values to a range of colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to translate tick values into circle radii. Both legends render as SVG groups with circles and text labels, with spacing and offsets applied via `attr("transform")` and positioned within an `svg` element.

KKazushige Okuma

96% match