{"version":"1.0","type":"rich","title":"Color and size legends","description":"A standalone SVG legend demonstrates how to encode categorical and quantitative data through color and size. The color legend maps fruit names (apple, lemon, lime, orange) to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric domain from 0 to 10 to circle radii. Both legends are rendered as reusable components via the `colorLegend` and `sizeLegend` functions, positioned with appended SVG groups and `d3.select`. The example relies on D3 v5 and custom tick formatting.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b908def0b4a2418ba2df48659bdc73b1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}