Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern

Public visualization

Viewing a saved revision (read-only)

c4bfc279ed994e879af744347c32af3d

Bowl of Fruit - General Update Pattern

0 stars1🌍 Public
MMichał Szumnarski
Last edited Aug 5, 2019
Created on Aug 2, 2019

This example demonstrates D3’s general update pattern for binding data to SVG circles, showing how entering, updating, and exiting elements transition smoothly as fruit data changes over time. A bowl of apples shrinks as fruits are removed, one apple changes into a lemon, and another apple is filtered out, with each state change animated via `transition().duration()`. The code uses `scaleOrdinal` for color and radius mappings, `selection.data()` with a key function on fruit IDs, and explicit `.enter()`, `.merge()`, and `.exit()` chains to manage the circle lifecycle. Rendering targets SVG, driven by `d3.select` and `range` in a vanilla JavaScript setup.

AI-generated description