This example demonstrates two reusable legend components for D3 visualizations: a color legend showing ordinal categories (apple, lemon, lime, orange) with distinct hues, and a size legend using `scaleSqrt` to map numeric values to circle radii. The code exports `colorLegend` and `sizeLegend` as JavaScript modules, using `selection.selectAll` and `groups.enter()` to bind data, append SVG circles and text, and handle updates. The legends are rendered with d3.v5, with text styling defined in an external stylesheet.