Skip to main content
SimilarExport ZIP
100%

Bowl of Fruits

✓ Published2🌍 Public
YYasara Peiris
Last edited Jul 22, 2020
Created on Jul 19, 2020

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

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

Bowl Of Fruits

A bowl of fruits demonstrates data binding and animated transitions in D3.js v5. Initially five red apples appear as circles, then examples sequentially remove an apple, change one apple to a yellow lemon, and filter out another fruit. The visualization uses `selection.data()` with key functions, `enter`, `merge`, and `exit` selections, plus `transition()` to animate radius and position changes over 500 milliseconds. SVG circles and text labels are rendered with D3 scales (`scaleOrdinal`) mapping fruit types to colors and sizes.

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

Bowl of fruit

A bowl of five apples rendered as SVG circles uses D3's enter, merge, and exit selections to update the scene. Over time, apples disappear, one transforms into a lemon, and colors and radii shift via ordinal scales and smooth transitions. The animation runs through timed JavaScript calls, with data bound to random IDs for stable updates. D3 v5's selection methods and transition API drive the changes, replacing apples with lemons at fixed x-positions.

Cceresfin
94% 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

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

Bowl of Fruit

A bowl of fruit demonstrates animated enter, update, and exit transitions for SVG circles representing apples and lemons. Five apples initially render, then one is removed, another changes to a lemon, and a third disappears, with each change animating radius and position over one second. The example uses d3.select and d3.range to generate data, and a custom fruitBowl function with d3.scaleOrdinal for color and radius, plus selection.merge and selection.exit with transition.duration.

AAndrewRiceMGW
94% match