Bowl of Fruit - General Update Pattern
This example demonstrates the "general update pattern" for dynamic data changes in D3.js, showing a bowl of fruit that updates over time via timed JavaScript events. Five apples initially appear in the bowl, then a fruit is removed, an apple transforms into a lemon, and another apple is deleted, with each change triggering a re-render. The code uses D3 v5's `select`, `range`, and `scaleOrdinal` functions to manage SVG circle and text elements, applying categorical color and radius scales for fruit types. The fruitBowl component handles entering, updating, and exiting elements through chained selection and merge operations, while random IDs track individual fruits across updates.