This example demonstrates two custom legend components rendered side-by-side in a single SVG: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to colors, while the size legend uses `scaleSqrt` and its `ticks` method to generate five radius values. Both legends are built through reusable `colorLegend` and `sizeLegend` functions that append `g` elements with circles and text, with styling applied via the CSS class `tick`.