Colour and Size Legends

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

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

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

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

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

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

colour and size legends

This example demonstrates two separate SVG legends: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend using a square-root scale with circular marks whose radii encode numeric values. The color legend renders colored circles for each category, while the size legend displays five ticks with proportional circle sizes and labels offset by the scaled radius. Both legends use reusable functions (`colorLegend` and `sizeLegend`) built with D3 v5, leveraging `selectAll`, `enter`, `merge`, and `exit` for data joins, with SVG elements styled via CSS.

KKurt J Nilsen

Color and Size Legends

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.

Iianleekq