Skip to main content
SimilarExport ZIP
100%

Ball of Fruit

✓ Published1🌍 Public
DDanzeOnn
Last edited Jun 20, 2020
Created on Jun 20, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

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.

DDanzeOnn
93% match
Loading thumbnail…

Ball of Fruit

Fruit appears in a row of apples inside a brown bowl, with each fruit labeled by type. A series of timeouts demonstrates data updates: one apple is removed, another becomes a lemon, and a third is filtered out. The code uses D3 v5 selections and the ordinal scales `scaleOrdinal` for mapping fruit types to colors and radii, with SVG rendering. The `fruitBowl` function manages enter, update, and exit selections for grouped circles and text, updating transforms and attributes via `merge`.

DDanzeOnn
93% 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
92% 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
92% match
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
92% match