Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Aannadehtiarova
Last edited Feb 2, 2021
Created on Feb 2, 2021

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

AI-generated description
MIT Licensed

Similar vizzes

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

Color and Size Legends

This example demonstrates two distinct legend designs for SVG visualizations: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to represent numeric values through circle radii. The color legend renders four labeled circles with custom spacing, while the size legend generates five ticks with varying circle sizes and text offsets. Both legends are built using D3 v5 data joins, scaleOrdinal, scaleSqrt, and explicit enter/merge/exit patterns, with styling applied through CSS classes on tick groups.

0007ebey
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two common legend types for D3 visualizations: an ordinal color legend for categories and a square-root size legend for quantitative values. The color legend maps fruit names to distinct colors, while the size legend encodes numeric values using proportional circle radii. Both legends are rendered as SVG groups using reusable functions that leverage D3's `scaleOrdinal`, `scaleSqrt`, and `selection.join` pattern for enter/update/exit handling.

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

Color and Size Legends

This example demonstrates two distinct types of legends for D3 visualizations: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps categorical fruit names to specific colors, while the size legend displays numeric ticks with proportionally scaled circles. Built with d3.scaleOrdinal and d3.scaleSqrt, the code renders SVG groups containing circles and text elements. The reusable legend functions (colorLegend and sizeLegend) accept configuration props for spacing, radius, and text offset, showing how to build modular, customizable legend components.

JJorge Amado Soria Ramirez
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for a D3.js SVG visualization. The first legend uses a categorical color scale (`scaleOrdinal`) to map fruit names to specific colors, with circles and text labels generated by a custom `colorLegend` function. The second legend uses a square-root size scale (`scaleSqrt`) to map numeric values from 0 to 10 to varying circle radii, with ticks and labels created by a `sizeLegend` function. Both legends are built by appending groups and elements to the SVG, using D3's selection and merge methods to handle updates.

NNitin Vadhiya
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for D3 visualizations: a color legend matching ordinal categories to specific colors, and a size legend using a square-root scale to map numeric values to circle radii. The color legend renders labeled circles for fruits like apple and lemon, while the size legend displays five tick marks with proportional circle sizes. Both legends are built using D3 v7’s selection-merging API, appending SVG `<g>` groups to position circles and text labels with translated transforms.

Yyejichun@naver.com
95% match