This example demonstrates how to build separate color and size legends for data visualization. The color legend maps categorical fruit names to distinct colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to represent numeric values through circle radius. Both legends are rendered as SVG groups, with the color legend positioned on the left and the size legend on the right. The code leverages reusable legend functions that handle enter, update, and exit selections to manage the SVG elements dynamically.