{"version":"1.0","type":"rich","title":"color and size legends","description":"This example demonstrates two distinct legend types for mapping data to visual channels. A color legend displays a categorical scale with ordinal values (apple, lemon, lime, orange) mapped to distinct hues, while a size legend uses a square-root scale to encode quantitative values from 0 to 10 through circle radius. Both legends are rendered as SVG groups using D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data-join patterns, with ticks generated via `sizeScale.ticks()`. Orange circles and text labels are positioned with translated group elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7fe117522a4347ce885148a77a2b2295?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}