{"version":"1.0","type":"rich","title":"Color And Size Legend Ludo","description":"This example demonstrates two distinct legend designs for mapping data to visual encodings in D3 v5: a qualitative color legend and a combined size and color legend. The qualitative legend assigns categorical colors to fruit names using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii, with a corresponding `scaleOrdinal` color scale. The code implements reusable legend components (`colorLegend.js` and `sizeLegend.js`) that update via D3's select-merge-append pattern. The size legend animates its circle positions and text labels over 1000 milliseconds using `.transition().duration(1000)`, while both legends render as SVG elements with `<circle>` and `<text>` marks.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/72dac1c292f44fa0af0d5a58d7c38416?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}