Skip to main content
SimilarExport ZIP
100%

Bowl of fruits - click to select

✓ Published2🌍 Public
BBrett
Last edited Jul 16, 2019
Created on Jul 16, 2019

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.

AI-generated description

Click to Select

MIT Licensed

Similar vizzes

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
96% 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
96% 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

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
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 Fruit - Click To Select

A circular fruit bowl displays apples and lemons that users can click to select, with the chosen fruit highlighted by a thick black stroke. The visualization uses D3.js ordinal scales for color and radius mapping, and animated transitions smoothly resize circles on entry or exit when fruits are removed or replaced. The example animates data changes over time, showing apples being eaten and one apple transforming into a lemon, while maintaining click-based selection throughout the updates.

NNita
95% match
Loading thumbnail…

Bowl of fruits, hover to select

Five fruit circles appear in a row, with apples rendered larger and red, lemons smaller and yellow. Hovering over a fruit selects it, adding a thick black stroke, and hovering away removes the selection. The visualization uses D3 v5 with an SVG rendering and animated transitions, updating the data-bound circles through a custom `fruitBowl` module that leverages `scaleOrdinal` for color and radius scales.

YYedrup
95% match
Loading thumbnail…

Bowl of Fruit - click to select

Five circles render a bowl of fruit where apples and lemons appear as red and yellow circles of different sizes. Clicking a fruit selects it and highlights it with a black stroke. The visualization animates circle radius, position, and color transitions over one second using D3's transition system. Data updates through timed scripted events that remove fruits or change an apple into a lemon in real time.

DDi Zhen
95% match