Two reusable D3 v5 legend components demonstrate categorical color mapping and quantitative size scaling in SVG. The color legend uses `scaleOrdinal` with domains like apple, lemon, lime, and orange, while the size legend employs `scaleSqrt` to map a 0–10 range to circle radii, with ticks generated via `sizeScale.ticks`. Both render grouped circles and labels, with the size legend filtering out zero values. A video tutorial link accompanies the code, and the styling includes custom font sizes and stroke opacity.