Skip to main content
SimilarExport ZIP
100%

21_color and size legends - General Update Pattern Special Cases

✓ Published1🌍 Public
FFMajid-ops
Last edited Dec 20, 2020
Created on Dec 20, 2020

This example demonstrates how to implement reusable color and size legends using the general update pattern in D3 v5. The color legend displays four ordinal categories with distinct colors, while the size legend uses a square root scale to visualize continuous values through circle radii. Both legends are rendered as SVG groups, with data-driven tick marks that update gracefully when the underlying data changes. The code leverages `scaleOrdinal`, `scaleSqrt`, and the `selection.join` pattern to handle enter, update, and exit selections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

21_color and size legends - General Update Pattern Special Cases

This example demonstrates the general update pattern for creating and updating color and size legends in D3.js. The color legend uses `d3.scaleOrdinal` to map categorical values like apple, lemon, lime, and orange to distinct colors, with circles and text labels arranged vertically. The size legend uses `d3.scaleSqrt` to map a numeric domain to circle radii, filtering ticks and reversing their order. Both legends are rendered as SVG groups within an SVG canvas, using selection, enter, update, and exit methods for dynamic updates.

Ssgzzhinde
94% match
Loading thumbnail…

General Update Pattern Special Cases

This example demonstrates two special cases of D3’s general update pattern: categorical color legends and quantitative size legends, both rendered as SVG groups. It uses `d3.scaleOrdinal` and `d3.scaleSqrt` to map fruit names and numeric values to visual encodings, with `selection.merge()` handling enter and update selections. The color legend shows circles with labels for apple, lemon, lime, and orange, while the size legend displays five tick marks with proportional radii. Data comes from hardcoded domains and ticks generated via `sizeScale.ticks()`.

DDi Cui
89% match
Loading thumbnail…

General Update Pattern

This example demonstrates how to construct a reusable color legend using D3 v4’s General Update Pattern for nested elements. The code defines a `colorLegend` function that binds a color scale to a group, then appends and merges tick marks for each categorical domain value (setosa, versicolor, virginica). Using selections, enter, and merge, it updates circle radii and fill colors, while text labels are positioned with padding. The legend is rendered as SVG, driven by an ordinal scale with custom hex colors, explicitly showing how to handle enter, update, and exit phases for nested data.

CCurran Kelleher
87% match
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
87% 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
86% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. A color legend maps ordinal categories to distinct colors, while a size legend uses a square root scale to represent numeric values with varying circle radii. The code defines reusable `colorLegend` and `sizeLegend` functions that handle tick creation, circle rendering, and text labels, then calls them with `selection.call()`. Both legends render as SVG groups with styled text and outlined circles, using `scaleOrdinal` and `scaleSqrt` from the d3 module.

Ccodexmon
86% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to build both a color legend and a size legend using D3.js v5. The color legend maps ordinal categories (Apple, Lemon, Lime, Orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numerical values from 0 to 10 as circle radii. Both legends implement a general update pattern with `selection.merge()` for enter and exit transitions, rendering circles and text labels in SVG. The ticks for the size legend are generated using `sizeScale.ticks()`, with all elements styled via CSS classes.

Fframptonb
86% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in an SVG: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend built from a square-root scale with circular marks sized proportionally to tick values. Both legends use D3 v5’s selection joins to update enter and exit states. The color legend calls `scaleOrdinal`. The size legend uses `scaleSqrt.ticks()` for tick generation.

Ffbudwill
86% match