This example demonstrates two reusable legend components for D3 visualizations. The color legend maps a categorical color scale to labeled circles, while the size legend uses a square-root scale to vary circle radii across numeric ticks. Both legends are implemented as custom D3 functions (`colorLegend` and `sizeLegend`) that append SVG groups with circles and text. The code uses `d3.scaleOrdinal` and `d3.scaleSqrt` to define the scales, and the rendering is done with SVG elements on a 960×500 canvas.