Skip to main content
SimilarExport ZIP
100%

21_color and size legends - General Update Pattern Special Cases

✓ Published0🌍 Public
Ssgzzhinde
Last edited Dec 23, 2020
Created on Dec 23, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

21_color and size legends - General Update Pattern Special Cases

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.

FFMajid-ops
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
91% 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
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 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
85% 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
85% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for D3 legends, showing color and size legends built with ordinal and sequential scales. The color legend maps fruit names to colors using `scaleOrdinal`, while the size legend displays tick values from a `scaleSqrt` with circles sized proportionally. Both legends use D3’s enter, merge, and exit selections to handle dynamic updates, with circles and text appended to group elements. The SVG rendering shows the pattern’s special cases: handling elements that only appear on update, and managing nested selections within each data-bound group.

PPotikorn
85% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two special cases of D3’s general update pattern: color and size legends rendered as SVG groups. The color legend maps categorical fruit names to distinct colors, while the size legend uses a square-root scale with tick marks to represent numeric values. The code explicitly uses `merge`, `enter`, and `exit` selections to handle dynamic updates, with `scaleOrdinal` for colors and `scaleSqrt` for sizing. Both legends are drawn with circles and text, with positioning controlled by transform attributes and spacing props.

Aaidanoconnor1
85% match