Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to select

✓ Published0🌍 Public
SShuyu Zheng
Last edited Jan 22, 2021
Created on Jan 22, 2021

A fruit bowl visualization displays apples and lemons as colored circles. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The code uses D3.js v6 with `scaleOrdinal` for color and radius mapping. Circle positions and radii animate via `transition().duration(1000)`, with enter and exit transitions growing or shrinking circles. The data, generated randomly, is updated through timeouts that remove or reassign fruit types, demonstrating dynamic SVG updates.

AI-generated description
MIT Licensed

Similar vizzes

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

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

Bowl of Fruit - Hover to Select

A bowl of fruit hovers a row of apples and lemons in an SVG canvas; moving the cursor over a fruit selects it, highlighting it with a black outline and triggering an animated resize of the circles. Data is generated procedurally with random IDs, while the visualization uses D3 v5's `select`, `scaleOrdinal`, and `.merge()` API to handle enter, update, and exit transitions over a one-second duration. The fruit bowl remakes itself as apples are eaten or replaced.

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

Bowl of Fruit - Hover to Select

A bowl of five apples is rendered as SVG circles, and hovering over a fruit highlights it with a black stroke while clearing the selection on mouseout. The visualization animates state changes over time as apples are removed or replaced with lemons, using smooth transitions to shrink exiting circles and resize new ones. Built with D3 v5, it employs `scaleOrdinal` for color and radius mapping, data joins with key functions, and transition methods to update circle positions and sizes across a 960 by 500 canvas.

HHelenaShu
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit visualizes data updates with animated circles. Apples and lemons are represented by colored, scaled circles that transition in and out as the dataset changes. Hovering over a circle selects it, highlighting it with a black stroke. The example uses d3.range and d3.scaleOrdinal for positioning and coloring, with d3.transition animating radius and position changes over one second.

NNico Donovan
95% match