This example demonstrates how to create separate legends for categorical color scales and quantitative size scales in D3.js. A color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a size legend uses `d3.scaleSqrt` to show the relationship between numeric values and circle radii. The legends are built from reusable custom components (`colorLegend` and `sizeLegend`) that generate SVG groups with circles and text labels, using the `enter`/`merge` pattern for efficient updates. Ticks for the size scale are generated via `sizeScale.ticks()` and filtered to exclude zero.