Bowl of Fruit -Hover to Select

100%

Bowl of Fruit -Hover to Select

✓ Published0🌍 Public

Last edited Aug 8, 2019

Created on Aug 8, 2019

Forked from Bowl of Fruit -Click to Select

Five fruit circles enter the bowl and animate to full size using D3 transitions. Hovering strokes a selected fruit black, while the selection state updates through a callback. The example demonstrates data joins and enter/update/exit patterns with `d3.scaleOrdinal` for color and radius, and `transition.attr` for animations. Fruits are removed or mutated over time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles animate into a bowl as apples and lemons, each encoded with distinct colors and radii. Hovering highlights a fruit with a black outline and updates the selected state, while non-selected fruits lose the stroke. The example uses D3 v5 with a data join, `scaleOrdinal` for color and size, and transitions to animate entering, updating, and exiting circles. A `setSelectedFruit` callback triggers re-rendering on mouseover and mouseout, demonstrating interactive selection with animated state changes.

AAmol Kulkarni

96% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

WWarren-Fitzhenry

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

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select.js

Five fruit circles sit in a beige bowl, rendered as SVG rectangles and circles. Hovering over a fruit highlights it with a black stroke, and the selection updates state before smoothly transitioning the circles to new positions and radii. The example uses d3-selection, d3-scaleOrdinal, and d3-transition to animate fruit removal and type changes from apple to lemon, driven by timed mutations of the data array.

Dddperdue

95% match

Loading thumbnail…

Bowl of Fruit, Hover to Select

Five fruit circles sit in a row, transitioning between apples and lemons with hover selection. D3 v5’s data join and ordinal scales for color and radius drive the SVG circles, while `selection.on("mouseover")` and `selection.on("mouseout")` update a selected fruit’s stroke. Enter, merge, and exit transitions animate radii over one second, with fruits added, removed, or replaced via timed data mutations.

Ccledevoute

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

95% match

Loading thumbnail…

Bowl of fruit - Hovering

Five fruit circles enter an SVG as apples and lemons, with mouseover highlighting a selected fruit with a black stroke. The example demonstrates data joins and animated transitions in D3 v5: fruit enters by expanding from radius zero, exits by shrinking, and updates move and recolor via `selection.merge` and `transition`. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `data` keyed by fruit ID to track entering, updating, and exiting elements over time.

MMaciek Sitkowski

95% match

Loading thumbnail…

Bowl of Fruit - hover to select

Five fruit circles sit in a row and animate in with a smooth transition. Hovering over any fruit strokes it black, while removing the mouse clears the selection. The code uses D3 v5’s data join with a key function to update exiting circles, scaling radius and fill via ordinal scales per fruit type. Over time, a timer script removes and replaces apples with lemons, demonstrating animated enter, update, and exit transitions.

1123fischer

95% match