hover-interactions

100%

hover-interactions

✓ Published0🌍 Public

Last edited Nov 1, 2019

Created on Nov 1, 2019

Five fruit circles render in an SVG, transitioning between apple and lemon types with color and radius changes. Hovering a circle highlights it with a blue stroke, and removal animations shrink and delete circles. Built with D3 v5, the example uses data joins, `transition()`, and `scaleOrdinal` for color and size, with `mouseover` and `mouseout` events triggering state updates.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

hovering test

Five circles represent fruit in an SVG bowl, using d3.scaleOrdinal for color and radius mapping. Hovering over a circle highlights it with a black stroke via mouseover and mouseout events. Circles animate in and out with a one-second d3 transition, while the dataset changes over time by removing fruit and mutating one apple into a lemon. Rendering uses d3 v5 with the enter, merge, and exit pattern for data joins.

Aabcz1234

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

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

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

89% match

Loading thumbnail…

Interaction With Unidirectional Data Flow - Mouse Hover

Five circles representing fruit are rendered as SVG elements inside a 960-by-500 canvas, with each circle’s radius and color determined by its type (orange or lemon) using D3’s `scaleOrdinal`. The visualization demonstrates unidirectional data flow: hovering a circle triggers a `mouseover` event that calls `setSelectedId` to update a selected-id state, which then re-renders the chart, adding a blue stroke to the hovered circle. A `d3.range` generates initial orange fruits, while a lemon is appended, and timed mutations remove fruits and change a type, all handled through D3’s `transition` API for animated updates.

Ccarlos157oliveira

88% match

Loading thumbnail…

hover to select

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.

JJenny

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

87% match