Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit

✓ Published2🌍 Public
Rrebeccayc
Last edited Feb 7, 2020
Created on Feb 7, 2020

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`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit

A bowl of fruit depicts five apples as circles, which are eaten, replaced by a lemon, and otherwise removed over time, with each change animated via a one-second transition. The visualization uses D3 v6 with data joins and merge to update SVG circle elements, while ordinal scales map fruit types to colors and radii. The React framework wraps this D3 code, with SVG rendering driven by timed state changes.

CChinzorigt Ganbat
96% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated transitions in D3. The visualization shows five apples rendered as red circles, with one apple turning into a lemon over time and two apples disappearing. The code uses D3 v5's data join, `scaleOrdinal` for color and radius mapping, and `selection.transition` to animate circle radius changes. SVG circles are bound to fruit objects with unique IDs, and exit transitions shrink shapes to zero before removal.

Aaurelio-89
95% 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
95% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit starts with five apples, then changes over time as apples are eaten and one apple is replaced by a lemon. The visualization shows how D3.js handles dynamic data updates by animating circle positions, radii, and colors. The code uses `d3.select`, `d3.range`, and custom scale functions like `d3.scaleOrdinal` to map fruit types to colors and sizes. The D3 `transition` API animates the removal, addition, and modification of circles as the dataset shifts through timed `setTimeout` events.

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

Bowl of Fruit

Five pieces of fruit sit in a row, with apples and lemons distinguished by red and yellow fills and differing radii. The animation shows apples being eaten, a lemon replacing an apple, and another apple disappearing. The piece is built with D3 v6, using `scaleOrdinal` for colors and radii, and `transition().duration(1000)` to animate circle attributes. SVG circles are appended, merged, and removed via `selection.selectAll` and the `fruitbowl` function.

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

Bowl of Fruit - Animated Transitions

A bowl of fruit updates with animated transitions as apples are eaten and one apple becomes a lemon. The visualization uses D3 v5 with a data join, binding fruit objects to SVG circles keyed by unique id. Entering circles grow from radius zero, exiting circles shrink away, and updates transition to new positions and sizes through a 1000-millisecond duration. Colors and radii derive from ordinal scales mapping fruit type to red or yellow and larger or smaller circles.

NNita
94% match