Bowl of Fruit - Click to Select

Bowl of Fruit - Click to Select

A row of five apples animates into view, with one apple replaced by a lemon and two apples removed over time, illustrating join-based updates. Hovering over a fruit highlights it with a black stroke and clears the selection on mouseout. The example uses D3 v6 with `select`, `range`, and `scaleOrdinal` for color and radius, while `transition.attr` animates circle positions and radii in SVG.

Rrainyrainyguo

Bowl of Fruit: Click to select

Five apples and a lemon appear as colored circles in an SVG bowl, where clicking any fruit selects it with a black stroke outline. The example demonstrates animated data joins with D3 v5, using `scaleOrdinal` for color and radius mappings, `transition.attr` for smooth enter/exit animations, and event handlers on merged selections to update the selected fruit state.

AAjit Singh

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

MMuhammad Jarir Kanji

Bowl of Fruit - Click to Select

Five apples appear in a row and animate into a fruit bowl using D3 v5 selections. Mousing over each fruit toggles its selected state, which adds a black stroke around the circle. The example uses `d3.scaleOrdinal` for color, radius, and stroke mapping, and `selection.enter`, `merge`, `exit` with transitions. A `setTimeout` sequence then removes one fruit, changes another to a lemon, and filters out a third, demonstrating dynamic data updates with animated circle radii and positions.

Aarths-glitch

Bowl of Fruit - click to select

A bowl of five apples animates with smooth transitions, letting viewers click any fruit to highlight it with a black stroke. The visualization demonstrates data joins and update patterns via d3 transitions, removing apples and morphing one into a lemon over time. Using d3.scaleOrdinal for color and radius mapping, it binds fruit objects keyed by unique IDs, with enter, update, and exit selections animating circle attributes through the d3 v5 API. The SVG rendering approach shows how d3 handles dynamic array manipulation and user interaction.

1123fischer

Bowl of Fruit - Hover to select

Five apples sit in a bowl and react to a timed sequence: one is removed, another transforms into a lemon, and a third disappears. Hovering over any fruit highlights it with a black outline. Built with D3 v5, the example uses chained `transition()` methods to animate position, radius, and opacity, while `scaleOrdinal` maps fruit types to colors and sizes.

TThomas Seberechts

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj

Bowl of Fruit - Click to select

A bowl of fruit demonstrates animated data joins in D3 v6. Five apples appear as red circles, with a black stroke highlighting the currently selected fruit after a click. Over time, apples are removed, one apple transforms into a lemon, and the remaining selection is filtered. The example uses `d3.scaleOrdinal` for colors and radii, `selection.data` with key functions, `transition` for smooth enter/exit animations, and event handlers to manage selection state.

OOleg