Bowl of fruit just Enter & Exit

100%

Bowl of fruit just Enter & Exit

✓ Published1🌍 Public

Last edited Jun 20, 2020

Created on Jun 20, 2020

A red circle represents each apple in a bowl of fruit. The visualization initially shows five apples in a horizontal row, then removes one after a one-second delay. The example demonstrates enter and exit animations using D3 v5's selection API, where `selectAll('circle').data(fruits)` handles the data binding, `.enter().append('circle')` creates the circles, and `.exit().remove()` deletes the departing apple. The React and D3 code is straightforward, relying on pre-defined SVG dimensions.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing apples animate into a horizontal row, with clicking one highlighting it with a black stroke. Over time, an apple is removed, another changes into a lemon, and a second apple is deleted, demonstrating enter, update, and exit transitions. Built with React and D3 v5, the visualization uses `d3.scaleOrdinal` for color and radius mappings, while `selection.merge` and chained `transition` calls animate circle attributes based on bound fruit data.

BB Sundaresan

91% match

Loading thumbnail…

Bowl of fruits

A bowl of fruits demonstrates animated enter, update, and exit transitions for SVG circles. Initially five apples appear, then one is removed, another becomes a lemon, and a third is filtered out. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and radius mappings, `selection.data` with key functions, and chained `transition().duration()` calls to animate circle attributes. Random IDs track individual fruits through the data joins.

SSchmittYannic

90% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit shows five apples in a rounded rectangle, with smooth animated transitions as fruits are removed, a lemon replaces one apple, and another apple exits. Each fruit is a circle colored by type and sized by a d3.scaleOrdinal, with a click handler that toggles a black stroke on the selected fruit. The visualization uses D3 v5 with data joins, enter/update/exit patterns, and transition durations to animate position, radius, and fill changes in SVG.

EEdward-Elric233

89% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates through a sequence of five apples that shrink, change type, and disappear over time. The visualization demonstrates how SVG circle elements are added, updated, and removed using D3's enter, merge, and exit selections. Each fruit's color and radius come from `scaleOrdinal` color and size scales, while a `transition().duration(1000)` animates the circles' growth, movement, and removal. The React app drives the state changes through timed `setTimeout` calls, and the `fruitBowl` function handles the animated rendering.

Ccacho2294

89% match

Loading thumbnail…

Bowl of Fruit

Five circles represent apples in a bowl, rendered as red SVG circles that scale up on entry and shrink on exit. Over time, the code removes an apple, changes one apple into a yellow lemon by re-binding data and updating fill color, then filters out another apple. The example uses d3.v5 with scaleOrdinal for color and radius mapping, and transition().duration() to animate enter, update, and exit selections.

ZZY Huang

89% match

Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich

89% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit is represented by two red circles, initially displayed as apples. The visualization demonstrates D3's data join pattern: circles are appended to an SVG based on an array of fruit objects, then one fruit is removed from the data after a one-second timeout, causing the corresponding circle to exit. The code uses d3.select, selection.data, selection.enter, and selection.exit to manage the dynamic update, with the fruit data defined via an ES6 module that creates apple objects.

TTrustPaul

89% match

Loading thumbnail…

Bowl of Fruit - Hover to select 1

Five circles representing apples animate into a bowl, shrinking and disappearing when eaten. Hovering over a fruit selects it with a black outline. The React app uses a d3 data join with enter, update, and exit selections, transitioning radius and x-position via d3 transitions and a d3.scaleOrdinal color scale.

Jjblaskovich

89% match