{"version":"1.0","type":"rich","title":"Color and size legends","description":"This example demonstrates reusable D3 color and size legend components, rendered as SVG within a 960×500 viewport. The color legend uses a `scaleOrdinal` with categorical fruit domains mapped to red, yellow, green, and orange, while the size legend applies a `scaleSqrt` with tick marks generated via `sizeScale.ticks()`. Both legends employ D3’s data join pattern (`selectAll`, `enter`, `merge`) to append circle and text elements per tick, with spacing and text offsets configured through component props. Circles include a semi-transparent fill for the size legend and stroke outlines for both legends.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c99a5b49228142589f260f1070f7ee0c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}