Skip to main content
SimilarExport ZIP
100%

Ball of Fruit

✓ Published3🌍 Public
DDanzeOnn
Last edited Jun 20, 2020
Created on Jun 13, 2020
Forked from HTML Starter

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.

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
100% 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
100% match
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
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
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…

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

Bowl of fruit - Click to select

Five circles representing apples animate into a horizontal row, with clicking one highlighting it with a black stroke. Over time, an apple is removed, another changes into a lemon, and a second apple is deleted, demonstrating enter, update, and exit transitions. Built with React and D3 v5, the visualization uses `d3.scaleOrdinal` for color and radius mappings, while `selection.merge` and chained `transition` calls animate circle attributes based on bound fruit data.

BB Sundaresan
88% match