{"version":"1.0","type":"rich","title":"Color and Size Legends - Component Experiment","description":"This example demonstrates two reusable legend components rendered with SVG: an ordinal color legend for categorical fruit data and a square-root size legend for a numeric 0–10 scale. Using d3.scaleOrdinal and d3.scaleSqrt, it assigns colors and circle radii, while the legends derive their tick marks from the scale’s domain and d3’s `ticks` method. The code follows the “Towards Reusable Charts” pattern by assigning configuration properties directly onto each component function before invoking it with `selection.call`. The resulting graphic shows both legends side-by-side with distinct spacing, text offsets, and transparent circle fills.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b21e0e9ded304fdeb9f62f39503009fb?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}