Skip to main content
SimilarExport ZIP
100%

Colors and Size Legends

✓ Published0🌍 Public
AAsperge-Atomique
Last edited Nov 17, 2019
Created on Oct 30, 2019

This example demonstrates how to build custom legends for both ordinal color scales and sequential size scales in D3 v5 with SVG rendering. The color legend vertically displays five fruit categories, each with a colored circle and text label, while the size legend uses a square-root scale to show five tick values (10, 8, 6, 4, 2) as proportionally sized circles. The code implements reusable legend functions via `selection.call()`, with `scaleOrdinal`, `scaleSqrt`, and `ticks()` to generate the legend items.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom legends for both ordinal color scales and quantitative size scales in D3 v5. The color legend displays four fruit categories with distinct colored circles, while the size legend uses a sqrt scale to show proportional circle radii for numeric tick values. The code exports reusable legend functions that use D3’s selection joins, `scaleOrdinal`, `scaleSqrt`, and generated SVG groups with circles and text labels.

KKevinw97
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales using D3 v5. The color legend displays four fruit categories with distinct colored circles, while the size legend uses a square root scale to show five tick values with proportionally sized semi-transparent circles. Both legends are built with reusable functions that bind data to SVG groups, using `selection.merge` and `transition.attr` for smooth updates. The SVG output uses class-based styling for tick text and circles.

Ggilbster
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom legends for both ordinal color scales and continuous size scales in D3 v5. It shows a color legend with four fruit categories (apple, lemon, lime, orange) rendered as colored circles, and a separate size legend with scaled circles representing values from 0 to 10. The code builds reusable legend components using D3’s `scaleOrdinal`, `scaleSqrt`, and `selection.call()`, rendering everything as SVG elements with styled fonts and circle strokes defined in CSS.

JJustine Giaky Huynh
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales using D3 v5. A color legend maps fruit names to distinct colors with equally spaced circles, while a size legend displays circular markers whose radii scale proportionally to numeric values using `scaleSqrt`. Both legends are implemented as reusable functions via `selection.call()`, with the color legend using `scaleOrdinal` and the size legend using `scaleSqrt().ticks()` to generate tick values. The SVG rendering includes custom text and circle styling defined in external CSS.

PPaul Kumar
95% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates how to create legends for both color and size scales in D3. A color legend displays four fruit categories as colored circles using a `scaleOrdinal`, while a size legend uses a `scaleSqrt` with five tick values to show proportional circle radii. Both legends are built with reusable functions that append SVG groups, circles, and text elements. The code uses D3 v5 selections and scales, with transparent circles and black strokes styled via CSS.

MMuhammad Jarir Kanji
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how color legends and size legends are constructed using D3 v5’s ordinal and square-root scales. A colorLegend component renders colored circles for fruit categories, while a sizeLegend maps numeric tick values to circle radii. Both legends are built with data-bound SVG groups, using `selection.enter()` and `selection.merge()` for updates, and `scaleOrdinal` and `scaleSqrt` for encoding. The code also employs `sizeScale.ticks()` to generate evenly spaced legend entries, with text labels offset from each circle.

Pprincit
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create reusable color and size legends in D3 v5. It uses two custom functions, `colorLegend` and `sizeLegend`, to render ordinal color scales and square-root size scales as SVG groups. The color legend maps fruit categories to distinct fills, while the size legend displays tick values with proportional circle radii. Both legends use D3’s selection joins and scale APIs (`scaleOrdinal`, `scaleSqrt`) to update efficiently.

Ooptimizeresume
94% 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
94% match