{"version":"1.0","type":"rich","title":"Practic 06 | Bowl of Fruit","description":"This example demonstrates the enter-update-exit pattern in D3.js v5 by rendering a row of five red apples as SVG circles. Using `selection.selectAll('circle')` and `selection.data()`, the code binds an array of fruit objects to the DOM, appending circles with `enter().append('circle')` and positioning them via `attr('cx', (d, i) => i * 100 + 60)`. After two seconds, a `setTimeout` removes the last fruit from the array, and the `exit().remove()` method deletes the corresponding circle, showing how D3 handles data-driven updates. The visualization uses a static 960×500 SVG canvas with no interaction.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6f0de512680140609674e0ce104720e8?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}