{"version":"1.0","type":"rich","title":"Color Legend","description":"This example demonstrates two types of legends for mapping data to visual encodings: a color legend for categorical values and a size legend for quantitative values. The color legend displays circles colored via a d3.scaleOrdinal mapping fruit names to colors, while the size legend uses d3.scaleSqrt to represent numeric ticks as varying circle radii. Both legends are rendered as SVG groups with d3-selection, using join patterns to update circle and text elements. The code is built with React and D3 v6, with the legends generated procedurally from scales rather than external data.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/78d4a33d21c24427adf7ba0e1bae4df4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}