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)

2f13cb0eab5a49a99c0bb38a3f0a18a7

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