Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover

✓ Published0🌍 Public
Nnkohdatavis
Last edited Jul 24, 2020
Created on Jul 24, 2020

A bowl of fruit displays five circles that animate into apples and lemons as they enter, resize, and exit the SVG. Hovering over a circle highlights it with a black outline, and the selection state updates the stroke accordingly. The code uses a data join with `selection.data`, `enter`, `merge`, and `exit` transitions, leveraging `transition.attr` for smooth radius and position changes. D3’s `scaleOrdinal` maps fruit types to colors and radii, while mouseover and mouseout events trigger the `setSelectedFruit` state handler.

AI-generated description

Bowl of Fruit - Hover

MIT Licensed

Similar vizzes

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

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

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

Bowl of Fruit - Hover to Select

Five fruit circles sit in a row, animating in and out as apples are removed, replaced by a lemon, and filtered from the bowl. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses D3 v5’s data join, `transition().duration(1000)` for smooth radius and position changes, `scaleOrdinal` for color and size, and SVG circles with mouseover/mouseout event handlers.

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