Bowl of fruit

Bowl of fruit - click to select

A bowl of fruit demonstrates a join-based update pattern in D3 v5. Circles represent apples and lemons, scaled by fruit type via `scaleOrdinal`, with the selected fruit highlighted by a black stroke. Clicking a circle triggers a callback that updates the selection and re-renders the visualization. Transitions animate new circles growing from radius zero, exiting circles shrinking away, and position changes over one second. The example uses `selection.data`, `.enter()`, `.merge()`, and `.exit()` to manage enter, update, and exit states, with SVG rendering and an animation showing data changes over time.

TTimothy sit

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a data join pattern with D3 v5, showing how a list of apples and lemons responds to changes over time. Five apples appear in a rendered bowl, then a fruit is removed, one apple changes to a lemon, and another apple disappears. The `fruitBowl` function uses `scaleOrdinal` for color and radius, while `selection.data`, `enter`, `merge`, and `exit` manage SVG `g`, `circle`, and `text` elements, updating positions with `attr('transform')` and `transition`.

Ssiddharth171

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates data joins with D3 v5, using an ordinal scale to assign colors and radii to apples and lemons rendered as SVG circles. As the underlying array changes over time—removing fruits, replacing one apple with a lemon, and filtering another—the visualization updates through enter, update, and exit selections. The `fruitBowl` module applies `scaleOrdinal` for both color and size, while `selection.merge` and `selection.exit` manage the transitions.

Tthanhtrant219

bowl of fruit

A bowl of fruit demonstrates animated data joins with D3 using ordinal scales to map fruit types to colors and radii. Apples appear as red circles, lemons as yellow ones, with text labels below each shape. The visualization uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections as fruits are removed or changed over timed intervals. The code employs `scaleOrdinal`, `range`, and SVG rendering with `attr` and `merge` operations.

Jjlspangl

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

Bowl of fruits - click to select

A bowl of fruits visualizes a dataset of apples and lemons as colored circles within a bowl-shaped rectangle. Hovering over a fruit selects it, highlighting its outline in blue. Built with D3 v5, the example uses `selection.data`, `transition.attr`, and `scaleOrdinal` to map fruit types to colors and radii. Fruits are added, removed, and transformed via timed `setTimeout` calls, with enter, update, and exit selections animating their appearance and disappearance.

Ssongr0

Bowl of fruit-3(click to select)

A bowl of fruit shows five apples that shrink, disappear, change type, and get removed over timed intervals as the dataset updates. The visualization animates circles representing fruit, with apples in red and lemons in yellow, using D3 v5’s data join, enter/exit transitions, and `transition().duration()` to smoothly resize elements. `scaleOrdinal` maps fruit types to colors and radii, while `selectAll('circle')` and `.merge()` handle updates. The demo runs automatically via `setTimeout`, highlighting dynamic data binding without user interaction.

Kkaviya-ds

bowl of fruit

A bowl of fruit demonstrates data joins in D3.js v5 by rendering five circles as apples, then updating the visualization over time as one apple is removed and another becomes a lemon. The SVG circles are bound to an array of fruit objects using `selection.selectAll`, `data`, `enter`, `merge`, and `exit`. D3 scales, `scaleOrdinal`, map fruit types to fill colors and radii, while `setTimeout` triggers re-renders to show enter, update, and exit transitions.

Jjlspangl