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.