Skip to main content
SimilarExport ZIP
100%

General Update Pattern Special Cases

✓ Published0🌍 Public
DDi Cui
Last edited May 28, 2023
Created on May 28, 2023

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()`.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - General Update Pattern Special Cases

Two legends for ordinal and quantitative scales demonstrate D3's general update pattern with special cases. The color legend maps fruit categories to red, yellow, green, and orange circles using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode values 0–10 as circle radii, filtering out zero and reversing ticks. Both legends use reusable functions (`colorLegend` and `sizeLegend`) with enter, merge, and exit selections, rendering as SVG. The code relies on D3 v5 APIs including `selection.enter`, `selection.merge`, and `selection.exit`.

Jjrodgh
89% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two reusable legend components for D3 visualizations: a color legend and a size legend. The color legend maps ordinal fruit categories (apple, lemon, lime, orange) to distinct colors, while the size legend uses a square-root scale to encode tick values as circle radii. Both legends employ the general update pattern, using selection joins with `enter()`, `merge()`, and `exit()` to handle dynamic data. The code uses D3 v5 APIs like `scaleOrdinal`, `scaleSqrt`, and `selection.selectAll` to render SVG circle and text elements with applied transforms.

AAbishek-Dulal
87% match
Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

Two reusable legend components demonstrate the general update pattern in D3 v5 with SVG rendering, using `scaleOrdinal` for fruit colors and `scaleSqrt` for size encoding. The color legend’s static ordinal domain and the size legend’s thresholded tick values show handled special cases, including filtering out zero and reversing tick order. Each legend appends groups, merges enter/update selections, and removes exits, with `d3.selectAll` and explicit `enter().append` for circles and text.

Eeefjescheerder
87% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two reusable legend components, a color legend and a size legend, built on the general update pattern. The color legend maps fruit names to ordinal colors, while the size legend uses a square-root scale to represent numeric values through circle radii. Both legends handle enter, update, and exit selections via `selection.merge` and `selection.exit().remove()`. The code uses d3.scaleOrdinal, d3.scaleSqrt, and explicit SVG rendering with appended `circle` and `text` elements.

Ss-janibekova
87% match