Skip to main content
SimilarExport ZIP
100%

Hover to Select, Click apple to convert to lemon and click lemon to delete

✓ Published1🌍 Public
Ccsroysudarshan
Last edited Apr 12, 2020
Created on Apr 11, 2020

An interactive D3 v5 visualization presents a bowl of five apples rendered as SVG circles. Hovering over a fruit selects it with a black stroke. Clicking an apple animates its color and radius to transform into a lemon, while clicking a lemon removes it from the bowl with a shrinking transition. The code uses `scaleOrdinal` for color and radius mappings, and `transition().duration(1000)` for smooth animations, driven by data join with enter/update/exit selections.

AI-generated description
MIT Licensed

Similar vizzes

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

Hover to select

A row of apples appears in an SVG canvas, with hover highlighting a fruit by adding a black stroke. As time passes, apples are removed and one becomes a lemon, with D3 transitions animating the circle radii and positions. The example uses `d3.scaleOrdinal` for color and radius mapping, and binds data with key functions to update and exit elements smoothly.

RRoger Yu-Hsiang Lo
90% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples hover to select, showing a black stroke on the chosen fruit. After one second, an apple is removed; at two seconds, the third apple turns into a lemon; and at three seconds, the second apple disappears. The visualization uses D3 v5’s `scaleOrdinal` for color and radius, and SVG transitions animate entering, updating, and exiting circles with a one-second duration.

JJordan Chiu
90% match
Loading thumbnail…

Fork of Fork of Bowl of Fruit - Hover to Select

Using D3 v5, this visualization displays a row of five apples as colored circles that animate in size and position. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses `scaleOrdinal` for color and radius, `transition().duration()`, and a data join with `enter`, `merge`, and `exit`. Over time, `setTimeout` calls remove apples or change one to a lemon, demonstrating animated updates to the SVG scene.

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

Boll of fruit - click to select

Five apples transition into a bowl, resizing and recoloring via ordinal scales, while click-to-select highlights a fruit with a black stroke. The D3 v5 data join manages enter, update, and exit states, animating radius and position with `transition().duration(1000)`. Apples are removed, replaced with lemons, and filtered over timed intervals, demonstrating object-consistent updates through a key function. SVG rendering with `scaleOrdinal` for colors and radii drives the interactive, animated visualization.

Lloicvdk
89% match
Loading thumbnail…

Bowl of Fruit - hover to select

Five apples hover in a row; mousing over one highlights it with a black outline, and clicking is disabled. The visualization demonstrates data joins and transitions using D3 v5, where apples shrink and disappear, and one apple morphs into a lemon over time. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates enter, update, and exit selections.

RReekMajumder
89% match
Loading thumbnail…

Bowl of Fruit — Hover to Select

Five apples and one lemon appear as circles in a bowl, with a dark outline highlighting whichever fruit is hovered. The visualization uses D3 v5’s data joins and ordinal scales to map fruit type to color and radius, while transitions animate shapes smoothly over one second. Repeated renders via `setTimeout` remove fruits and change an apple to a lemon, demonstrating enter, update, and exit selections in SVG.

MMuhammad Jarir Kanji
89% match