{"version":"1.0","type":"rich","title":"Color and size Legends","description":"Two reusable legend components display color and size scales side by side. The color legend maps fruit names to hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` with five ticks to show proportional radii. Both legends are implemented as ES6 modules that append SVG groups, circles, and text via data joins. The example demonstrates local module imports alongside D3 loaded from UNPKG, with styling applied through external CSS classes.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e8543df285db4632aceffef5cbf695e1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}