Two legend components built with D3.js v7 appear in a single SVG scene. The color legend uses `d3.scaleOrdinal` to map fruit names—apple, lemon, lime, orange—to distinct hues, with each tick rendered as a circle and label. The size legend employs `d3.scaleSqrt` to map numeric values from 0 to 10 into circle radii, showing five ticks. Both legends are constructed via reusable JavaScript modules that append `g` elements and merge enter/exit selections, with CSS styling the tick text and circle strokes.