Skip to main content
SimilarExport ZIP
100%

Fork of Bowl of Fruit - General Update Pattern Special Cases

✓ Published0🌍 Public
Llinyyyyyyyyy
Last edited Dec 4, 2022
Created on Dec 4, 2022

This example illustrates a color legend using a categorical color scale from D3 v5, displaying two fruit categories, "apple" and "lemon," as colored circles with text labels. The visualization uses an SVG rendering and applies the general update pattern, where entering groups are appended and exiting groups are removed, as seen in the `colorlegend.js` module. The legend's position and styling are set via attribute transforms, with the color scale mapping categories to specific hex colors. The code leverages the D3 selection API, including `select`, `append`, `merge`, and the `scaleOrdinal` function to manage the dynamic creation and update of legend elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in data visualization, showing a color legend with fruit names (apple and lemon) mapped to distinct colors. The code uses D3 v5’s selection.enter/merge/exit methods to handle dynamic data changes, with the colorLegend.js module rendering circles and text labels. It specifically addresses special cases in the update pattern, such as handling groups that exit or have missing children. The visualization uses a scaleOrdinal color scale from D3 and SVG rendering inside a static 960x500 viewport.

FFernando Gonzalez - Valadez
93% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two custom legend components for categorical and quantitative scales, applied to a fruit-themed visualization. The color legend maps fruit types (apple, lemon, lime, orange) to distinct colors, while the size legend uses a square-root scale for proportional circle sizing. Built with D3 v5, it uses selection joins (`enter`, `merge`, `exit`) to handle updates dynamically, rendering SVG elements with `d3.scaleOrdinal` and `d3.scaleSqrt`. The code defines reusable functions for both legends, which are called on separate SVG groups with explicit spacing and text offsets.

Aaidanoconnor1
92% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A color legend demonstrates the general update pattern with special cases, showing two fruit categories (apple and lemon) as colored circles with black strokes and text labels. Using d3.scaleOrdinal for color mapping, the code applies the enter-merge-exit pattern through colorLegend.js, with groups entering, merging, and exiting based on the color scale's domain. SVG rendering in d3.v5 manages reusable legend components with explicit transform and spacing values.

Eezzep66
92% 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
91% 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
90% 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
90% 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
90% 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
90% match