Skip to main content
SimilarExport ZIP
100%

Bowl of fruit - Hover to select

✓ Published0🌍 Public
JJoachim Klug
Last edited Sep 25, 2020
Created on Sep 25, 2020

Five pieces of fruit sit in a row on a neutral background. Hovering over a fruit selects it with a black outline. A timed script removes fruit, converts an apple to a lemon, and filters the list, using D3’s selection API with merge, exit, and transition methods to animate the changes over one-second durations via `.attr('r', 0)` and `.attr('r', d => radiusScale(d.type))`. The fruit types are distinguished by ordinal color and radius scales.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to select

Five pieces of fruit sit in a row as circles colored by type, either red apples or yellow lemons. Hovering over a fruit outlines it in black while the mouse is over it. Using d3 transitions with `attr` tweening, fruits animate in and out by scaling their radius, while updates such as removal or type change occur on a timer. The code uses `d3.select`, `scaleOrdinal`, and data joins with `.enter()`, `.merge()`, and `.exit()`.

NNikki-gea
96% match
Loading thumbnail…

Bowl of fruit - Hover to select

Five pieces of fruit sit in a rendered bowl, and hovering over an apple or lemon highlights it with a black outline while clearing the selection on mouseout. The example uses D3 v5’s data join and scaleOrdinal for color and radius, with SVG circles and text. Animated updates over time remove and replace fruit, demonstrating enter, update, and exit transitions.

Ppkcesar
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit sit in a row, rendered as circles that scale to their type: apples are large and red, lemons are small and yellow. Hovering over a circle highlights it with a black outline, and a click-free selection updates a variable that triggers an animated re-render via the custom `fruitBowl` module. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition().duration(1000)` methods to animate entering, exiting, and updating circles. An external script drives the scene by removing fruits and mutating an apple into a lemon after timed delays.

Ggabcoderboi
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a row, rendered as colored circles with D3's `scaleOrdinal` mapping types to fill and radius. Hovering a fruit selects it with a black stroke in an animated SVG scene, while the menu updates through `selection.on`. A background timer script mutates the data array over time, adding a lemon, removing fruit, and letting the `transition` API animate shape changes at one-second intervals.

JJonathan Phelps
95% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and one lemon sit in a row, animated with a one-second transition as fruit is eaten or replaced. Hovering any piece outlines it in black, with a click-free selection handled through `mouseover` and `mouseout` events. The D3 v5 code uses `select`, `range`, `scaleOrdinal`, and `transition` to manage enter, update, and exit selections on SVG circles, with color and radius scales mapping fruit type to visual properties.

YYifei Liu
95% match
Loading thumbnail…

Bowl of fruits - hover to select

Five pieces of fruit, represented as red apples and a yellow lemon, sit in a rounded bowl. Hovering over a fruit selects it, highlighting it with a blue stroke, and moving the mouse away deselects it. The fruit enter and exit with animated transitions using D3 v5’s `transition().duration()`, while `scaleOrdinal` maps fruit types to colors and radii. A `rect` forms the bowl, and `mouseover`/`mouseout` events trigger the selection, with fruits rendered in SVG.

Aaxliao
95% match
Loading thumbnail…

Bowl Fruit - Hover to select

Five pieces of fruit in a bowl animate between apples and lemons while responding to hover. D3 v5’s `scaleOrdinal` maps fruit types to colors and radii, and `selection.join` patterns with `transition` handle enter, update, and exit states. Circle elements grow from radius zero and shrink on removal, with an animated swap from apple to lemon. A black stroke highlights the selected fruit via mouseover events that update a `selectedFruit` variable, triggering a re-render. The example uses plain SVG circles and D3 transitions over one second.

JJefferson Abreu
95% match
Loading thumbnail…

Bowl of Fruit - hover to select

Five pieces of fruit sit in a row, each drawn as an SVG circle; hovering over one selects it with a black outline. The bowl updates over time, as apples are removed and one apple changes into a lemon via d3 transitions. The code uses d3.scaleOrdinal for color and radius, data joins with enter/merge/exit, and mouseover/mouseout events to trigger selection.

Aaidanoconnor1
95% match