Skip to main content
SimilarExport ZIP
100%

Fork of Bowl of Fruit - Animated Transitions

✓ Published0🌍 Public
SSuzie1022susu
Last edited Jan 11, 2023
Created on Jan 10, 2023

Five apples appear in a row and enlarge from zero radius; clicking one selects it with a black stroke, while a lemon is added to the bowl using an animated transition. The code uses d3-selection’s data join with a key function, and d3-transition’s `.transition().duration()` to animate circle positions and radii. SVG rendering displays the fruit, with d3-scaleOrdinal mapping fruit types to colors and sizes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

Five circles represent apples in a row, each colored red. The animation uses animated transitions to choreograph changes over time: one apple disappears, another turns yellow to become a lemon, and a third is removed, with circles shrinking and growing during enter, update, and exit states. Built with d3 v5, the `fruitBowl` function uses `selection.transition().duration()` to animate attributes and `scaleOrdinal` for color and radius scales, rendering as SVG.

Aaidatabaeva
95% match
Loading thumbnail…

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
94% match
Loading thumbnail…

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.

SSuzie1022susu
94% match
Loading thumbnail…

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.

SSuzie1022susu
94% match
Loading thumbnail…

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.

SSuzie1022susu
94% match
Loading thumbnail…

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
Loading thumbnail…

Fork of Fork of Bowl of Fruit - clicks

Five apples render as circles in an SVG, with clicks, mouseovers, and mouseouts temporarily highlighting a fruit with a black stroke. D3 transitions animate new fruit entering with a radius of zero and removed fruit shrinking away. The code uses `d3.scaleOrdinal` for color and radius, plus selection `.merge` and `.transition` to update positions. A timer-driven sequence replaces an apple with a lemon and removes other apples over time.

EEmmanuel Chukwujindu
93% match
Loading thumbnail…

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
93% match