{"version":"1.0","type":"rich","title":"Let's make a face with D3.js","description":"A data-driven update pattern renders a bowl of fruit as colored circles, transitioning from six red apples to a lemon over time. Using D3.js v5, the example demonstrates data joins with `selection.data`, `enter`, `merge`, and `exit` methods within a custom `fruitBowl` function. A `scaleOrdinal` maps fruit types to fill colors and radii, while `setTimeout` triggers sequential state changes—removing one apple and mutating another to a lemon—to show how the visualization reacts to data updates. The SVG is selected and populated from a static `index.html` file.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d945f3c1ea274ba280db1db9665d36fb?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}