{"version":"1.0","type":"rich","title":"color and size legends","description":"This example demonstrates how to build separate color and size legends in D3 v5. The color legend uses a `scaleOrdinal` with a domain of fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups via reusable functions that append circles and text labels. The size legend calculates tick values using `sizeScale.ticks(numTicks)` and positions text based on each circle’s radius plus an offset.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/2393f5a8e3ed4c0a82f2a0eda3d9724a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}