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)

7448ca398435403e97519bc0ad8134eb

Bowl of Fruit - General Update Pattern

0 stars2🌍 Public
Ffbudwill
Last edited May 3, 2020
Created on May 3, 2020

This example demonstrates the general update pattern in D3, showing how data joins handle entering, updating, and exiting elements. It renders a row of fruit as SVG circles, with apples and lemons distinguished by a `scaleOrdinal` color scale and radius scale. The code uses `selection.data()` with a key function, then applies transitions to animate new circles scaling up from radius zero, existing ones updating position and size, and removed fruits shrinking away before being deleted. The animation is driven by `setTimeout` calls that modify the fruit array and re-render.

AI-generated description