Two reusable legend components illustrate categorical and quantitative scales in D3 v5. The color legend maps four fruit names through `d3.scaleOrdinal` to distinct hues, displaying circles with aligned text labels. The size legend uses `d3.scaleSqrt` to represent numeric ticks from 0 to 10 as proportionally sized circles. Both legends render in SVG, with the size legend filtering out zero values and reversing tick order. The code demonstrates shared update patterns using `selection.merge` for enter and exit transitions.