{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"This example demonstrates two reusable legend components for scatterplot-style visualizations: a color legend for ordinal categories and a size legend for quantitative values. The color legend maps fruit names to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode numeric ticks as proportional circle radii. Both legends are rendered as SVG groups via data joins, with circles and text labels. The code uses `d3-selection` methods like `selectAll`, `enter`, and `merge` to manage updates, and `d3.ticks` to generate tick values.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/35db548a9d3f415eb6522719f62224c7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}