Bowl of fruit - Hover to select

100%

Bowl of fruit - Hover to select

✓ Published0🌍 Public

Last edited Jul 11, 2020

Created on Jul 11, 2020

Forked from Bowl of fruit - Click to select

Five fruit circles are rendered in an SVG, initially all apples, with a black stroke appearing on whichever fruit the mouse hovers over. The code uses a React-style render function with d3 selections and the `scaleOrdinal` color and radius scales to map fruit types to visuals. Updates occur via timed transitions: an apple is removed, a lemon replaces one apple, and another apple is filtered out. The `fruitBowl` function handles enter, update, and exit selections with `.transition().duration(1000)` for animated changes, while mouseover triggers `setSelected` to update the selection state.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Bowl of fruit hover to select

A bowl of fruit rendered as circles in an SVG responds to mouse hover, with a black stroke marking the selected fruit. The visualization demonstrates data joins with entering, updating, and exiting elements, animated via `transition()` over one second. Apples and lemons differ in color and radius using `scaleOrdinal`, while d3’s `selectAll` and `data` manage dynamic changes as fruits are removed or transformed. The React framework calls the `fruitBowl` function on each state update, passing the selected fruit ID to control the stroke styling.

KKurt J Nilsen

96% match

Loading thumbnail…

Bowl of fruits - hover to select

A bowl of fruits shows five apples rendered as SVG circles, with hovering over a fruit highlighting it with a black stroke. The visualization uses d3.scaleOrdinal to map fruit types to colors and radii, and transitioned circle radii to animate fruits entering and exiting. Data updates remove an apple, replace one with a lemon, and filter out another, all driven by React state through setSelectedFruit. The code leverages d3-selection, d3-transition, and d3-scale within a React framework.

SSchmittYannic

96% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles animates through a sequence of apples being eaten and one apple morphing into a lemon. Hovering over any fruit highlights it with a black stroke, using the `setSelectedFruit` callback to update the selected state. The visualization leverages D3 v5's data joins and `transition().duration(1000)` to smoothly animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes. The React-based code imports specific D3 functions like `select`, `range`, and `scaleOrdinal` to drive the interactive SVG rendering.

BbeauMarko

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

95% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

This example presents a bowl of fruit as five circles, initially all apples, arranged in a row. Hovering over a fruit selects it, highlighted with a grey outline. The visualization uses D3 v5 with a data join to animate changes: fruits are removed after one and three seconds, and one apple transforms into a lemon after two seconds. The code leverages D3's `scaleOrdinal` for color and radius, React-like props for state, and SVG transitions for smooth animations.

Vvic126

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

EEllednera

95% match

Loading thumbnail…

Bowl of fruit - hover to select

A bowl of fruit renders as five apples in SVG, with hover highlighting the selected fruit by adding a black stroke. The code uses d3.scaleOrdinal for color and radius mapping, and transitions animate fruit entry, exit, and replacement. Over time, apples are removed and one becomes a lemon, with d3 data joins handling updates via keyed selection and transition.attr for radius changes.

BbeauMarko

95% match