This example demonstrates how to construct two distinct legends for visualizing data: a color legend for ordinal values and a size legend for quantitative values. The color legend displays categories like apple, lemon, lime, and orange using colored rectangles, while the size legend uses scaled circles representing numeric ticks. The visualization is built with D3 v5, employing `scaleOrdinal` for colors and `scaleSqrt` for sizing, with SVG rendering and custom reusable legend components.