Skip to main content
SimilarExport ZIP
100%

Color and size legends

✓ Published0🌍 Public
Aarieltonglet
Last edited Oct 14, 2019
Created on Oct 1, 2019

Two adjacent legends illustrate how to construct reusable D3 legend components. A color legend uses `d3.scaleOrdinal` with fruit types mapped to red, yellow, orange, and green, rendering circles with corresponding fills and text labels. A size legend uses `d3.scaleSqrt` to map values 0–10 to circle radii, with ticks generated via `sizeScale.ticks` and positioned by cumulative spacing. Both legends are appended as SVG groups, with enter/merge/exit selections managing dynamic updates.

AI-generated description
MIT Licensed

Similar vizzes

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

Color and Size Legends

Two reusable legend components demonstrate color and size encoding in D3 v5. The color legend uses `scaleOrdinal` to map fruit categories to distinct colors with fixed-radius circles, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends render as SVG groups with tick marks, using D3’s data join pattern and `.call()` to apply each component. The size legend filters out zero values and reverses tick order, with text offset dynamically calculated from each circle’s radius.

KKaavya Lakshmanan
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colored circles, while the size legend shows five circular markers scaled by magnitude using `d3.scaleSqrt`. Both components render as SVG groups with nested circles and text labels, utilizing D3 v5 data joins. The legends are positioned manually within an SVG canvas, with text offset from circle centers for readability.

JJuyeonee
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legends: a color legend for ordinal data and a size legend for quantitative data. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` with five ticks to map numeric values to circle radii. Both legends are rendered as SVG groups using reusable functions that handle enter, update, and exit selections. The code relies on D3 v5’s `selection.call`, `selection.merge`, and scale methods to create interactive-looking, standalone legend components.

Ggregosaure
94% match
Loading thumbnail…

Color and Size Legend

Two reusable D3 legends demonstrate how to encode data through color and size. The color legend uses `d3.scaleOrdinal` to map fruit names to categorical colors, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends are implemented as custom D3 functions that append SVG circles and text elements, using `.merge()` for efficient updates and `.exit().remove()` for cleanup. The rendering is entirely SVG-based within a single `<svg>` element, styled with CSS classes.

EEdoardoRegini
94% match
Loading thumbnail…

Color and Size Legends

Two reusable D3 legends demonstrate how to encode data through color and size. A color legend maps ordinal fruit names to distinct hues using `scaleOrdinal`, while a size legend translates a quantitative scale from 0 to 10 into circle radii via `scaleSqrt`. Both legends render as SVG groups with labeled ticks, using `selection.merge` to update existing elements efficiently. The examples show legend construction with configurable spacing, text offsets, and tick counts for flexible chart annotations.

HHasideluxe
94% match
Loading thumbnail…

Color and Size Legends

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.

MMajaha21
94% match