{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"Two legend components demonstrate distinct encoding strategies in a single SVG: an ordinal color legend maps fruit names to categorical hues, while a square-root size legend scales circle radii for numeric values. The color legend animates circle radii from zero using `transition().duration(1000)`, and both use D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data joins with enter/merge/exit patterns. Reusable functions `colorLegend` and `sizeLegend` render ticks with grouped `g` elements, circles, and text labels spaced via transform translations.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7417445db64642e4bed91b7bc42bb895?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}