{"version":"1.0","type":"rich","title":"Lesson 4: Design Pattern","description":"This example demonstrates a data visualization design pattern using React and D3 v5, showing animated transitions of fruit shapes within a bowl. It displays how SVG elements update when data changes, with apples transforming into lemons and fruits being removed. The code uses `scaleOrdinal` and `scaleLinear` for sizing and positioning, while `selection.join()` and `transition` methods animate the changes. Population data from the World Bank is referenced, though the visualization focuses on the state management and rendering pattern for dynamic datasets.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5b26aaefdb274d7fae076aa8b70dfe6a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}