This example demonstrates two separate legends: a color legend for categorical data (plum, lemon, limes, oranges) and a size legend for quantitative data on a square-root scale. The color legend maps ordinal domains to fixed palette values, while the size legend generates five tick values using `scaleSqrt` and filters out zero. Both legends are built with reusable D3 v5 functions that append SVG groups containing circles and text, with spacing and text offsets passed as props. The rendering uses `selection.enter` and `selection.merge` to manage dynamic updates.