Two reusable legend components render side by side in a single SVG canvas. The color legend uses d3.scaleOrdinal to map fruit names to discrete colors, drawing color-coded circles with labels, while the size legend uses d3.scaleSqrt to encode numeric values as circle radii. Both legends are built from SVG groups, with circles and text offset by a spacing variable, and update via enter/merge/exit selections in d3 v5.