{"version":"1.0","type":"rich","title":"Color and Size Legends - Component Experiment","description":"A color legend and a size legend appear side by side in an SVG, each listing categorical or quantitative values with corresponding visual encodings. The color legend uses d3.scaleOrdinal to map fruit names to colors, while the size legend uses d3.scaleSqrt to map numeric values to circle radii. Both legends are implemented as reusable component functions that take their configuration via Object.assign, following the Towards Reusable Charts pattern. The code uses D3 v5 selection methods like .call, .merge, and .attr to update the DOM.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ac7c11929d91463d94a1410debb08db3?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}