Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Aug 7, 2020

Created on Aug 7, 2020

The example demonstrates two reusable legend components rendered in SVG: a color legend built with `d3.scaleOrdinal` mapping fruit names to categorical colors, and a size legend using `d3.scaleSqrt` for continuous numeric values with circular markers. Both legends are generated through custom functions that bind data to groups, with the color legend encoding categories via circle fill and the size legend varying circle radius. The code relies on D3 v5 selections, `.enter()`, and `.merge()` patterns to update the legends dynamically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5 and rendered as SVG. A color legend uses `scaleOrdinal` to map fruit categories to distinct circle fills, while a size legend employs `scaleSqrt` with `ticks()` to encode numeric values as varying circle radii. Both legends bind data to grouped `<g>` elements, applying enter/merge/exit selections for dynamic updates. The code defines reusable functions `colorLegend` and `sizeLegend`, called via `.call()`, with text labels positioned using `textOffset`.

AAndreas Loew

96% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli

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

96% match

Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered as SVG: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale with circular marks. Both legends are built with D3 v5, using `scaleOrdinal`, `scaleSqrt`, data joins with `selection.enter()`, and merge operations to update tick groups. The color legend draws lines labeled with fruit names, while the size legend displays circles sized by the scale with tick text offset by radius. Styling is applied via CSS classes for tick text and circle strokes.

Sshawnsrk

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

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend using an ordinal scale mapping fruit categories to distinct colors, and a size legend using a square-root scale to encode numeric values through circle area. The color legend displays evenly spaced colored circles with labels, while the size legend computes ticks via `sizeScale.ticks()`, filters out zero, and reverses their order. Both components are built with D3 v5, using `selection.merge()`, `enter()`, and `exit()` patterns to handle dynamic updates, and accept configuration props such as spacing, text offset, and circle styling.

JJames Malvern

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