hover to select

100%

hover to select

✓ Published1🌍 Public

Last edited Jul 14, 2019

Created on Jul 11, 2019

Hovering over a fruit circle highlights it in light blue while showing its selection state. The example demonstrates a unidirectional data flow pattern, where mouse events trigger a state change that re-renders the SVG. Using d3.v5's data join, circles transition their radius and position over one second with `transition().duration(1000)`. The `fruitBowl` module applies ordinal color and radius scales to map apple and lemon types to distinct visual properties, while `setSelectedFruit` updates the selected state on mouseover and mouseout.

AI-generated description

Using unidirectional data flow to make a eventlistener, change state, and update pattern

MIT Licensed

Similar vizzes

Loading thumbnail…

Hover to Select

Hovering over fruit-shaped circles selects them, highlighting the chosen fruit with a black outline. The visualization shows a row of apples and lemons that animate in and out as the dataset changes over time. It uses D3 v5 with `scaleOrdinal` for colors and radii, and binds data to SVG circles via `selectAll` and data joins. The `fruitBowl` function applies `transition().duration(1000)` for smooth enter, update, and exit animations, with mouseover and mouseout events triggering selection state.

CChristine Lanser

92% match

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

91% match

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

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

91% match

Loading thumbnail…

Hovering

Five circles represent fruit as apples and lemons, with size and color encoding fruit type. Hovering a circle highlights it with a black outline, updating the selected fruit state. The example demonstrates data joins with enter, update, and exit selections, using `transition` for animated radius changes when fruits are added, removed, or change type. SVGs are rendered with D3 v5.

Ccpsshan

91% match

Loading thumbnail…

Hover to Select

This example demonstrates interactive selection in an animated fruit bowl visualization. Rendered as SVG circles with D3 transitions, apples and lemons move and resize smoothly while mouseover events highlight a selected fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and `selection.on` handlers with a stateful `selectedFruit` variable to trigger re-rendering via `fruitBowl`. Data updates through timed mutations, including removing and replacing fruits, show enter, update, and exit transitions.

AArriannePandaraoan

91% match

Loading thumbnail…

Hover to Select: Interaction with Unidirectional Data Flow

Five fruit circles render in an SVG using D3 v5 within a React framework, with apples and lemons distinguished by ordinal color and radius scales. Hovering over a circle triggers a navy stroke via mouseover and mouseout events, updating a selectedFruit state variable that flows unidirectionally into the fruitBowl render function. Transitions animate circle entry, exit, and size changes over one-second durations as the fruit array is modified through pop and type replacement operations.

AAnnie Liao

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

90% match