Color and Size Legends
This example demonstrates a reusable legend component for mapping ordinal color scales to categorical data. The visualization renders four fruit categories—apple, lemon, lime, and orange—as colored circles, with each circle’s fill derived from a `scaleOrdinal` and its position spaced vertically via a custom `colorLegend` function. The code uses D3 v5’s `select`, `scaleOrdinal`, and data join pattern to create SVG `<g>` groups containing circles and text labels. The legend is styled with CSS classes for tick elements, and the SVG container includes a border for visual framing.