This example displays both a color legend and a size legend in a single SVG. The color legend maps ordinal fruit names to colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode numeric values as circle radii. Both legends are rendered with SVG groups, circles, and text elements, with reusable functions for each legend type. The code uses D3 v5 and demonstrates custom legend components with configurable spacing, circle radius, and tick counts.