Bowl of fruit

Bowl of fruit - nested and with transition

A bowl of fruit demonstrates nested SVG group elements and animated transitions. Five apples initially render in a row, with each fruit represented as a group containing a circle and a text label. At one-second intervals, an apple disappears, an apple transforms into a lemon, and the second apple is removed. D3's data join with key functions tracks fruits by unique IDs, while `transition().duration(1000)` animates position changes on exit. Scales map fruit types to colors, radii, and stroke styles.

Uumihito

Bowl of fruit animated

Five fruit circles animate inside an SVG canvas, with apples in red and lemons in yellow. A series of timed mutations removes, replaces, and filters the data, demonstrating enter, update, and exit transitions. The `fruitBowl` function uses D3's `scaleOrdinal` for color and radius mapping, while the `transition()` API animates circle radii and x-positions over one second. Data is generated in `index.js` with `range` and random IDs.

JJoachim Klug

Bowl of Fruit - Nested Pattern

Five fruits sit in a bowl as circles labeled with their type. The visualization demonstrates D3’s nested enter-update-exit pattern for animating changes to a data set over time. Using `d3.select`, `d3.range`, and custom `fruitBowl` logic, circles transition their radius and color via `transition().duration(1000)`, apples shown in darkred and lemons in yellow. Animated state changes include removing fruit, replacing one type with another, and filtering, all rendered as SVG.

MMunTatt Yap

Bowl of fruits

Five fruit shapes sit in a row and animate as apples are eaten or replaced by lemons. D3 transitions move the fruit groups horizontally, shrink removed fruit circles to zero radius, and grow new circles on arrival. The example uses `d3.select`, `scaleOrdinal` for color and radius, and the enter/update/exit pattern with `transition().duration()` to choreograph the changes over time.

Aalobry

Bowl of fruit nested animated

A bowl of fruit demonstrates D3 data joins with animated enter, update, and exit transitions. Apples and lemons render as colored circles with scaled radii, positioned based on array index. The code uses `selection.data()` with a key function, `enter().append()`, `merge()`, and `exit().remove()` to manage SVG groups. Timed `setTimeout` calls alter the fruit array, triggering smooth 1000ms transitions that slide fruits to new positions while updating circle attributes and text labels.

MMatan

A bowl of fruit shows five apples rendered as red circles, which are eaten and replaced by a lemon over time through animated transitions. The visualization uses D3 v5’s general update pattern with `selectAll`, `data`, `enter`, `merge`, and `exit` to manage SVG circle elements, applying ordinal scales for color and radius based on fruit type. The animation sequence, driven by `setTimeout`, demonstrates adding, removing, and updating data while smoothly interpolating circle radius and position via `transition`.

Rrebeccayc

Bowl of fruit. Nested Version

A bowl of fruit shows a stateful, animated sequence of fruit on a platter. The D3.js v5 example repeatedly calls a custom `fruitBowl` component that uses a data join to add, update, and remove SVG groups and their circles and text labels. Using `scaleOrdinal` for color and radius, apples and lemons are drawn in red and yellow at different sizes. A timer alternates between popping items from the array and changing an apple to a lemon, demonstrating the enter, update, and exit transitions of the D3 selection API's `.enter().merge()`.

AAlex Arobelidze

Bowl of Fruit - Animated Transitions

Five apples sit in a silver bowl. Over four seconds, the apples disappear one at a time, and one turns into a lemon, with each change animated by shrinking or recoloring the fruit circles. The example uses d3’s `selectAll`, `transition`, and `scaleOrdinal` APIs to map fruit type to color and radius. Fruit data is generated in JavaScript with `range` and `Math.random()`, and the SVG rendering updates through the custom `fruitBowl` export.

Vveagy