{"version":"1.0","type":"rich","title":"D3 Color & Size Legends","description":"This example builds two custom legend components for categorical color and quantitative size encodings. The color legend uses `scaleOrdinal` to map fruit names to colors, with SVG circles and text labels. The size legend uses `scaleSqrt` to map a 0-10 domain to circle radii, computing five ticks via `sizeScale.ticks()`, and stacking circles with dynamic vertical offsets so their spacing accounts for their varying diameters. Both components use a merge pattern to update existing SVG groups efficiently.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0ae8b7504d8d4a8f80b4f055babf7547?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}