Skip to main content
SimilarExport ZIP
100%

Color and size legend

✓ Published0🌍 Public
YYedrup
Last edited Mar 22, 2020
Created on Mar 21, 2020

This example demonstrates two custom D3 legend components rendered as SVG: a color legend for categorical values and a size legend for continuous quantitative values. The color legend uses `scaleOrdinal` to map fruit names to distinct colors, while the size legend employs `scaleSqrt` to translate numeric ticks into circle radii. Both legends rely on D3 v5’s data join pattern with enter/merge/exit selections, and the size legend filters out zero values from `ticks()` while setting explicit spacing and circle fill properties.

AI-generated description
MIT Licensed

Similar vizzes

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

Color and Size Legend

This example demonstrates two custom legend components built with D3 v5: a categorical color legend for fruit categories and a quantitative size legend for a numeric scale. The color legend maps ordinal domain values to a range of colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to translate tick values into circle radii. Both legends render as SVG groups with circles and text labels, with spacing and offsets applied via `attr("transform")` and positioned within an `svg` element.

KKazushige Okuma
95% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components: a color legend for ordinal data and a size legend for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend maps numeric values to circle radii. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with reusable functions `colorLegend` and `sizeLegend` that bind data to SVG groups. Circles and text labels are positioned via transforms, with tick values generated by `sizeScale.ticks(numTicks)`. The SVG rendering includes configurable spacing, text offsets, and fill styles.

SSophia Murage
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components rendered as SVG: a color legend using a d3 ordinal scale mapping fruit names to colors, and a size legend using a d3 square-root scale mapping numeric values to circle radii. The color legend places equally sized circles with labels, while the size legend shows varying circle sizes with tick values generated by `sizeScale.ticks()`. Both rely on D3’s data join pattern (`selectAll().data().enter()`) with explicit `spacing` and `textOffset` props for layout, and are called via the `selection.call()` method.

Iianleekq
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two separate legend types rendered side by side in a single SVG. A categorical color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a quantitative size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends use data joins with `selection.enter()`, `merge()`, and `exit()` to update their groups, circles, and text labels dynamically. The color legend positions circles vertically with fixed spacing, and the size legend filters zero values and reverses its ticks, showing values 10 through 2.

VVamsiYandapalli
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5 and rendered as SVG. A color legend uses `scaleOrdinal` to map fruit categories to distinct circle fills, while a size legend employs `scaleSqrt` with `ticks()` to encode numeric values as varying circle radii. Both legends bind data to grouped `<g>` elements, applying enter/merge/exit selections for dynamic updates. The code defines reusable functions `colorLegend` and `sizeLegend`, called via `.call()`, with text labels positioned using `textOffset`.

AAndreas Loew
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…

D3 Color and Size Legends

This example demonstrates two reusable D3 legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories as colored circles with labels, while the size legend visualizes numeric values through scaled circle radii. Both components use D3’s selection join pattern with `selection.enter` and `selection.merge` to update elements. The size legend relies on `scaleSqrt.ticks` to generate tick values, while the color legend maps ordinal domain values to a range of colors via `scaleOrdinal`.

Rrdeichert
94% match