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)

949afb7260ef410e9e1ed5c40417dc52

Bowl of Fruit - General Update Pattern

0 stars1🌍 Public
TTsing
Last edited Nov 12, 2019
Created on Nov 11, 2019
Forked from Face

This example demonstrates the general update pattern in D3, showing how data joins manage enter, update, and exit selections. Circles represent fruit types—apples and lemons—with color and radius mapped via `d3.scaleOrdinal`, while `xPosition` spaces them horizontally. Using `d3.selectAll`, `data`, and `merge`, the code transitions new and existing SVG circles with `transition().duration()`, and exit selections shrink and remove themselves. The animation sequence, driven by timed `setTimeout` calls, removes, replaces, and filters fruit objects, highlighting dynamic data updates.

AI-generated description

An example including some commonly used features of SVG.