This example demonstrates two reusable legend components rendered side by side in SVG: a color legend using an ordinal scale for fruit categories and a size legend using a square-root scale for numeric values. The color legend maps categorical data to colored circles, while the size legend scales circle radii proportionally and filters out zero values. Both legends use D3 v7 selection joins with enter/merge/exit patterns, and the size legend leverages `sizeScale.ticks()` to generate tick values for display.