Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Iianleekq
Last edited Feb 21, 2019
Created on Feb 20, 2019

This example demonstrates two custom legend components rendered as SVG: a color legend using a d3 ordinal scale mapping fruit names to colors, and a size legend using a d3 square-root scale mapping numeric values to circle radii. The color legend places equally sized circles with labels, while the size legend shows varying circle sizes with tick values generated by `sizeScale.ticks()`. Both rely on D3’s data join pattern (`selectAll().data().enter()`) with explicit `spacing` and `textOffset` props for layout, and are called via the `selection.call()` method.

AI-generated description
MIT Licensed

Similar vizzes

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
97% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in an SVG: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend built from a square-root scale with circular marks sized proportionally to tick values. Both legends use D3 v5’s selection joins to update enter and exit states. The color legend calls `scaleOrdinal`. The size legend uses `scaleSqrt.ticks()` for tick generation.

Ffbudwill
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 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
95% 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
95% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend displaying an ordinal scale with fruit names and assigned colors, and a size legend using a square-root scale to map numeric values to circle radii. The code uses D3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and `selection.call` to bind the legend functions. Each legend updates through data joins, with circles and text elements positioned using transform attributes and spacing constants.

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