Skip to main content
SimilarExport ZIP
100%

Bowlfruit to select

✓ Published0🌍 Public
VVito
Last edited Nov 29, 2019
Created on Nov 29, 2019
Forked from Click to Select

Five fruits in a bowl transition between apples and lemons, with a black outline highlighting whichever fruit the pointer hovers over. The visualization demonstrates animated enter, update, and exit selections using D3 v5’s data join, transitioning circle radii from zero and updating positions via `transition().duration(1000)`. Mouseover and mouseout events trigger a state change through a `setSelectedFruit` callback, which re-renders the SVG with updated stroke styling. The code uses `d3.scaleOrdinal` for color and radius mappings, and `d3.range` to generate the initial dataset.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles initially render as apples via an ordinal color scale and size scale, then update through d3 transitions when the data changes—removing a fruit, converting one to a lemon, and filtering another. Hovering a circle triggers `mouseover` and `mouseout` events that call `setSelectedFruit`, toggling a black stroke on the selected fruit. The visualization uses D3 v5's data joins, `selection.enter`, `merge`, `exit`, and `transition` APIs to animate the SVG elements.

DDaniel García
94% 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
94% match
Loading thumbnail…

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

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

Bowl of Fruit: Click to select

Five apples and a lemon appear as colored circles in an SVG bowl, where clicking any fruit selects it with a black stroke outline. The example demonstrates animated data joins with D3 v5, using `scaleOrdinal` for color and radius mappings, `transition.attr` for smooth enter/exit animations, and event handlers on merged selections to update the selected fruit state.

AAjit Singh
94% match
Loading thumbnail…

Bowl of fruit - hover to select

Five fruit circles, initially all apples, transition between fruit types and removal over time, with hover interactions selecting a fruit and highlighting it with a black stroke. The example uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius mapping, and `selection.transition().duration(1000)` to animate entering, updating, and exiting elements in SVG. Apples are eaten and replaced by a lemon through timed updates, demonstrating dynamic data binding and interactive selection.

HHasideluxe
94% 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
94% match