This example demonstrates a reusable color legend design pattern using React and D3 v5. It displays a vertical color scale with circular swatches and labels, generated through a custom `legends` function that uses `scaleOrdinal` and `range` for positioning. The visualization also includes an animated fruit bowl component defined in `makeFruit.js`, though it is not fully integrated into the main view. The code references population data from the World Bank and renders SVG elements with smooth transitions.