This example demonstrates two reusable legend components rendered with SVG: an ordinal color legend for categorical fruit data and a square-root size legend for a numeric 0–10 scale. Using d3.scaleOrdinal and d3.scaleSqrt, it assigns colors and circle radii, while the legends derive their tick marks from the scale’s domain and d3’s `ticks` method. The code follows the “Towards Reusable Charts” pattern by assigning configuration properties directly onto each component function before invoking it with `selection.call`. The resulting graphic shows both legends side-by-side with distinct spacing, text offsets, and transparent circle fills.