This example demonstrates two common legend types: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to map numeric values to circle radii. The SVG renderings use d3’s selection API (`selection.selectAll`, `selection.enter`) and custom legend modules (`colorLegend`, `sizeLegend`) that generate tick groups with shapes and labels. The color legend uses `scaleOrdinal` with explicit color ranges, while the size legend calls `scaleSqrt.ticks()` to compute interval breaks, with circles stylized via CSS.