Fork of bowl of fruit

Fork of Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a fruit bowl visualization using D3 v5 and SVG. Circles represent apples and lemons, with color and radius scales mapping fruit types to visual properties. The code uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections with `transition().duration()` to animate circle positions, radii, and removal. A `setTimeout` sequence triggers changes: removing fruits, replacing an apple with a lemon, and filtering elements. Data is generated randomly via `Math.random()` for unique identifiers.

KKainsli

96% match

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for five SVG circles representing apples and lemons, with click-to-select highlighting. The visualization uses a D3 v5 `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle position, radius, and exit/enter states. The `fruitBowl` function binds data with a key function, merging enter and update selections, while `index.js` mutates the fruit array via `setTimeout` to show data-driven changes.

Hhuizrh

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for SVG circles. The visualization shows five fruits—red apples and a yellow lemon—arranged in a row, with actions over time removing fruits and changing an apple into a lemon. Each state change triggers a smooth 1000-millisecond transition using D3’s `transition` and `duration` methods, animating circle radius and horizontal position. The code uses `d3.scaleOrdinal` for color and size mapping, and a custom `fruitBowl` function manages data joins with enter, merge, and exit selections.

Fork of Bowl of Fruit - Animated Transitions

Fork of Bowl of Fruit - Animated Transitions

Fork of Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a fruit bowl, where apples and lemons appear, disappear, and change type with smooth updates. Five circles initially render as apples; clicking highlights a fruit with a black stroke, while timed updates remove the last apple, convert the third apple to a lemon, and filter out the second fruit. The visualization uses D3 v5 with the `fruitBowl` module, leveraging `selection.data()` with key functions, `transition().duration()` for enter, update, and exit animations, and ordinal scales for color and radius. SVG shapes are bound to data, with mouseover and mouseout events triggering selection changes.

HHojjat Karami

94% match

Fork of Bowl of Fruit - Animated Transitions

Using D3.js v5 and modular ES imports, this animated example visualizes a bowl of fruit where apples and lemons appear, disappear, and change type over time. Circles represent fruit, with ordinal scales mapping color and radius to fruit type, while each fruit’s identity is tracked via a random `id`. Transitions animate entering circles from radius zero, exiting circles shrink away, and updates smoothly shift positions over one second via `transition().duration(1000)`. The data is programmatically generated in JavaScript, with timed `setTimeout` callbacks modifying an array of fruit objects and re-rendering the SVG scene.

94% match