This example demonstrates two reusable legend components that visualize ordinal color scales and quantitative size scales using SVG rendering. The color legend displays fruit categories as colored circles, while the size legend uses d3.scaleSqrt to encode numeric values through varying circle radii. Both components are implemented as functions that receive configuration through property assignment, following the reusable chart pattern. The code uses d3.scaleOrdinal, d3.scaleSqrt, selection.merge, and selection.call to update and render the legends dynamically.