Two reusable legend components demonstrate how D3 scales drive SVG circle size and color. A sequential color legend maps fruit categories to distinct hues via `scaleOrdinal`, while a quantitative size legend uses `scaleSqrt` with `ticks()` to generate proportional radii. Both components animate circle radius changes with `transition().duration(1000)`, handling enter, update, and exit selections through `merge()` and promise-based removal. The example uses D3 v5 selection methods to bind data and render labeled legends with configurable spacing and text offsets.