{"version":"1.0","type":"rich","title":"Color and Size Legends","description":"A static SVG legend demonstrates categorical color mapping and fixed circle sizing using D3 v5 and React. The `colorLegend` function renders colored circles for fruit categories (`apple`, `lemon`, `lime`, `orange`) via `scaleOrdinal`, with text labels positioned by `textOffset`. The code uses D3 selections (`selectAll`, `enter`, `merge`, `exit`) to bind data, setting circle fills from the color scale and spacing items vertically. The legend appears at a translated SVG coordinate, with font size and anchor attributes applied to text elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8ee9c93b3a2242389f92277a009ef285?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}