{"version":"1.0","type":"rich","title":"Color Size and Legends","description":"This example demonstrates two custom legend components rendered with D3 v5 in a React framework. A categorical color legend maps fruit names to distinct colors using `scaleOrdinal`, while a separate size legend uses `scaleSqrt` to visualize numeric values through circle radii. Both legends animate their circles with a 1-second `transition`, and the code highlights reusable legend-building patterns through D3's data join and enter/merge/exit selections.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c8a3184d14064b489df902708b6a7c2e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}