Skip to main content
SimilarExport ZIP
100%

Bowl of fruits- Click to Select

✓ Published1🌍 Public
KKazushige Okuma
Last edited Oct 4, 2019
Created on Sep 24, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Pprincit
95% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of five apples animates with smooth transitions, letting viewers click any fruit to highlight it with a black stroke. The visualization demonstrates data joins and update patterns via d3 transitions, removing apples and morphing one into a lemon over time. Using d3.scaleOrdinal for color and radius mapping, it binds fruit objects keyed by unique IDs, with enter, update, and exit selections animating circle attributes through the d3 v5 API. The SVG rendering approach shows how d3 handles dynamic array manipulation and user interaction.

1123fischer
95% match
Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits visualizes a dataset of apples and lemons as colored circles within a bowl-shaped rectangle. Hovering over a fruit selects it, highlighting its outline in blue. Built with D3 v5, the example uses `selection.data`, `transition.attr`, and `scaleOrdinal` to map fruit types to colors and radii. Fruits are added, removed, and transformed via timed `setTimeout` calls, with enter, update, and exit selections animating their appearance and disappearance.

Ssongr0
95% match
Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit visualization displays five apples as colored circles, which can be clicked to select. The selection enlarges the chosen fruit, and over time apples are removed or replaced with lemons, with animations transitioning circle radii. The example uses d3 v5 with the `scaleOrdinal` color and radius scales, and shows enter, merge, and exit transitions via `transition().duration()`. The SVG rendering is updated through a `fruitBowl` function that handles click events and data changes.

MMaciek Sitkowski
94% match
Loading thumbnail…

Bowl of fruit Click to Select

A bowl of fruit visualization demonstrates animated selection and data updates. Five circles representing apples and lemons move horizontally, with the selected fruit highlighted by a black stroke. The view uses d3.select and d3.range to generate initial data, with scaleOrdinal mapping fruit types to colors and radii. Fruit removal, type changes, and interactive clicking trigger transitions via d3.transition().duration, animating circle positions and sizes over one-second intervals. The implementation uses React, SVG rendering, and D3 v5.

Jjeelong
94% match
Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit displays five circles representing apples and lemons, each clickable to select and highlight with a black stroke. The visualization uses D3 v6 with SVG rendering and animation, employing `scaleOrdinal` for color and radius mapping based on fruit type. State changes include eating an apple and replacing one with a lemon, triggering enter, update, and exit transitions that animate radius from zero to full size over one second.

PPiotr Paszek
94% match
Loading thumbnail…

Bowl of fruits - Click

A bowl of five apples is shown as colored circles, which can be clicked to select a fruit and highlight it with a black outline. Over time, the apples are eaten, replaced with a lemon, and eventually rot, changing their color and radius with animated transitions. Built with D3 v5, the visualization uses `scaleOrdinal` for color and radius mapping, `selection.data` with a key function for updates, and chained `transition` calls to animate enter, update, and exit states.

Nnikeshkv
94% 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
94% match