Color and size legend

100%

Color and size legend

✓ Published0🌍 Public

Last edited Mar 28, 2020

Created on Feb 14, 2020

Two reusable D3 legend components illustrate how to encode data with color and size. The color legend maps ordinal categories to colored circles using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to size circles by numeric ticks. Both render as SVG groups with `.tick` classes, updating via D3's data-join pattern. The legends demonstrate custom legend-building with explicit spacing, text offsets, and tick filtering.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps categorical values like "apple" and "lemon" to distinct colors, while the size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are built with D3 v5 data joins, using selection.enter and merge to update groups, circles, and text. The code exports modular functions from colorLegend.js and sizeLegend.js, with styling applied via CSS classes like .tick.

VVineel Gannu

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations. The color legend maps a categorical color scale to labeled circles, while the size legend uses a square-root scale to vary circle radii across numeric ticks. Both legends are implemented as custom D3 functions (`colorLegend` and `sizeLegend`) that append SVG groups with circles and text. The code uses `d3.scaleOrdinal` and `d3.scaleSqrt` to define the scales, and the rendering is done with SVG elements on a 960×500 canvas.

Hhenry1987

92% 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

92% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components built with D3 v5: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend renders colored circles with domain labels, while the size legend displays circles scaled proportionally to tick values with corresponding text offsets. Both legends are implemented as modular functions that append SVG groups and circles, using D3’s selection and merge pattern to handle updates efficiently.

AAegon95

92% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend and a size legend. The color legend maps categorical domain values like ‘apple’ and ‘lemon’ to distinct fill colors using `scaleOrdinal`, while the size legend visualizes a continuous numeric range with `scaleSqrt`, rendering circles whose radii grow proportionally. Both legends use SVG groups and the enter–update–exit pattern to bind data, with ticks and text labels positioned via transform attributes. The size legend filters out zero and reverses tick order for clarity.

MMunTatt Yap

92% 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

92% match

Loading thumbnail…

Color and Size Legends

Two custom reusable legend components in D3 v5 display categorical color scales with colored circles and quantitative size scales with scaled circles. The color legend uses `scaleOrdinal` with fixed domain values like apple and lemon, while the size legend applies `scaleSqrt` with generated ticks. Both render as SVG groups with positioned circles and text labels, demonstrating generic legend creation patterns independent of any particular chart.

IIsabel

92% match