This example demonstrates how to build custom legends for both ordinal color scales and sequential size scales in D3 v5 with SVG rendering. The color legend vertically displays five fruit categories, each with a colored circle and text label, while the size legend uses a square-root scale to show five tick values (10, 8, 6, 4, 2) as proportionally sized circles. The code implements reusable legend functions via `selection.call()`, with `scaleOrdinal`, `scaleSqrt`, and `ticks()` to generate the legend items.