{"version":"1.0","type":"rich","title":"Color legend","description":"This example demonstrates two reusable legend components for D3 visualizations: an ordinal color legend for categorical data and a quantitative size legend for numeric scales. The color legend maps fruit names to distinct colors, while the size legend uses a square-root scale to map values from 0 to 10 to circle radii. Both legends are rendered as SVG using d3.select, append, and merge operations, with the color legend applying a scaleOrdinal and the size legend using scaleSqrt. The code uses D3 v5 APIs including selection.call, data, and attr to construct the tick groups dynamically.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6006c1ae06284612ae5e7eb402d051ed?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}