This example demonstrates how to build color and size legends for D3 visualizations using modular JavaScript functions. It shows a color legend with circles representing different fruit types, encoded through an ordinal color scale. The code defines a reusable `colorLegend` component that binds data to SVG groups, appending circles and text labels. Using D3 v7’s `scaleOrdinal`, the example maps categorical domains to specific colors, while SVG rendering handles the visual output. The implementation highlights a clean separation between the legend component and the main script’s render logic.