Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit Special Cases and Transitions

✓ Published0🌍 Public
RRobert Curtis
Last edited Nov 8, 2018
Created on Sep 13, 2018

A bowl of fruit renders apples and lemons as colored circles with labels, using d3 transitions to animate changes in a small dataset. Five apples appear initially, then one is removed, another swaps to a lemon, and a final apple disappears. The code uses `scaleOrdinal` for color and radius mapping, while `selection.enter`, `merge`, and `exit` handle state updates. SVG shapes and transitions with `.duration(1000)` smoothly shrink exiting circles and text, and reposition remaining fruit.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of fruit - animated transitions

A row of apples and one lemon sit atop an SVG bowl, with each fruit drawn as a colored circle. The example demonstrates animated transitions as fruits are eaten or replaced: exiting circles shrink to zero radius, while new or changed fruits grow to their target size with color and radius updates. It uses D3 v5's data join, `transition().duration(1000)`, and ordinal scales for color and radius, with `Math.random()` generating fruit IDs.

HHasideluxe
94% match
Loading thumbnail…

Bowl of Fruit General Animated Transitions

Five fruit circles render in an SVG bowl, with apples in red and lemons in yellow. Users can click a fruit to highlight it with a black stroke. Over time, fruits are removed and one apple changes to a lemon, with `transition().duration(1000)` animating radius and x-position changes. The code uses D3 v5 selections, `scaleOrdinal` for colors and radii, and `merge` to coordinate enter-update-exit transitions.

FFhouston17
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: Transitions

A bowl of apples transitions through eat-and-replace actions: apples shrink and vanish, one apple morphs into a lemon, and the layout shifts. D3 v5 selections with `enter`, `merge`, and `exit` handle the data joins, while `transition().duration(1000)` animates radius and fill changes. An ordinal color scale and radius scale map fruit types to red/yellow and 50/30 pixels, rendered as SVG circles.

Bbprokopowicz
93% match
Loading thumbnail…

Bowl of Fruit - Animated Transitions

A bowl of fruit demonstrates animated transitions as apples and lemons are added, removed, and swapped. The visualization uses D3's `scaleOrdinal` for color and radius mapping, `transition` with a 1000-millisecond duration for smooth changes, and `enter`, `merge`, and `exit` selections to handle data updates over time. The SVG circles are positioned horizontally, and the sequential timers trigger state changes.

Zzlastefcia
93% match
Loading thumbnail…

Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a fruit bowl visualization, where apples and lemons enter, exit, and change type with smooth circular motion. It renders SVG circles using d3.v5, with data bound by a random ID key. The `fruitBowl` function uses `selection.enter`, `merge`, and `exit` to join data, while `transition().duration()` animates the circle radius and x-position. A color scale and radius scale map fruit types to visual properties, driven by timed `setTimeout` calls that modify the fruit array and re-render.

Ccodexmon
93% match