Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Bbprokopowicz
Last edited Apr 1, 2020
Created on Apr 1, 2020

This example demonstrates how to create separate legends for categorical color scales and quantitative size scales in D3.js. A color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a size legend uses `d3.scaleSqrt` to show the relationship between numeric values and circle radii. The legends are built from reusable custom components (`colorLegend` and `sizeLegend`) that generate SVG groups with circles and text labels, using the `enter`/`merge` pattern for efficient updates. Ticks for the size scale are generated via `sizeScale.ticks()` and filtered to exclude zero.

AI-generated description

D3 course follow along.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales in D3 v5. The color legend uses a `scaleOrdinal` with fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups using custom reusable functions that bind data to enter/merge/exit selections, positioning circles and text labels with transform attributes and spacing offsets.

MMounikaBeerelly
96% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create categorical color legends and quantitative size legends using D3.js v5’s `scaleOrdinal` and `scaleSqrt` APIs. The color legend maps fruit names to distinct hues, while the size legend encodes numeric values through circle radii using a square root transformation, with tick marks generated from the scale’s `ticks` method. Both legends are rendered as SVG groups containing circles and text, using the nested general update pattern to handle enter/update/exit transitions efficiently.

NNico Donovan
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for quantitative scales. The color legend maps fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric ticks as proportional circle radii. Both legends are rendered as SVG groups with circles and text, using `.call()` to apply the component functions. The size legend filters out zero values and reverses tick order to display larger circles first.

Nnkohdatavis
95% match
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 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…

Color and Size Legends

This example demonstrates two methods for building interactive legends in D3.js v5: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to distinct colors, while the size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via `translate` transforms. The reusable legend functions (`colorLegend` and `sizeLegend`) accept configuration objects specifying spacing, circle radius, and tick counts, allowing flexible customization within a single SVG canvas.

KKarkG
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
95% match