Skip to main content
SimilarExport ZIP
100%

Fruit Bowl - Hover To Select

✓ Published0🌍 Public
AAmar Nath Yogi
Last edited Jan 29, 2020
Created on Jan 29, 2020

Five fruits sit in a brown-rimmed seashell bowl as SVG shapes, rendered with D3 v5. Hovering a fruit selects it with a black stroke while a mouse-out deselects. Using D3's `scaleOrdinal` for color and radius, the code binds fruit data with key functions, applies enter/exit transitions, and animates fruit position and type over timed intervals.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to select

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.

SSimon Pettersson
93% 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
93% 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
93% 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
93% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit shapes appear in a row, rendered as SVG circles with a bowl drawn beneath them. Hovering over a fruit highlights it with a black stroke and triggers a selection state. The visualization uses D3 version 5 with a React framework, employing ordinal scales for color and radius, and transitions for smooth updates. Over time, the dataset changes through timed removals, type changes, and additions, demonstrating data joins.

AAnShed
93% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing fruit sit in a row, transitioning between apple and lemon types over time. Hovering over a fruit selects it, drawing a black stroke around that circle. The code uses d3.js with the fruitBowl module, handling data joins and transitions. SVG circles animate their radius and position using d3 transitions, while a scaleOrdinal maps fruit types to colors and sizes.

CCurran Kelleher
93% 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
93% 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
93% match