Color and Size Legends
This example demonstrates two distinct types of legends for D3 visualizations: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps categorical fruit names to specific colors, while the size legend displays numeric ticks with proportionally scaled circles. Built with d3.scaleOrdinal and d3.scaleSqrt, the code renders SVG groups containing circles and text elements. The reusable legend functions (colorLegend and sizeLegend) accept configuration props for spacing, radius, and text offset, showing how to build modular, customizable legend components.