This example demonstrates two reusable legend components for D3 visualizations: an ordinal color legend for categorical data and a quantitative size legend for numeric scales. The color legend maps fruit names to distinct colors, while the size legend uses a square-root scale to map values from 0 to 10 to circle radii. Both legends are rendered as SVG using d3.select, append, and merge operations, with the color legend applying a scaleOrdinal and the size legend using scaleSqrt. The code uses D3 v5 APIs including selection.call, data, and attr to construct the tick groups dynamically.