About fruits

100%

✓ Published1🌍 Public

Last edited Jun 4, 2020

Created on Jun 3, 2020

Five apples are arranged in an SVG bowl, then one is removed, one is replaced by a lemon, and another is removed in sequence. Animated transitions move each fruit horizontally and resize it according to its type using `d3.scaleOrdinal` color and radius scales. The `fruitBowl` function handles data joins with `.enter()`, `.merge()`, and `.exit()`, using d3's `.transition()` for morphing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

About fruits

Five apples render in an SVG bowl, then update through timed data joins: one apple disappears, another becomes a lemon, and a third is removed. The fruit bowl chart uses d3-selection’s `enter` and `merge` methods to bind fruit objects to groups containing circles and text labels. `d3.scaleOrdinal` maps fruit types to colors and radii, with the code drawing from d3.v5.

WWhitney Hung

95% match

Loading thumbnail…

About fruits

This example shows how a data join animates changes to a fruit bowl. Five apples are initially rendered as circles, then one is removed, another transforms into a lemon, and a third is eaten, all with smooth transitions. Using D3's `select`, `range`, and `scaleOrdinal`, the `fruitBowl` function manages circle enter, update, and exit states via `.transition().duration(1000)`, animating radius and position. The SVG output is updated dynamically as JavaScript timeouts trigger the re-rendering.

WWhitney Hung

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

91% 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

91% 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

90% match

Loading thumbnail…

Bowl of fruit - nested

Five animated fruit objects—apples and lemons—populate a bowl and rearrange over time. A JavaScript array of fruit objects changes through removal and replacement, and each alteration triggers a re-render. Using D3 v5 with SVG, the `data join` pattern manages enter, update, and exit transitions. Fruits animate from random positions into a row and back out, with size and color mappings distinguishing types. The example uses D3's `select`, `range`, `scaleOrdinal`, and `.transition().duration()` for smooth movements.

MMiyamotodan

90% 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

90% match

Loading thumbnail…

Bowl of fruit - nested and with transition

A bowl of fruit demonstrates nested SVG group elements and animated transitions. Five apples initially render in a row, with each fruit represented as a group containing a circle and a text label. At one-second intervals, an apple disappears, an apple transforms into a lemon, and the second apple is removed. D3's data join with key functions tracks fruits by unique IDs, while `transition().duration(1000)` animates position changes on exit. Scales map fruit types to colors, radii, and stroke styles.

Uumihito

90% match