{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"Two reusable legend components demonstrate how D3 scales drive SVG circle size and color. A sequential color legend maps fruit categories to distinct hues via `scaleOrdinal`, while a quantitative size legend uses `scaleSqrt` with `ticks()` to generate proportional radii. Both components animate circle radius changes with `transition().duration(1000)`, handling enter, update, and exit selections through `merge()` and promise-based removal. The example uses D3 v5 selection methods to bind data and render labeled legends with configurable spacing and text offsets.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/42cfd3857c8b4478a3bc3f77ff7b2d60?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}