Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to select

✓ Published0🌍 Public
SSimon Pettersson
Last edited Jan 30, 2022
Created on Jan 30, 2022

Five pieces of fruit sit in a row on an SVG canvas, rendered as colored circles whose radius and fill depend on fruit type via `d3.scaleOrdinal`. Hovering a circle triggers a `mouseover` event that calls `setSelectedFruit`, updating a black stroke to highlight the selection. Animations use `selection.transition()` with a 1000-millisecond duration to smoothly move, resize, or remove circles when the data array changes over time. The code imports `scaleOrdinal` from D3 v5 and uses a data join with keyed functions to manage enter, update, and exit selections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles sit in a row, styled as apples and lemons with red and yellow fills via `d3.scaleOrdinal`. Hovering highlights a fruit with a black stroke, calling `setSelectedFruit` on `mouseover` and clearing it on `mouseout`. Removal, replacement, and type changes are animated with `transition().duration(1000)` on `r` and `cx`, using data joins in `d3.selection`. The SVG is rendered with D3 v5, with fruit size determined by a second ordinal scale.

PPedro Ernesto Tramontina
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select.js

Five fruit circles sit in a beige bowl, rendered as SVG rectangles and circles. Hovering over a fruit highlights it with a black stroke, and the selection updates state before smoothly transitioning the circles to new positions and radii. The example uses d3-selection, d3-scaleOrdinal, and d3-transition to animate fruit removal and type changes from apple to lemon, driven by timed mutations of the data array.

Dddperdue
96% match
Loading thumbnail…

Bowl of Fruit - hover to select

Five pieces of fruit sit in a row, each drawn as an SVG circle; hovering over one selects it with a black outline. The bowl updates over time, as apples are removed and one apple changes into a lemon via d3 transitions. The code uses d3.scaleOrdinal for color and radius, data joins with enter/merge/exit, and mouseover/mouseout events to trigger selection.

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

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

WWarren-Fitzhenry
95% match
Loading thumbnail…

Bowl of Fruit, Hover to Select

Five fruit circles sit in a row, transitioning between apples and lemons with hover selection. D3 v5’s data join and ordinal scales for color and radius drive the SVG circles, while `selection.on("mouseover")` and `selection.on("mouseout")` update a selected fruit’s stroke. Enter, merge, and exit transitions animate radii over one second, with fruits added, removed, or replaced via timed data mutations.

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

Bowl of fruit - Hover to select

Five fruit circles appear as a row of apples, rendered with D3 v5 SVG. Hovering over a fruit turns its stroke black, highlighting the selection. Entering and exiting circles animate their radius from and to zero, while a fruit changing type updates its color and size. The code uses D3 selections, data joins, and ordinal scales for color and radius.

IIsmaelHernandezL
95% match