This example demonstrates two reusable legend components rendered side by side in SVG. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct fill colors, with labeled circles spaced vertically. The size legend uses `scaleSqrt` to encode numeric values in circle radius, showing five ticks from 0 to 10 with semi-transparent black fills. Both legends are built with D3 v5’s `selection.call()`, `scaleOrdinal`, and `scaleSqrt`, positioning groups via translate transforms and entering/exiting DOM nodes dynamically. The code exports `colorLegend` and `sizeLegend` as functions for modular reuse.