Skip to main content
SimilarExport ZIP
100%

Bowl of Fruits: Hover to Select

✓ Published0🌍 Public
Ppeterjchan
Last edited Apr 1, 2020
Created on Apr 1, 2020

Five apples and a lemon sit in a brown bowl on a light background. Hovering over any fruit highlights it with a black outline. The fruit bowl uses D3 v5 data joins and ordinal scales for color and radius, with transitions animating the addition and removal of fruit over time.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples appear in a row on a neutral background. Hovering over a fruit highlights it with a black outline and turns it green, while moving the mouse away removes the selection. The visualization uses D3 v5 data joins and ordinal scales to map fruit types to radii and colors, and transitions animate the entry, exit, and attribute changes. Apples are removed, one is transformed into a lemon, and the selection state is managed by a callback that triggers re-renders.

MMichał Szumnarski
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 apples and one lemon appear as circles in a bowl, with a dark outline highlighting whichever fruit is hovered. The visualization uses D3 v5’s data joins and ordinal scales to map fruit type to color and radius, while transitions animate shapes smoothly over one second. Repeated renders via `setTimeout` remove fruits and change an apple to a lemon, demonstrating enter, update, and exit selections in SVG.

MMuhammad Jarir Kanji
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

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 sit in a bowl, rendered as red circles with labels; hovering over a fruit highlights it with a black stroke, and selecting triggers updates. Over three seconds, the data changes: an apple is eaten, one becomes a yellow lemon, and another is removed, showing animated transitions. Built with d3 v5, it uses selection joins, `scaleOrdinal` for color and radius, and SVG circles, rects, and text elements within a single `<g>` per fruit.

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

Bowl of Fruit - Hover to select

Five apples sit in a bowl and react to a timed sequence: one is removed, another transforms into a lemon, and a third disappears. Hovering over any fruit highlights it with a black outline. Built with D3 v5, the example uses chained `transition()` methods to animate position, radius, and opacity, while `scaleOrdinal` maps fruit types to colors and sizes.

TThomas Seberechts
95% match