Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Ppeterjchan
Last edited Apr 4, 2020
Created on Apr 4, 2020

This example demonstrates two types of chart legends rendered side-by-side as SVG. A color legend uses `d3.scaleOrdinal` to map fruit names to distinct colors, while a size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends animate with `transition().duration()`, and the size legend filters out zero values from its ticks. Styling comes from CSS classes applied to the tick groups, with text and circles positioned dynamically.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

This example demonstrates two types of chart legends rendered side-by-side in SVG. A color legend uses a d3.scaleOrdinal to map fruit names to distinct colors, with circles and text labels offset vertically. A size legend uses d3.scaleSqrt to map a numeric domain to circle radii, filtering out zero, reversing the tick order, and positioning text labels using the scaled radius plus an offset. Both legends are implemented as reusable functions that manage enter/update/exit selections with D3 v5’s data join.

MMaciek Sitkowski
95% 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

This example demonstrates two distinct types of chart legends created with D3.js v5: a color legend using an ordinal scale mapping fruit names to specific colors, and a size legend using a square-root scale to map numeric tick values to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned programmatically via `attr('transform')` calls. The color legend uses `scaleOrdinal` for categorical colors, while the size legend uses `scaleSqrt` and `ticks()` to generate evenly spaced, non-zero values, with circles filled using a semi-transparent black.

Ppanmenghan
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles rendered side by side in SVG. A color legend uses a d3.scaleOrdinal to map categorical fruit names to distinct hues, with circles and offset labels. A size legend employs d3.scaleSqrt to map a continuous numeric domain to circle radii, generating ticks via sizeScale.ticks. Both legends are built with reusable functions that bind data to SVG groups, circles, and text elements, with styling applied through CSS classes.

Ccaydener
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two interactive legends for mapping data to visual channels in D3 v5. A color legend uses `scaleOrdinal` to associate fruit names with distinct hues, while a size legend employs `scaleSqrt` to encode numeric values through circle radii. Both legends animate their tick marks using `transition().duration(3000)` as they enter or update. The code implements custom legend components through D3 selections and data joins, rendering SVG circles and text elements with configurable spacing and offsets.

Cceresfin
93% match
Loading thumbnail…

Color and Size Legends

This example presents two interactive legends built with D3.js v5. A categorical color legend maps fruit names—apple, lemon, orange, and lime—to distinct colors using `d3.scaleOrdinal()`, while a sequential size legend uses `d3.scaleSqrt()` to represent numeric values from 0 to 10 with varying circle radii. The code employs D3's `transition()` method to animate the circles’ radii from zero to their final sizes, and both legends are rendered as SVG groups with tick marks, circles, and text labels.

EEdward-Elric233
93% 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
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types for different data encodings: a color legend with categorical swatches for fruits and a size legend with scaled circles for numeric values. Built with D3 v5, it renders SVG elements using reusable functions `colorLegend` and `sizeLegend`. The color legend uses `scaleOrdinal` with discrete colors, while the size legend employs `scaleSqrt` and generates ticks via `sizeScale.ticks()`. Both legends position circles and text labels with explicit spacing and offset values.

CCassie
93% match