Skip to main content
SimilarExport ZIP
100%

Color and Size legends

✓ Published0🌍 Public
LLongYuu
Last edited Nov 28, 2020
Created on Nov 28, 2020

This example builds two custom legends in D3 v5: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale. The legends are rendered as SVG groups with circles and text labels. The color legend uses `scaleOrdinal` with a hardcoded domain, while the size legend uses `scaleSqrt` with ticks generated via `sizeScale.ticks()`. Both legends are positioned manually and styled with CSS classes, demonstrating reusable legend components through the `selection.call()` pattern.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create reusable color and size legends in D3 v5. It uses two custom functions, `colorLegend` and `sizeLegend`, to render ordinal color scales and square-root size scales as SVG groups. The color legend maps fruit categories to distinct fills, while the size legend displays tick values with proportional circle radii. Both legends use D3’s selection joins and scale APIs (`scaleOrdinal`, `scaleSqrt`) to update efficiently.

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

color and size legends

This example demonstrates how to build separate color and size legends in D3 v5. The color legend uses a `scaleOrdinal` with a domain of fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups via reusable functions that append circles and text labels. The size legend calculates tick values using `sizeScale.ticks(numTicks)` and positions text based on each circle’s radius plus an offset.

Jjlspangl
95% match
Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered as SVG: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale with circular marks. Both legends are built with D3 v5, using `scaleOrdinal`, `scaleSqrt`, data joins with `selection.enter()`, and merge operations to update tick groups. The color legend draws lines labeled with fruit names, while the size legend displays circles sized by the scale with tick text offset by radius. Styling is applied via CSS classes for tick text and circle strokes.

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

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

TThomas Seberechts
95% match