Blow of fruit - Hover to select

100%

Blow of fruit - Hover to select

✓ Published0🌍 Public

Last edited Feb 18, 2020

Created on Feb 18, 2020

Forked from Blow of fruit - Click to select

A hovering mouse selects individual fruit in a D3.js animated bowl, highlighting the chosen item with a black outline. The visualization demonstrates data joining and DOM manipulation: fruit enter, update, and exit as the dataset changes over time, with apples and lemons rendered as colored circles. D3 scales map fruit types to colors and radii, while transitions animate size and fill changes. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, `selection.exit()`, and `transition().duration()` to manage the five fruit elements in an SVG.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Blow of fruit - Click to select

This example demonstrates the "blow of fruit" interaction, where a row of apples and lemons moves and changes size with animated transitions. Clicking any fruit toggles a black selection outline, while the fruit bowl updates over time as fruits are removed or transformed. The visualization uses D3 v5’s data joins, `selection.enter`, and `transition` to handle dynamic updates, with an ordinal color scale and radius scale mapping fruit types. SVG groups and circles render each fruit, and click events trigger re-renders of the selection state.

PPotikorn

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

91% match

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

91% match

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

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

90% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit is rendered as an animated SVG, where apples and lemons appear as colored circles that transition in and out of view. Hovering over a fruit selects it, highlighting it with a black stroke; moving the mouse away deselects it. The visualization demonstrates D3’s data join and general update pattern, using `selection.data`, `enter`, `merge`, and `exit` with `transition` to smoothly animate radius and position changes as the dataset is modified over time.

Rrebeccayc

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

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

90% match