{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"This example demonstrates two reusable legend components for D3.js v5 visualizations: a color legend using a categorical `scaleOrdinal` and a size legend using a `scaleSqrt`. The color legend maps fruit categories to distinct colors with circular swatches, while the size legend renders circles whose radii correspond to numeric values, filtered to exclude zero. Both legends use SVG groups and update joins to manage entering and exiting elements. The code defines reusable `colorLegend` and `sizeLegend` functions, invoked via the `.call()` method with custom spacing, text offsets, and tick counts.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/00aa403e5d1449b1be2b72415b5c8d47?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}