Hover to select

100%

Hover to select

✓ Published0🌍 Public

Last edited Sep 29, 2018

Created on Sep 29, 2018

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fruit: Hover Gets Ya Selected

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.

LLeora Wenger

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

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

93% match

Loading thumbnail…

Hover to Select

Five fruit circles render in an SVG, initially as apples that animate in with a staggered radius transition. Hovering over a circle selects it, adding a black stroke, while mouseout clears the selection. The code uses D3 v6 with a data join, `scaleOrdinal` for color and size, and `transition.attr` to animate enter, update, and exit states. A `setSelectedFruit` callback updates the selection, triggering re-renders that also remove or replace fruit over time.

WWayne716

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

93% match

Loading thumbnail…

hover to select

Five fruit circles rendered in SVG respond to hover by toggling a black stroke around the selected fruit. The example cycles through data updates—removing fruits, changing a plum into a lemon, and filtering the array—while `d3.transition` animates circle radii to zero for exits. Fruit type maps to color and radius via `d3.scaleOrdinal`, and the selection state drives re-rendering through a custom `fruitBowl` function.

Bbencestubnya

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

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

93% match