This example demonstrates two distinct legend types for mapping data to visual channels. A color legend displays a categorical scale with ordinal values (apple, lemon, lime, orange) mapped to distinct hues, while a size legend uses a square-root scale to encode quantitative values from 0 to 10 through circle radius. Both legends are rendered as SVG groups using D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data-join patterns, with ticks generated via `sizeScale.ticks()`. Orange circles and text labels are positioned with translated group elements.