{"version":"1.0","type":"rich","title":"Lesson 4: Design Pattern","description":"This example demonstrates the design pattern of using a single SVG element to render and update a data-driven visualization with animated transitions. It shows a bowl of fruit, represented by colored circles, where an apple is converted to a lemon and a fruit is removed over time, illustrating how D3’s data join, along with `selection.enter()` and `selection.exit()`, manages dynamic updates. The code uses `d3.scaleOrdinal` and `d3.scaleLinear` to map fruit types to sizes and positions, and leverages `transition().delay()` for animated attribute changes. The visualization is built with D3 v5 within a React framework, rendering to SVG with a population dataset from the World Bank.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6f9e093792e144c9af776eb75d97a892?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}