Skip to main content
SimilarExport ZIP
100%

color and size legends

✓ Published0🌍 Public
JJenny
Last edited Jul 14, 2019
Created on Jul 12, 2019
Forked from Nested elements

Two reusable legend components illustrate categorical and quantitative scales in D3 v5. The color legend maps four fruit names through `d3.scaleOrdinal` to distinct hues, displaying circles with aligned text labels. The size legend uses `d3.scaleSqrt` to represent numeric ticks from 0 to 10 as proportionally sized circles. Both legends render in SVG, with the size legend filtering out zero values and reversing tick order. The code demonstrates shared update patterns using `selection.merge` for enter and exit transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

Two reusable D3 v5 legend components render categorical and quantitative scales side by side in SVG. A color legend uses `scaleOrdinal` to map fruit names to colored circles, while a size legend uses `scaleSqrt` with `ticks` to display varying radii for a numeric domain. Both components handle enter, update, and exit selections via `selection.data`, `merge`, and exit removal, positioning circles and labels with spacing and text offsets.

ZZ-Richard
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
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 Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends use D3 v5’s data join pattern, with Enter and merge selections to update ticks. The size legend calculates tick values via `scale.ticks` and filters out zero.

RResl411
94% match
Loading thumbnail…

Color and Size Legends

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.

Bbprokopowicz
94% 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 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
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend uses a square-root scale to map numeric values to circle radii. Both legends are built with D3 v5, using `scaleOrdinal` and `scaleSqrt`, with custom functions that handle enter/merge/exit selections. The code imports `select` from D3 and renders the legends via the `call` method.

MMichał Szumnarski
94% match