{"version":"1.0","type":"rich","title":"Lesson 4: Design Pattern","description":"This example demonstrates a reusable color legend design pattern using React and D3 v5. It displays a vertical color scale with circular swatches and labels, generated through a custom `legends` function that uses `scaleOrdinal` and `range` for positioning. The visualization also includes an animated fruit bowl component defined in `makeFruit.js`, though it is not fully integrated into the main view. The code references population data from the World Bank and renders SVG elements with smooth transitions.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/27151115c5ad4e489a1fba90b164ed88?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}