Two custom D3.js legends display categorical and quantitative mappings side by side. The color legend pairs a nominal `scaleOrdinal` with four fruit names, each linked to a distinct fill color, while the size legend uses a `scaleSqrt` to map numerical values to circle radii. Both legends are built as reusable SVG components, with `selection.selectAll` and `.merge` managing tick groups, and circles receiving graphic attributes directly from their respective scales.