This example demonstrates two reusable legend components for scatter plots: a color legend for ordinal scales and a size legend for square-root scales. The color legend displays categorical fruit labels with colored circles, while the size legend uses nested circles of varying radii to represent numeric values. Both legends are implemented as reusable functions using `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3’s data join pattern with enter/merge/exit. The SVGs are rendered with `d3.select` and `.call()`, with text labels positioned using transactional offsets.