Skip to main content
SimilarExport ZIP
100%

Ball of Fruits- Interaction

✓ Published1🌍 Public
FFoysal Ahmed Emon
Last edited Feb 8, 2020
Created on Feb 8, 2020

A set of colored circles represents fruits in a bowl, with apples shown in red and lemons in yellow. Users click a fruit to highlight it with a purple outline, while the entire group smoothly rearranges its positions over time. The visualization uses D3's selection and transition APIs, including `selection.transition().duration()` and `.merge()` to animate enter, update, and exit states. The code relies on `d3.select`, `d3.range`, and `d3.scaleOrdinal` for data generation and color/radius mapping, with data defined as an array of fruit objects that are modified asynchronously.

AI-generated description

Ball of Fruits- Interaction

MIT Licensed

Similar vizzes

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

Bowl of Fruit - CLick to select

This interactive D3.js example displays a bowl of fruit as colored circles, where apples render in red and lemons in yellow, with size encoding fruit type. Users can click or hover over a fruit to select it, which adds a black outline around the chosen circle. The visualization uses D3's ordinal scales for color and radius mapping, and animates circle transitions with the `.transition()` API. Data changes over time, automatically removing fruits and swapping an apple for a lemon, demonstrating dynamic updates with enter, merge, and exit states in SVG.

AAaron Goebel
89% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit shows five apples and lemons as colored circles that users can click to highlight with a black stroke. The visualization demonstrates animated enter, update, and exit transitions as fruits are eaten and replaced over time. Built with D3 v5, it uses ordinal scales to map fruit types to fill colors and radii, while selection joins and `transition().duration()` handle the smooth size and position animations.

RReekMajumder
89% match
Loading thumbnail…

Bowl of fruits- Click to Select

A bowl of fruits visualizes a changing dataset of five circles, each representing an apple or lemon, with color and radius mapped through d3.scaleOrdinal. Clicking a fruit selects it, highlighting the circle with a black stroke. The code uses d3.forceSimulation-like transitions via `transition.attrTween` syntax, but here it applies `transition().duration(1000)` with `attr` calls to animate enter, update, and exit states. Data mutations—removing fruits, changing an apple to a lemon—occur at timed intervals, demonstrating D3’s data join and animated updates in SVG.

KKazushige Okuma
89% match
Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits shows red apples and yellow lemons as circles on a rounded rectangular container. Hovering over a fruit selects it, turning its outline blue. The visualization uses d3-selection with data joins to animate circle radii and positions via transitions, while d3-scaleOrdinal maps fruit types to colors and sizes. Circles enter, update, and exit smoothly over one-second transitions.

BBrett
88% 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
88% 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
88% match