Bowl of Fruit - Hower to Select

100%

Bowl of Fruit - Hower to Select

✓ Published0🌍 Public

Last edited Mar 19, 2020

Created on Mar 17, 2020

Forked from Bowl of Fruit - Click to Select

A bowl of fruit demonstrates interactive selection and data updates. Apples and lemons appear as colored circles, with a black outline highlighting the fruit under the mouse. The example uses D3 v5 with a `scaleOrdinal` for colors and radii, and `transition().duration()` for smooth enter, update, and exit animations. The data is simulated client-side with `Math.random()` IDs, and selection changes trigger a re-render via `setSelectedFruit`. Apples are removed and a lemon replaces one apple over time, showing live updates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

YYF

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

93% match

Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection and animated updates in D3.js v5. Clicking a circle highlights it with a black stroke and updates a selectedFruit variable, triggering a re-render. The fruitBowl function uses data joins with enter, merge, and exit selections, applying transitions on circle radii and positions. Ordinal scales map fruit types to colors and sizes, while setTimeout calls animate changes like removing apples, replacing one with a lemon, and filtering the data.

XX. N. Chu

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

93% match

Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit shows a row of apples that users can click to select, with the chosen fruit outlined in black. The visualization demonstrates enter, update, and exit transitions as fruits are added, removed, or changed—apples shrink away, a lemon appears, and remaining fruit animates to new positions. Built with D3 v5, it uses `scaleOrdinal` for color and radius mapping, binds data by unique ID, and applies `transition().duration(1000)` for smooth size and position changes. Click interactions trigger re-renders via a callback, updating the selected state.

YYifei Liu

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

93% match

Loading thumbnail…

Bowl of fruit - hover to select

Five fruit circles, initially all apples, transition between fruit types and removal over time, with hover interactions selecting a fruit and highlighting it with a black stroke. The example uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius mapping, and `selection.transition().duration(1000)` to animate entering, updating, and exiting elements in SVG. Apples are eaten and replaced by a lemon through timed updates, demonstrating dynamic data binding and interactive selection.

HHasideluxe

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

93% match