Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select And tooltip.js

✓ Published0🌍 Public
Dddperdue
Last edited Mar 24, 2020
Created on Mar 24, 2020

Five fruit circles dynamically update over time as apples change to lemons and fruits are removed. Hovering over a fruit enlarges it, turns it orange, and displays a text label. Built with D3 v5 modules including `select`, `scaleOrdinal`, and `range`, it uses `transition` for animated position and radius changes. SVG rendering supports mouseover/mouseout handlers and tooltip text management.

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

Bowl of fruits, hover to select

Five fruit circles appear in a row, with apples rendered larger and red, lemons smaller and yellow. Hovering over a fruit selects it, adding a thick black stroke, and hovering away removes the selection. The visualization uses D3 v5 with an SVG rendering and animated transitions, updating the data-bound circles through a custom `fruitBowl` module that leverages `scaleOrdinal` for color and radius scales.

YYedrup
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles sit in a row, animating in and out as apples are removed, replaced by a lemon, and filtered from the bowl. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses D3 v5’s data join, `transition().duration(1000)` for smooth radius and position changes, `scaleOrdinal` for color and size, and SVG circles with mouseover/mouseout event handlers.

ZZ-Richard
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Ccodexmon
94% match
Loading thumbnail…

Bowl of Fruit hover to select

Five fruit circles render in an SVG, with apples as large red circles and lemons as smaller yellow ones. Hovering over a fruit highlights it with a grey outline, and moving the mouse away removes the highlight. The example demonstrates data joins and transitions using d3-selection and `transition.attrTween`, with `scaleOrdinal` from d3-scale mapping fruit types to colors and radii. Timed updates add, remove, and change fruit types, animating circle radius and position changes over one second.

Ggilbster
94% 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
94% 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