Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit Hover to Select

✓ Published0🌍 Public
KKarkG
Last edited Jul 30, 2020
Created on Jul 29, 2020
Forked from Bowl of Fruit

Five circles represent fruit in a bowl, initially all apples. Hovering over a circle selects it, shown by a thick black outline. The selection triggers a function to update the view. The code uses a custom `fruitBowl` function with `selectAll`, data joins for enter/update/exit, and animated transitions for radius and x-position. Over time, an apple is removed, another apple changes into a lemon, and a second apple is removed, demonstrating dynamic updates to a D3.js visualization.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to select

Five fruit circles, initially apples, animate into a bowl formation. Hovering over a circle selects it, drawing a black outline, while the selection state and data updates are logged. The visualization uses d3.js v5 with ordinal scales for color and radius, and employs transition-based enter, update, and exit animations for data changes. It demonstrates dynamic data manipulation by removing fruits and changing an apple to a lemon.

EEdoardoRegini
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing apples appear in a bowl-shaped row, with a lemon replacing one apple after two seconds. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The visualization uses d3.v7 with an SVG data join, `scaleOrdinal` for color and radius, and `transition().duration()` to animate fruit entry, exit, and type changes. The code also uses `selection.merge` and `selection.exit` for smooth updates.

Yyejichun@naver.com
96% match
Loading thumbnail…

Bowl of Fruit -Hover to select

Five fruit circles represent apples and lemons in a simple SVG bowl. Hovering over a circle selects it with a black outline. The visualization uses D3’s ordinal color and radius scales to map fruit type to red or yellow fill and size. The `fruitBowl` function animates circle enter, update, and exit transitions over 1000 milliseconds. A script demonstrates dynamic updates by removing apples, replacing one with a lemon, and filtering data.

Pprincit
95% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles represent fruit in a bowl, with apples and lemons colored by a d3.scaleOrdinal. Hovering over a circle selects it with a black stroke, and the selection is managed through a state variable. The fruitBowl function uses data joins and transitions to animate the addition, removal, and type changes of fruit over time. The code employs d3-selection, d3-transition, and d3-scaleOrdinal with SVG rendering.

OOleg
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj
95% match
Loading thumbnail…

Bowl of Fruit - Hover To Select

Five circles represent apples and a lemon in a bowl, with hovering over any fruit highlighting it with a black stroke. The code uses D3 v5 with an ordinal color scale and radius scale, binding data to SVG circles. Enter, update, and exit selections are animated via transitions over one second, while mouseover and mouseout events trigger a selection callback that re-renders the visualization.

NNita
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A data-driven fruit bowl shows five apples as colored circles, which shrink and disappear when eaten, and one apple transforms into a lemon. Hovering over any fruit selects it, adding a black stroke, and moving the mouse away removes the selection. The visualization uses D3 v6’s data join with `selection.merge` and transitions to animate radius changes over one second, while a scaleOrdinal maps fruit types to colors and sizes.

HHe Jianfeng
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Hovering over a circle highlights it with a black outline to select the fruit, and moving the mouse away deselects it. The visualization animates fruit entering, exiting, and changing type using D3 v5’s data join and `transition` methods, with scales for color and radius. Apples are red and larger than yellow lemons, arranged in a row. The `fruitBowl` function manages the SVG circles, while `index.js` drives updates through timed `setTimeout` events that remove or replace fruit.

HHeechan lee
95% match