Bowl of Fruit - Hover to Select
This example shows a row of fruit shapes—apples and lemons—rendered as SVG circles, where hovering over a fruit highlights it with a black outline. The bowl updates over time as fruits are removed or replaced, with animated transitions handling enter, update, and exit states. Built with D3 v5, it uses the data join pattern, `selection.enter`, `selection.merge`, and `selection.exit` with `transition.attr` to animate circle radii and positions. Color and radius are mapped using `scaleOrdinal`, and fruit IDs are stored as random numbers.