Fork of Hover to select with D3.js!

100%

Fork of Hover to select with D3.js!

✓ Published0🌍 Public

Last edited Mar 18, 2021

Created on Mar 18, 2021

A fork of the classic "hover to select" D3.js example animates a row of fruit shapes that respond to mouse interaction. Five apples appear, with hovered fruit highlighted by a black outline; clicking away clears the selection. The visualization demonstrates data joins, updating an SVG circle’s radius and fill via `transition().duration(1000)`. It uses `d3.scaleOrdinal` for color and size, with timed mutations removing and replacing fruit to show enter, update, and exit transitions.

AI-generated description

Half way towards a smiley face. Smiley mark down (MD).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of need some fruit - Hover to Select

A hover-to-select interaction highlights fruit in a dynamic D3.js visualization. Apples and lemons are rendered as colored SVG circles with ordinal color and radius scales, transitioning smoothly as data updates. The example demonstrates fundamental DOM manipulation through `selection.data`, `enter`, `merge`, and `exit`, with a `transition` animating circle radius and position. `mouseover` and `mouseout` events trigger a selection method that updates a stroke highlight, while timed `setTimeout` calls modify the fruit array, showing how data joins and animated updates work.

CCalvin.

91% 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

91% match

Loading thumbnail…

Fork of click 的hover效果动画

This example demonstrates animated hover effects on a fruit bowl visualization, where circles represent fruits and change appearance when selected. It shows how enter, update, and exit selections work through D3’s data join, with transitions animating circle radii and positions over one second. The code uses D3 v5 APIs including `scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.attr`. Hovering sets a selected fruit ID, triggering a black stroke on the active circle. Data updates are timed, removing fruits or changing types, with all rendering handled in SVG.

HHillKinsh

90% match

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - Hovering to Select D3.js!

Five fruit circles, apples and lemons, render in an SVG bowl using D3 v5’s data join pattern. Hovering over a circle selects it, applying a black stroke via the `mouseover` and `mouseout` handlers. The `scaleOrdinal` color and radius scales map fruit types, while entering and exiting circles animate radius changes with `transition().duration(1000)`. A `setSelectedFruit` callback triggers re-renders, demonstrating animated updates as fruits are removed or replaced over time.

CCarloWK1202

90% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A row of apples animates in using d3 transitions, with hover toggling a black stroke around the selected fruit. The code uses an ordinal color scale and radius scale, with d3 data joins handling enter, update, and exit. D3’s `transition().duration(1000)` animates circle radii and positions, while mouseover and mouseout events call a `setSelectedFruit` callback to update selection state.

Ssheafallick

90% match

Loading thumbnail…

Fork of Bowl of fruits - Hover

A fork of the "Bowl of Fruits" example demonstrates hover interactions with D3.js. Five apples animate into a row, then undergo changes over time: an apple is eaten, one transforms into a lemon, another is removed, and a third becomes rotten. Hovering over any fruit highlights it with a black outline. The visualization uses D3’s `select`, `scaleOrdinal`, and `transition` APIs for smooth radius and position animations.

Nnikeshkv

90% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example demonstrates an interactive data join with D3 v7. The visualization renders apples and lemons as SVG circles, which animate their radius and x-position using `transition().duration(1000)` as fruits are added, removed, or replaced. Hovering over a circle triggers a `mouseover` event, invoking `setSelectedFruit` to highlight it with a black stroke; moving the mouse away clears the selection. The code uses D3’s `scaleOrdinal` for color and radius mappings, with a keyed `data` join on fruit IDs to track elements across updates.

TToooooooT

89% match

Loading thumbnail…

Fork of Bowl of fruit - hover to select

A bowl of five apples rendered as SVG circles animates through data updates, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates D3 v5’s join pattern using `selection.data`, `enter`, `merge`, and `exit` transitions, with `scaleOrdinal` mapping fruit types to colors and radii. Hovering triggers a callback to update the selected fruit, while timed actions sequentially remove fruits and replace one apple with a lemon, causing smooth radius and position transitions over one-second durations.

TTimothy sit

89% match