This example demonstrates two reusable D3 legend components positioned on a single SVG: a color legend using an ordinal color scale for categorical items like fruits, and a size legend built from a square-root scale that maps numeric values to circle radii. The color legend renders colored circles with labels, while the size legend filters out zero values and reverses tick order. Both use enter/merge/exit selections via `selection.selectAll` and `.data` to update groups, with circle and text elements positioned through transform attributes.