{"version":"1.0","type":"rich","title":"Bowl of Fruit - Nested Elements","description":"This example demonstrates how D3.js can manage dynamic updates to nested SVG elements within a fixed container. Five fruits are initially displayed as colored circles with text labels, representing apples in red and a lemon in yellow, all layered over a bowl-shaped rectangle. Over three seconds, the visualization reacts to data changes: an apple is removed, another apple transforms into a lemon, and a second apple is deleted. The code uses D3’s scaleOrdinal for color and radius mapping, selection merging via `.merge()` to update existing elements, and a simple `setTimeout` sequence to trigger re-renders. The SVG rendering approach is visible throughout the process.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/583ebc12e22240fe8a4e8344a713b510?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}