{"version":"1.0","type":"rich","title":"Color and size legends with D3.js!","description":"This example demonstrates how to build custom color and size legends using D3.js v5 in a React application. It shows an ordinal color scale mapping fruit names to distinct colors, alongside a square-root size scale with five ticks rendered as proportionally sized circles. The code defines reusable legend components that use selection joins with `merge()` and `exit().remove()` to manage SVG groups dynamically. Both legends render as SVG, with circles and text positioned using transform attributes and spacing parameters.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/3dbc778f15284445937c7d01355b7af3?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}