Fruit: Hover Gets Ya Selected

100%

Fruit: Hover Gets Ya Selected

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Dec 3, 2018

Five fruit circles sit in a row, each filled red for apples or yellow for lemons. Hovering over a circle selects it with a black outline, and hovering away deselects it. The visualization uses D3 v5 with SVG and animated transitions to smoothly change circle radius, position, and fill. The `fruitBowl` module maps fruit types to colors and sizes using `scaleOrdinal`, while `setSelectedFruit` updates the selection state on `mouseover` and `mouseout` events.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Hover to select

Five fruit circles of varying radius and color represent apples and a lemon, ordered in a row. Hovering over a circle triggers a `mouseover` event that calls `setSelectedFruit`, updating a black stroke on the active fruit, which clears on `mouseout`. Using d3 v5 with a module-based `fruitBowl` function, it binds data via `selection.data`, merges enter/update selections, and uses `scaleOrdinal` for mapping type to size and color. The SVG renders in a fixed 960×500 viewport, with dynamic updates as fruits are removed or replaced.

SShane Carey

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles animate into a bowl as apples and lemons, each encoded with distinct colors and radii. Hovering highlights a fruit with a black outline and updates the selected state, while non-selected fruits lose the stroke. The example uses D3 v5 with a data join, `scaleOrdinal` for color and size, and transitions to animate entering, updating, and exiting circles. A `setSelectedFruit` callback triggers re-rendering on mouseover and mouseout, demonstrating interactive selection with animated state changes.

AAmol Kulkarni

93% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles, colored red for apples and yellow for lemons, sit in a row across an SVG canvas. Hovering over a circle selects it, drawing a black outline via mouseover and mouseout events that call the `setSelectedFruit` callback. The example demonstrates data joins with `selection.data`, `enter`, and `exit`, animating radius changes through `transition().duration(1000)`. Timed updates remove and replace fruits, changing their type and scale using `scaleOrdinal` for both color and radius.

Ffbudwill

92% match

Loading thumbnail…

Hover to select

Five fruit circles initially render as apples in a yellow-to-red ordinal scale. Hovering a circle selects it with a black outline, managed through React state and mouseover/mouseout events. Updates demonstrate data joins: a fruit is removed, one apple mutates to a lemon, and another is filtered out. The `fruitbowl` function uses D3 v5 transitions with `selection.merge()` and `exit().remove()` to animate radius and position changes over 1 to 1.5 seconds.

Mmla341

92% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing apples appear in a bowl-shaped row, with a lemon replacing one apple after two seconds. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The visualization uses d3.v7 with an SVG data join, `scaleOrdinal` for color and radius, and `transition().duration()` to animate fruit entry, exit, and type changes. The code also uses `selection.merge` and `selection.exit` for smooth updates.

Yyejichun@naver.com

92% match

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

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

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

92% match