Bowl of Fruit - Nested General Update Pattern - Outtake
This example demonstrates the nested general update pattern in D3.js, showing how a bowl of fruit (represented as SVG circles and text labels) transitions through a series of state changes: eating apples, replacing one with a lemon, and filtering out another. It uses a custom `fruitBowl` function with `selection.data()` and key functions to manage enter, update, and exit selections, applying `transition().duration(1000)` to animate positions, radii, and opacity. The code relies on d3’s `scaleOrdinal` for color and radius mappings, and `Math.random()` generates unique fruit IDs for identity-based data binding.