Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit

✓ Published2🌍 Public
ZZY Huang
Last edited Apr 25, 2020
Created on Apr 25, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit: Animated Transitions

Five circles representing apples appear in a row, rendered as SVG circles with a red fill. Over two seconds, one fruit is removed and a middle apple transitions to a lemon, changing its color to yellow and shrinking its radius. The example uses d3 v5 with selection joins, `.enter()`, `.exit()`, and scaleOrdinal for color and size mappings, demonstrating basic animated data updates.

JJonathan
94% match
Loading thumbnail…

Bowl of Fruit

Five fruit circles represent apples and lemons in an animated bowl. The visualization uses a D3 v5 data join to update the SVG, with fruits appearing, disappearing, and changing type over timed intervals. A scaleOrdinal color scale maps apples to blue and lemons to yellow, while another scale assigns radii of 50 and 30 pixels. The code transitions the circle radius property over one second for entering and exiting elements.

AAtrayeeDeb
94% match
Loading thumbnail…

Bowl of fruit-2

Five fruit circles enter as apples, then one is removed, another changes from apple to lemon, and a third is filtered out, with each state transitioned over one second. The SVG animation uses D3 v5 data joins with enter, merge, and exit selections, and renders circles whose fill and radius come from ordinal color and radius scales.

Kkaviya-ds
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
Loading thumbnail…

Bowl of fruit

Five circles represent fruit in a bowl, with apples as red and lemons as yellow, animating their radius and horizontal position over one second. The demo uses d3 v5 with `scaleOrdinal` for color and size mapping, while `selection.enter`, `merge`, and `exit` handle data joins. A timed sequence eats apples by removing elements and swaps one apple for a lemon, showing transitions with `transition.duration`.

PPedro Ernesto Tramontina
94% match
Loading thumbnail…

Bowl of fruit. Click to Select

Five circles represent apples in a bowl, rendered as red SVG circles using d3.scaleOrdinal for color and radius. Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3 transitions to animate enter, update, and exit states, with fruits shrinking to zero radius on removal. Over three seconds, the code programmatically removes apples and changes one to a lemon, demonstrating data joins with d3.v5.

AAlex Arobelidze
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit enter the SVG with a 1-second transition, each colored by a d3.scaleOrdinal mapping apples to red and lemons to yellow. Clicking a circle selects it, applying a black stroke via the data join and transition. The scene’s data updates are arranged with setTimeout: apples are removed from the end, the third fruit changes type to a lemon, and another apple is filtered out, demonstrating enter, update, and exit transitions.

Iianleekq
94% 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
94% match