This example demonstrates the use of two separate legends to map data values to visual encodings. A color legend shows categorical fruit names with a d3.scaleOrdinal scale, while a size legend represents numbers from 0 to 10 with a d3.scaleSqrt scale that maps values to circle radii. The legends are rendered as SVG groups using custom reusable functions, with circles and text labels arranged vertically. The underlying data scales and spacing are defined in the JavaScript code, with fruit categories and numeric ranges specified directly.