{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"This example demonstrates how to create separate legends for categorical color scales and quantitative size scales in D3.js. A color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a size legend uses `d3.scaleSqrt` to show the relationship between numeric values and circle radii. The legends are built from reusable custom components (`colorLegend` and `sizeLegend`) that generate SVG groups with circles and text labels, using the `enter`/`merge` pattern for efficient updates. Ticks for the size scale are generated via `sizeScale.ticks()` and filtered to exclude zero.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/98c15c18b7064fddb545245de5f4fd53?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}