This example shows custom legends for both ordinal color scales and quantitative size scales, rendered as SVG groups. The color legend maps fruit names to distinct hues, while the size legend uses a square-root scale to map numeric values to circle radii, with ticks generated by `scaleSqrt.ticks()`. Both legends are built by entering and merging `g.tick` elements, positioning circles and text with `attr('transform')` and `attr('x')`. The code uses d3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `merge` and `exit().remove()`.