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)

22a1d5fcd4a6428883111aa5011ccf73

Bowl of Fruit - General Update Pattern

0 stars1🌍 Public
BbeauMarko
Last edited Jul 19, 2020
Created on Jul 18, 2020

This example demonstrates the general update pattern in D3, where data joins manage the entering, updating, and exiting of SVG circles that represent fruits in a bowl. It shows three sequential transitions: removing an apple, changing an apple to a lemon, and filtering out another apple. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` within a custom `fruitBowl` function, applying ordinal scales for fruit color and radius. A `setTimeout` chain triggers each update, making the pattern of data-driven DOM changes explicit.

AI-generated description