Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
Tthanhtrant219
Last edited Apr 14, 2020
Created on Apr 14, 2020

A bowl of fruit demonstrates data joins with D3 v5, using an ordinal scale to assign colors and radii to apples and lemons rendered as SVG circles. As the underlying array changes over time—removing fruits, replacing one apple with a lemon, and filtering another—the visualization updates through enter, update, and exit selections. The `fruitBowl` module applies `scaleOrdinal` for both color and size, while `selection.merge` and `selection.exit` manage the transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a data join pattern with D3 v5, showing how a list of apples and lemons responds to changes over time. Five apples appear in a rendered bowl, then a fruit is removed, one apple changes to a lemon, and another apple disappears. The `fruitBowl` function uses `scaleOrdinal` for color and radius, while `selection.data`, `enter`, `merge`, and `exit` manage SVG `g`, `circle`, and `text` elements, updating positions with `attr('transform')` and `transition`.

Ssiddharth171
96% match
Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates animated data joins with D3 using ordinal scales to map fruit types to colors and radii. Apples appear as red circles, lemons as yellow ones, with text labels below each shape. The visualization uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections as fruits are removed or changed over timed intervals. The code employs `scaleOrdinal`, `range`, and SVG rendering with `attr` and `merge` operations.

Jjlspangl
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

The visualization shows a bowl of fruit where individual apples and a lemon can be clicked to select them, highlighting the chosen fruit with a thick black stroke. The fruit bowl updates over time as apples are removed or replaced, demonstrating data join transitions. Built with d3.v5, the example uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and event handlers on circles for click interactions.

MMiish84
94% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates data joins with enter, update, and exit selections. Apples and lemons appear as colored circles that animate in, move, and shrink away as the dataset changes over time. Built with D3 v5, the example uses `selection.data`, `merge`, and `transition` to handle dynamic updates, while `scaleOrdinal` maps fruit types to colors and radii. The SVG circles animate their position and size over one-second transitions.

MMiyamotodan
94% match
Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit demonstrates animated data joins in D3 v6. Five apples appear as red circles, with a black stroke highlighting the currently selected fruit after a click. Over time, apples are removed, one apple transforms into a lemon, and the remaining selection is filtered. The example uses `d3.scaleOrdinal` for colors and radii, `selection.data` with key functions, `transition` for smooth enter/exit animations, and event handlers to manage selection state.

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

Fork of bowl of fruit

A basket of fruit demonstrates animated data joins in D3 version 5. The visualization shows a row of apples and lemons, with circles and text labels representing each fruit. Using the `fruitBowl` module with `d3.scaleOrdinal` for color and radius, the code handles enter, update, and exit selections via `selection.merge` and `selection.exit`. Timed updates over three seconds remove apples, change one apple to a lemon, and filter another apple, illustrating dynamic SVG transitions with keyed data.

Jjlspangl
93% match