Bowl of Fruit- General Update Pattern-Click to Select
This example demonstrates the general update pattern for data joins in D3, showing how fruit elements enter, update, and exit the visualization. The bowl initially holds five apples rendered as red circles with a radius of 50 pixels, and a click handler logs each fruit’s ID. Over a sequence of timed intervals, the code removes the last apple, changes one apple to a lemon (yellow, radius 30), and filters out another apple, with each change triggering a re-render. Using `scaleOrdinal` for color and radius, the `fruitBowl` function orchestrates `enter()`, `merge()`, and `exit()` selections, applying 1-second `transition()` animations on circle attributes and removing exiting elements.