Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Yyejichun@naver.com
Last edited Nov 23, 2021
Created on Jul 28, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

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.

Jjesramyep1263
96% 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
96% 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 legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

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

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