This example demonstrates two separate legend types rendered side by side in a single SVG. A categorical color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a quantitative size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends use data joins with `selection.enter()`, `merge()`, and `exit()` to update their groups, circles, and text labels dynamically. The color legend positions circles vertically with fixed spacing, and the size legend filters zero values and reverses its ticks, showing values 10 through 2.