Bowl of Fruit - Hover to Select

100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Jul 14, 2020

Created on Jul 14, 2020

Forked from Bowl of Fruit - Click 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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

94% match

Loading thumbnail…

Bowl of Fruit - Hover to select

A row of fruit circles animates as apples shrink and disappear or transform into lemons, with a black outline highlighting whichever fruit is hovered. The example demonstrates D3 v5 data joins and transitions, using `scaleOrdinal` for color and radius, plus mouse events to update a selected fruit state. SVG circles enter, update, and exit with 1-second transitions as the underlying array changes over time.

Ccornshoots

94% match

Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit rendered as circles animates through a sequence of changes: fruits disappear, and one apple transitions into a lemon. Hovering over any fruit selects it, displaying a black outline until the mouse moves away. The example uses d3-selection with data joins and transitions to animate circle radii and positions, while d3-scaleOrdinal maps fruit types to colors and sizes. The application state manages a selected fruit ID and triggers re-renders through a custom `fruitBowl` function.

CChinzorigt Ganbat

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing fruit transition into and out of a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, while the `fruitBowl` function uses D3 v5's data join and `transition().duration(1000)` to animate shape changes. The example demonstrates ordinal scales for mapping fruit type to color and radius.

YYF

94% match

Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit demonstrates enter, update, and exit selections with animated transitions. Hovering over a circle highlights it with a black stroke and triggers a callback to update the selected state. Using d3.v6, the fruitBowl function maps apple and lemon types to radii and colors via scaleOrdinal, while transitions animate radius and position changes over one second.

PPiotr Paszek

94% match