Hover a fruit

100%

✓ Published0🌍 Public

Last edited Feb 12, 2020

Created on Feb 12, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Bowl of Fruit Hover to Select

Five circles representing apples and lemons are rendered in an SVG bowl. Hovering over a fruit highlights it with a black stroke and logs its selection. The visualization uses React and D3 v5 to animate circle positions, radii, and colors via `transition().duration(1000)`, with data mutations (apple removal, lemon replacement) triggered by timeouts, demonstrating enter, update, and exit transitions.

Ddacoylo

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

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

90% match

Loading thumbnail…

Hovering

A row of apples animates in size and position using d3 transitions, with one fruit highlighted on hover. The fruitBowl module binds fruit objects to SVG circles, using scaleOrdinal for color and radius mapped to fruit type. Mouse events call setSelectedFruit to toggle a black stroke on the selected circle. Over time, setTimeout triggers data changes—removing a fruit, converting one to a lemon, and filtering another—while d3’s enter/merge/exit pattern animates the updates.

Ccpsshan

90% match

Loading thumbnail…

Hover to select

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.

Eevapavlinek

88% match

Loading thumbnail…

Bowl of fruit Hover to Select

Five fruit circles render in an SVG as apples and lemons; hovering one highlights it with a black stroke while the previous selection clears. The React and D3 v5 code uses a `scaleOrdinal` for color and radius, and enters, updates, and exits circles with a 1000-millisecond `transition`. The example demonstrates data joins by removing, changing, and filtering fruit items while animating circle size and position.

Jjeelong

88% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit are rendered as color-coded circles in an SVG, with apples in red and lemons in yellow. Hovering over a circle highlights it with a black outline, and moving the mouse away removes the highlight. The visualization uses D3 v5's data join with key functions to smoothly transition circles entering, exiting, and updating, animating radius and position over one second. State changes, such as eating or replacing fruit, are triggered by timed events, with selection managed through React state and callbacks.

BbeauMarko

88% match