Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Apr 8, 2020

Created on Apr 8, 2020

This example demonstrates two custom legend components for visualizing color and size encodings in D3 v5. The color legend displays a categorical scale with fruit names (apple, lemon, lime, orange) using distinct colors, while the size legend uses a square-root scale to represent numeric values from 0 to 10 with proportional circle radii. Both legends are rendered as SVG groups with tick marks, using D3’s selection joins and scales (`scaleOrdinal`, `scaleSqrt`). Circles and text labels are positioned dynamically based on spacing and scale values, with styles defined in external CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for D3 visualizations: a color legend matching ordinal categories to specific colors, and a size legend using a square-root scale to map numeric values to circle radii. The color legend renders labeled circles for fruits like apple and lemon, while the size legend displays five tick marks with proportional circle sizes. Both legends are built using D3 v7’s selection-merging API, appending SVG `<g>` groups to position circles and text labels with translated transforms.

Yyejichun@naver.com

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

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

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

95% match

Loading thumbnail…

Colour and Size Legends

This example demonstrates two custom legend components built with D3 v6: a color legend using an ordinal scale with fixed circle radii, and a size legend using a square-root scale mapped to varying circle areas. The color legend maps fruit categories to colors, while the size legend generates five ticks from the continuous scale, filtering out zero and reversing order. Both legends use SVG groups with appended circles and text elements, leveraging D3’s data join pattern with enter/merge/exit for updates. Styling comes from external CSS.

Ggabcoderboi

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

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom D3.js legend components rendered as SVG. A color legend uses `scaleOrdinal` with categorical domains to map fruit names to distinct colors, while a size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are built by dynamically appending `g` groups with circle and text elements, using D3's enter/merge/exit pattern for updates. The code relies on D3 v5 selection methods and scale APIs to generate the visual encodings.

PPabloReyesBetanzo

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable D3.js legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colors, while the size legend uses a square-root scale with four reversed ticks. Both legends are implemented as custom D3.js functions that accept an SVG group and configuration props, using d3.scaleOrdinal and d3.scaleSqrt. The SVG rendering includes labeled circles with custom spacing and text offsets, styled via CSS with sans-serif fonts and black stroke outlines.

LLeora Wenger

95% match