Skip to main content
SimilarExport ZIP
100%

Ball of Fruit

✓ Published0🌍 Public
DDanzeOnn
Last edited Jun 20, 2020
Created on Jun 20, 2020
Forked from Ball of Fruit

Animated SVG circles represent apples and lemons in a fruit bowl, with hover events selecting a fruit and triggering a black outline. The visualization uses d3’s `scaleOrdinal` for color and radius mapping, and `transition` for smooth resizing and repositioning. Written in React with D3 v5, the data is a JavaScript array whose length and fruit types change over time, demonstrating enter, update, and exit transitions as fruits are added, removed, or substituted.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ball of Fruit

Five apples rendered as red circles transition into a bowl, with one apple transforming into a yellow lemon while another disappears. The D3.js v5 example uses `scaleOrdinal` for color and radius mapping, `transition()` for animated duration changes, and React-style selection merging. The `fruitBowl` component handles enter, merge, and exit states with click-driven stroke highlighting. Data is stored as an in-memory array of fruit objects with random IDs, and the SVG output uses a 960x500 canvas with animation over three timed steps.

DDanzeOnn
93% match
Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

DDanzeOnn
92% match
Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

DDanzeOnn
92% match
Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

DDanzeOnn
92% match
Loading thumbnail…

Ball of Fruits- Hover interaction

Five circles render as apples that morph and reorder into a static row until one fruit shrinks and a later fruit turns into a lemon. Hovering a fruit highlights its stroke in purple via a mouseover handler that updates a selectedFruit state. The visualization uses d3’s scaleOrdinal for color and radius, transition().duration() for 1000ms position and size animations, and SVG circle/text elements. Data is generated in JavaScript with range() and Math.random().

FFoysal Ahmed Emon
91% match
Loading thumbnail…

Ball of fruit

A bowl of fruit animation shows five apples shrinking and disappearing, with one apple transforming into a lemon and a second apple being removed entirely. The D3.js v5 and `scaleOrdinal` API map fruit types to distinct radii and colors, while the `transition().duration()` method animates the circle radii over one-second intervals. The SVG circles enter with a radius of zero, expand to their assigned size, and exit by shrinking back to zero, driven by timed `setTimeout` callbacks that mutate the fruit data array.

SSaroj Khanal
90% match
Loading thumbnail…

fruit bowl

A fruit bowl visualization uses D3 v5 and React to display an animated collection of circles representing apples and lemons in an SVG. The data array changes over time as fruits are eaten, replaced, or removed, triggering smooth 1000ms transitions via `transition()` and `duration()`. A `scaleOrdinal` maps fruit types to colors (red for apples, green for lemons) and radii (50 for apples, 30 for lemons). The `enter`, `merge`, and `exit` selections manage circle updates, with exiting fruits shrinking to zero radius before removal.

Ssagarknt97
90% match
Loading thumbnail…

Ball of fruit

Five fruit circles start in a row as red apples. The visualization animates through a sequence: one fruit disappears, the middle apple turns yellow to become a lemon, and another fruit is removed. Using D3 selection transitions, each circle’s radius and fill are interpolated from scales defined with `scaleOrdinal`, including radius values of 50 and 30 and colors red and yellow. The code demonstrates D3’s `.transition()` API with `.duration()` for entering, merging, and exiting elements within an SVG.

CChocoOrange
90% match