{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"This example demonstrates two distinct types of chart legends created with D3.js v5: a color legend using an ordinal scale mapping fruit names to specific colors, and a size legend using a square-root scale to map numeric tick values to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned programmatically via `attr('transform')` calls. The color legend uses `scaleOrdinal` for categorical colors, while the size legend uses `scaleSqrt` and `ticks()` to generate evenly spaced, non-zero values, with circles filled using a semi-transparent black.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/29f7261eb2894c29bb6f2588d2ebeeb4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}