Hover to select

100%

Hover to select

✓ Published0🌍 Public

Last edited Apr 7, 2020

Created on Apr 7, 2020

This example demonstrates a data visualization of fruits as colored circles, highlighting how to use hover interactions to select a fruit. The visualization is built with React, using D3’s `scaleOrdinal` for color and radius mapping, and SVG animation. When the user hovers over a circle, the `setSelectedFruit` function updates the selected fruit, adding a black stroke; mouseout clears the selection. The code also shows adding, removing, and updating fruit data with transitioned animations.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Hover to select

This interactive example demonstrates selection through hover using D3.js within a React framework. Five circles representing fruit items respond to mouseover and mouseout events, triggering a state change that highlights the selected circle with a black stroke. The visualization shows animated transitions as fruits are removed and one apple changes to a bitter lemon. Using D3 v5's `select`, `scaleOrdinal`, and transition methods, the SVG rendering animates circle radii and positions over 1000 milliseconds, with the selection state managed through React's state variable.

Ggorfoula

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

90% match

Loading thumbnail…

hover to select d3

This example demonstrates an interactive fruit bowl visualization where hovering over circles selects them, highlighting the chosen fruit with a black stroke. The code loads D3 v6 via UNPKG and uses local ES6 modules, with `fruitBowl.js` defining a reusable chart function that leverages `scaleOrdinal` for color and radius mapping. Data comes from `data.csv`, though the visualization primarily uses generated fruit objects. SVG circles transition smoothly between states using `transition().duration(1000)`, while mouse events trigger state changes and re-rendering. The example also shows enter, update, and exit selections as fruits are dynamically removed or modified over time.

RRITUZZ

89% match

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

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

89% match

Loading thumbnail…

Hover a fruit

Five fruit shapes animate smoothly as apples are eaten and one becomes a lemon. Hovering produces a black outline around the selected fruit. Built with React and D3 v5, the visualization uses SVG circles with ordinal color and size scales. D3 transitions (`transition().duration(1000)`) handle position, radius, and exit animations, while React state manages the hovered fruit selection.

JJoseph Popoola

88% match

Loading thumbnail…

Bowl of Fruit -Hover to Select

This interactive SVG example uses React and D3 v5 to display a bowl of fruit as circles, with apples and lemons represented by red and yellow circles of different sizes. Hovering over any fruit highlights it with a black stroke, and selecting a fruit updates the visualization. The code uses D3's `scaleOrdinal` for color and radius scales, and animates circle radii with `transition().duration()` when fruits are added, removed, or change type. The data is a static array of fruit objects, with timed events removing or modifying fruits.

SScott Rapponotti

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

88% match