Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit -Animation- Eat Another Apple

✓ Published1🌍 Public
MMinwoo Pak
Last edited Nov 16, 2019
Created on Nov 16, 2019

Five red apples sit in a row, then disappear and change colors through timed updates. The D3 v5 code uses `scaleOrdinal` for color and radius, `selection.data` with key functions, and `transition.duration` to animate circles growing, shrinking, and being removed. SVG circles render the fruit, and `setTimeout` calls trigger the bowl’s changes every second.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit

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

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

Bowl of fruit

A bowl of fruit demonstrates animated data binding and SVG manipulation with D3.js. Five apples appear in a rounded rectangle bowl, then one disappears, a middle apple transforms into a lemon, and another apple is removed, with each change animated over one second. The example uses D3’s `scaleOrdinal` for color and radius mapping, `selection.enter` and `selection.exit` for managing dynamic elements, and `transition().duration()` to animate position, radius, and removal.

TTheRedUnicorn
93% match
Loading thumbnail…

Bowl of Fruit

A bowl of five apples appears as red circles; the animation then shows one apple being removed, a second apple changing into a lemon, and a third apple disappearing, with each fruit’s size and color encoded by its type. The visualization uses d3 scales (`scaleOrdinal`) to map fruit type to color and radius, and d3 transitions to animate circle position and radius over one-second durations. The SVG is rendered in `index.html`, with data mutations triggered by timed `setTimeout` calls in `index.js`.

Zzhangfa
93% match
Loading thumbnail…

Bowl of fruit 5:06:00

Five apples animate into view as red circles, then sequentially demonstrate D3 data joins: one apple disappears, another turns into a yellow lemon, and a third is removed. The example uses `d3.select` and `scaleOrdinal` for color and radius, with `selection.enter`, `merge`, and `exit` to manage updates. Transitions via `transition.duration` and `attr` animate the changes over one-second intervals, rendering static SVG circles that reshape and recolor in place.

Hhanulik.ondrej@gmail.com
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row and animate into a fruit bowl using D3 v5 selections. Mousing over each fruit toggles its selected state, which adds a black stroke around the circle. The example uses `d3.scaleOrdinal` for color, radius, and stroke mapping, and `selection.enter`, `merge`, `exit` with transitions. A `setTimeout` sequence then removes one fruit, changes another to a lemon, and filters out a third, demonstrating dynamic data updates with animated circle radii and positions.

Aarths-glitch
92% match
Loading thumbnail…

Bowl of Fruits

A bowl of five apples animates through a sequence of data changes, demonstrating D3’s data join and enter/update/exit pattern. Each circle represents a fruit, with its type determining fill color and radius via ordinal scales. Over time, an apple is removed, a middle apple transforms into a lemon, and another apple is filtered out. The code uses `selection.data`, `merge`, and `transition` to smoothly animate circle radii and positions, while SVG circles are appended, updated, and removed accordingly.

YYasara Peiris
92% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated data joins with D3.js. Five apples render as colored circles, then a sequence of timed transitions removes fruit, changes an apple into an orange, and filters another apple, showing enter, update, and exit selections. The code uses `scaleOrdinal` for color and size, `transition().duration()`, and custom `fruitBowl` and `render` functions, rendering SVG groups with circles and text labels. Data is generated randomly with `Math.random` IDs.

YYifu Chen
92% match