{"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 maps ordinal domain values (apple, lemon, lime, orange) to a d3.scaleOrdinal color range, while a size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are implemented as functions that bind SVG groups with enter/merge/exit selections, positioning circles and text labels with custom spacing and offsets. The SVG rendering uses D3 v6 APIs including selection.call, selection.merge, and scale.ticks.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/3e7842bbafe24f70a1f27f0556064945?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}