{"version":"1.0","type":"rich","title":"Color and size legend","description":"Two reusable D3 legend components illustrate how to encode data with color and size. The color legend maps ordinal categories to colored circles using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to size circles by numeric ticks. Both render as SVG groups with `.tick` classes, updating via D3's data-join pattern. The legends demonstrate custom legend-building with explicit spacing, text offsets, and tick filtering.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c43a1f41b46d43a2a2a52a170e1b2afc?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}