Skip to main content
SimilarExport ZIP
100%

Hover to Select

✓ Published0🌍 Public
AArriannePandaraoan
Last edited Apr 21, 2020
Created on Apr 21, 2020

This example demonstrates interactive selection in an animated fruit bowl visualization. Rendered as SVG circles with D3 transitions, apples and lemons move and resize smoothly while mouseover events highlight a selected fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and `selection.on` handlers with a stateful `selectedFruit` variable to trigger re-rendering via `fruitBowl`. Data updates through timed mutations, including removing and replacing fruits, show enter, update, and exit transitions.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hover to Select

Hovering over fruit-shaped circles selects them, highlighting the chosen fruit with a black outline. The visualization shows a row of apples and lemons that animate in and out as the dataset changes over time. It uses D3 v5 with `scaleOrdinal` for colors and radii, and binds data to SVG circles via `selectAll` and data joins. The `fruitBowl` function applies `transition().duration(1000)` for smooth enter, update, and exit animations, with mouseover and mouseout events triggering selection state.

CChristine Lanser
94% match
Loading thumbnail…

Hover to Select - Bowl of Fruit

Eight apples and lemons rendered as colored circles in a black SVG bowl demonstrate direct manipulation through hover selection. D3 v5 code uses `scaleOrdinal`, `attr`, and `.on('mouseover')` to interactively highlight the hovered fruit with a white stroke. The `transition().duration()` method animates circular elements as fruit is eaten, added, or changed via timeouts. The example showcases state management through `setSelectedFruit` and data-driven rendering with local module imports.

JJames Malvern
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

This example shows a bowl of fruit rendered as SVG circles, where hovering over a fruit selects it with a black outline and clicking away deselects it. The visualization uses a D3 v5 data join with enter, update, and exit transitions to animate fruit appearing and disappearing over time. Apples and lemons are distinguished through a d3.scaleOrdinal color and radius scale, while mouseover and mouseout events trigger the selection state.

Aanuj1450
92% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj
92% 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
91% match
Loading thumbnail…

click and hover to select

A bowl of fruit demonstrates selection and dynamic updating. Apples and a lemon are shown as circles with radii and colors mapped via `d3.scaleOrdinal`. Clicking or hovering over a fruit triggers a callback that updates a `selectedFruit` ID, adding a black stroke to the selected item and clearing it on mouse-out. The `bowl` function uses SVG `<circle>` and `<rect>` elements, with `transition().duration(750)` animating position and radius changes when the fruit array is modified over time.

MMert Gürkan
91% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch
91% match
Loading thumbnail…

Fork of Bowl of Fruit (Hover to Select)

This example demonstrates a dynamic fruit bowl visualization where apples and lemons appear, transform, and disappear over time. A black stroke highlights the currently hovered fruit, with the selection state cleared on mouseout. The code uses d3 v6 APIs including `scaleOrdinal` for color and radius mapping, `selection.enter`/`exit` with `transition.attr` for smooth size changes, and `selection.on` for mouse events. The SVG circles are bound to data objects with unique IDs via `data(fruits, d => d.id)`.

BBKirst3
91% match