{"version":"1.0","type":"rich","title":"Color and size legends","description":"Two reusable D3 v5 legends illustrate color and size encoding side by side in a React-based VizHub example. The color legend maps an ordinal scale with fruit categories to red, yellow, green, and orange circles, while the size legend uses a square-root scale to map numeric ticks to proportional circle radii. Both legends are built with SVG selections, enter/merge/exit patterns, and custom parameters like spacing and text offsets. The page also demonstrates asynchronous data loading with a Promise, filtering car listings to generate a formatted report.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/88d471d4fb174a3ea804a93dee8dc5b2?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}