Bowl of Fruit - Hover to Select
Five rounds of fruit appear as circles on a canvas, with apples in red and lemons in yellow, sized differently via d3.scaleOrdinal. Hovering over a circle selects it, adding a black stroke, and moving the mouse away deselects it. The D3 data join manages enter, update, and exit selections, animating circle positions and radii over one-second transitions as fruits are removed or change type. The example uses d3.select, selection.data, selection.enter, merge, and transition methods in SVG.