{"version":"1.0","type":"rich","title":"General Update Pattern and DOM Element Hover Event Handling","description":"This interactive D3 v5 visualization demonstrates the general update pattern with SVG rendering, showing a bowl of fruit that changes over time. The code uses `selection.merge()` and key-based data binding to manage enter, update, and exit states, while `d3.scaleOrdinal` maps fruit types to colors and radius values. Mouse events on circles trigger hover highlighting, with the `setSelectedFruit` function updating a selected fruit’s stroke to black. Timed updates pop apples, replace one with a lemon, and filter items, all re-rendering through the reusable `fruitBowl` module.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5aa5be4c42f04c548e6b7a9e7554045a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}