This example demonstrates two custom SVG legends: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct hues using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to translate numeric values into circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The reusable functions colorLegend and sizeLegend accept configuration props like spacing and textOffset, and the size legend uses d3.scaleSqrt.ticks to generate labeled values.