Hey there, fruity clicky selecty!

Bowl of Fruit, Interaction click

Five apples appear in a row, and clicking one outlines it in black. As time passes, apples are removed and one changes into a lemon, with new and exiting circles animating their radius. The example demonstrates the D3 general update pattern using `selection.data`, `enter`, `merge`, and `exit` transitions. Fruit types map to colors and sizes via `scaleOrdinal`, and click events trigger a re-render with a selected fruit ID. SVG circles animate over one second using `transition().duration(1000)`.

AAli Ahmed

bowl of fruit-click to select

Five circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033

Hey there, fruity hovery selecty!

A fruit bowl of five apples and one lemon demonstrates interactive selection and dynamic data updates with animated transitions. D3.js binds circles to fruit data, using ordinal scales for color and radius, while mouseover and mouseout events set a selected fruit ID that triggers a stroke highlight. The `fruitBowl` function manages enter, update, and exit selections, animating circle radii and positions over 1000 milliseconds as fruits are removed or type-changed.

OOhayouKaminari

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

Click to select

Five fruit circles animate into a row, with apples rendered large and red while lemons appear smaller and yellow. Clicking a circle selects it, highlighting it with a black stroke. The visualization uses d3.js v5 with the data-join pattern in `fruitBowl.js`, employing ordinal scales for color and radius, and transitions to animate entering, updating, and exiting circles over time.

RRoger Yu-Hsiang Lo

Bowl of Fruit - Click to Select

A bowl of five apples is rendered as SVG circles; clicking any fruit selects it with a black stroke, while the remaining fruit animate into position over one second. The example demonstrates enter, update, and exit selections with `d3.selectAll` and `transition`, using `scaleOrdinal` for color and radius by fruit type. As timers fire, apples are removed, and one apple transforms into a lemon. The `fruitBowl` function handles click events via an `onClick` callback, and `d3.v6` powers the data joins.

EEllednera

Bowl of Fruit Click to Select

Five apples appear in a bowl, rendered as circles using the D3.js v7 library. A click on any fruit selects it, shown with a black stroke, and triggers a transition. Over time, the example programmatically removes apples and changes one apple into a lemon, with `transition().duration(1000)` animating the changes in radius and position using ordinal scales for color and size. The code uses D3 data joins with `enter`, `merge`, and `exit` selections.

Ggabrielribeirob

Fork of Bowl of Fruit - Click to Select

A bowl of five apples animates in with a smooth transition, and clicking a fruit selects it with a black stroke while deselecting others. The code demonstrates a data join with enter, update, and exit selections, using `d3.scaleOrdinal` for color and radius scales, and `transition().duration(1000)` to animate shape changes. Over time, apples are eaten and one is replaced by a lemon, re-rendering the bowl with each change in the `fruits` array.

Yyejichun@naver.com