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)

2e74a42b02f64ed7a4479ed21952ef59

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