Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published1🌍 Public
MMajaha21
Last edited May 4, 2021
Created on Apr 30, 2021

Two legends created with D3 v5 are rendered as SVG. The color legend uses a categorical ordinal scale to map fruit categories to colored circles. The size legend uses a square-root scale to map data ticks to circle radii, with a reversed tick order to display larger values first. Both legends are built dynamically using D3's selection and merge APIs within `colorLegend` and `sizeLegend` functions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

Two customizable legends demonstrate how D3 v5 encodes data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to represent numerical values through circle radii. Both legends are constructed through reusable functions that bind data to SVG groups, with legends rendered as circles and text labels. The color legend applies `attr("fill", colorScale)`, while the size legend filters zero values from its ticks and spaces circles vertically.

Jjay
95% match
Loading thumbnail…

Color and Size Legends

A static SVG demonstrates two legend styles built from reusable D3 functions. `colorLegend` maps an ordinal color scale across fruit categories with fixed-size circles, while `sizeLegend` uses a square-root scale to represent numeric values through varying circle radii. Both legends render SVG groups with labeled ticks, using `scaleOrdinal`, `scaleSqrt`, and explicit spacing and text-offset parameters. The code defines separate modules for each legend and composes them in a single SVG canvas via `selection.call()`.

FFlying ACE
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends built with D3 v5: a color legend for an ordinal scale and a size legend for a square-root scale. The color legend maps fruit names to distinct colors, while the size legend uses `sizeScale.ticks` to generate five circle radii. Both legends are rendered as SVG groups, with circles and text positioned using `spacing` and `textOffset` parameters from custom `colorLegend` and `sizeLegend` modules.

Aanuj1450
94% match
Loading thumbnail…

Color and Size legends

D3 v5 uses ordinal and square-root scales to generate two separate legends side-by-side. A color legend maps categorical fruit names (apple, lemon, lime, orange) to distinct colors, with each entry rendered as a circle and label via the `colorLegend` function. A size legend maps a continuous 0–10 domain to varying circle radii, using `scaleSqrt` and ticks filtered to exclude zero. Both legends are drawn as SVG groups positioned manually, styled with CSS for fonts and stroke opacity.

OOleg
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types: a color legend with ordinal categories for fruits and a size legend with a square-root scale mapping numeric values to circle radii. Using D3 v5, it renders SVG circles and text labels, with the color legend employing `scaleOrdinal` and the size legend using `scaleSqrt` with tick generation. The size legend positions circles based on cumulative radius sums with spacing, while both legends use reusable functions (`colorLegend` and `sizeLegend`) called via D3’s selection `.call()` pattern.

GGuillaume Calmettes
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

WWarren-Fitzhenry
94% match
Loading thumbnail…

Color and Size Legends

Two legends demonstrate independent D3 color and size scales. A color legend maps ordinal domains like “apple” and “lemon” to discrete hues, while a size legend uses a square-root scale with tick marks and semi-transparent circles. Both are rendered as SVG groups via custom reusable functions, `colorLegend` and `sizeLegend`, which bind data to enter/merge/exit selections. The code uses D3 v5 APIs such as `scaleOrdinal`, `scaleSqrt`, and `scaleDiverging` (imported but unused), with text styling applied through CSS classes.

AAlice Hsieh
94% match
Loading thumbnail…

Color and Size Legends

A D3.js visualization demonstrates two separate legends for encoding data. The color legend maps categorical fruit names to distinct colors through an ordinal scale, displaying circles with text labels. The size legend uses a square-root scale to relate numeric values to circle radii, showing five evenly spaced ticks. Both legends are rendered as SVG groups, with circles and text positioned using translate transformations, and the size legend filters out zero values.

UUzma Khan
94% match