This example demonstrates two legend styles rendered side by side in SVG. A color legend uses a d3.scaleOrdinal to map categorical fruit names to distinct hues, with circles and offset labels. A size legend employs d3.scaleSqrt to map a continuous numeric domain to circle radii, generating ticks via sizeScale.ticks. Both legends are built with reusable functions that bind data to SVG groups, circles, and text elements, with styling applied through CSS classes.