Skip to main content
SimilarExport ZIP
100%

Hover to Select

✓ Published0🌍 Public
CChristine Lanser
Last edited Oct 6, 2020
Created on Oct 6, 2020
Forked from Untitled

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.

AI-generated description

click on circle to slect

MIT Licensed

Similar vizzes

Loading thumbnail…

Hover to Select

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.

AArriannePandaraoan
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Hovering over a circle highlights it with a black outline to select the fruit, and moving the mouse away deselects it. The visualization animates fruit entering, exiting, and changing type using D3 v5’s data join and `transition` methods, with scales for color and radius. Apples are red and larger than yellow lemons, arranged in a row. The `fruitBowl` function manages the SVG circles, while `index.js` drives updates through timed `setTimeout` events that remove or replace fruit.

HHeechan lee
93% 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
93% 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
93% 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
92% match
Loading thumbnail…

D3 Bowl of Fruit - Hover to Select

A dynamic scatterplot of fruit items animates apples and lemons as circles, with hover selecting a fruit and highlighting it with a black outline. The D3 version 5 example uses the `select` and `range` functions to manage an SVG, while `scaleOrdinal` maps fruit types to colors and radii. The `fruitBowl` module handles enter, update, and exit transitions via `transition().duration(1000)`, animating circle radius and position over time. Data changes occur through timed calls that pop, mutate, push, and filter the fruit array.

Rrdeichert
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
92% 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
92% match