{"version":"1.0","type":"rich","title":"Legend and colors","description":"This example demonstrates how to build reusable legends for mapping data values to visual encodings. A color legend uses an ordinal scale with fruit names and distinct hues, while a size legend applies a square-root scale to represent numeric ticks with circles of varying radii. The code defines `d3.scaleOrdinal()` and `d3.scaleSqrt()` with SVG rendering, and updates legends through enter/merge/exit selections. Both legends are generated as reusable functions called via `.call()`, with circles and text positioned using `spacing` and `textOffset` parameters.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/149462fc2ba241b3b4c37dd507d1c3de?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}