Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
HHelenaShu
Last edited Oct 9, 2019
Created on Sep 4, 2019

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.

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

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch
96% match
Loading thumbnail…

Bowl of fruit - hover to select

Five apples in a bowl render as SVG circles whose size and color map to fruit type via `d3.scaleOrdinal`. Hovering over a fruit calls the `setSelectedFruit` prop, redrawing the selection with a black stroke. Using D3 v5 data joins and `transition`, the visualization animates changes over time—removing fruit, replacing an apple with a lemon, and deleting another—while text labels update via `.merge()` on enter/update selections.

WWhitney Hung
96% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles, apples and a lemon, render in an SVG bowl and animate their positions and radii with d3 transitions. Hovering a fruit selects it, drawing a black stroke via d3’s selection.on and a scaleOrdinal color scale. The data updates through setTimeout calls that remove apples or replace one with a lemon, with exit transitions shrinking removed circles. The code uses d3.v5’s select, range, and merge for enter-update-exit patterns.

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

Bowl of Fruit: Hover to Select

Five apples appear in a row on an SVG canvas, each rendered as a filled circle. Hovering over a fruit highlights it with a black stroke, and moving the mouse away removes the highlight. The example uses d3-selection’s data join and transitions to animate the circles’ entry, exit, and size changes as apples are eaten or replaced by a lemon. A color scale maps fruit types to red or yellow, while a radius scale distinguishes apple and lemon sizes.

Bbprokopowicz
96% match
Loading thumbnail…

Bowl of Fruit - Hover to select

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.

SShuyu Zheng
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Ccodexmon
96% match