Skip to main content
SimilarExport ZIP
100%

Bowl of fruits - click to select

✓ Published0🌍 Public
Ssongr0
Last edited Jul 18, 2019
Created on Jul 18, 2019

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.

AI-generated description

Click to Select

MIT Licensed

Similar vizzes

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

Bowl of fruits - Select by hovering

A bowl of fruits displays apples and lemons as colored circles in a rounded rectangle, with hovering any fruit highlighting it with a thick black outline via a mouseover event that updates the selectedFruit state. Built with D3 v5, the visualization uses a general update pattern to join data to SVG groups and circles, with ordinal scales mapping fruit types to colors and radii, while the data source is a static array modified by timed pop and filter operations.

AAsperge-Atomique
95% match
Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit is drawn as a set of circles, one per fruit, positioned horizontally and sized by type (apples are larger, lemons smaller). Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3.v5 with a scaleOrdinal color scale for red apples and yellow lemons, and a transition system that animates circle radius and position changes over one second as fruits are removed or altered.

PPedro Ernesto Tramontina
95% match
Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits demonstrates interactive data selection and dynamic updates in D3. Apples and lemons are rendered as colored circles with labels, and clicking a fruit selects it, highlighting it with a black stroke. The visualization uses D3's data joins with enter, update, and exit selections to animate fruits appearing, disappearing, and changing type over time via transitions. It employs ordinal scales for color and radius, SVG groups for fruit elements, and click event handlers to update the selected state.

Aarieltonglet
95% 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
95% 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
95% match