Skip to main content
SimilarExport ZIP
100%

Bowl of fruit hover to select

✓ Published0🌍 Public
KKurt J Nilsen
Last edited Aug 3, 2020
Created on Aug 3, 2020

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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 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.

BB Sundaresan
96% match
Loading thumbnail…

Bowl of fruit : Hover to select

Interactive fruit bowl shows a row of apples and lemons rendered as SVG circles, where hovering highlights a fruit with a black outline. The example uses D3 v5’s data join with `merge` and `exit` to animate size and position changes via `transition`. Color and radius are mapped by fruit type using `scaleOrdinal`, while mouseover and mouseout events update a selected fruit ID, re-rendering the visualization.

TTomisin Owolabi
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit is rendered as an animated SVG, where apples and lemons appear as colored circles that transition in and out of view. Hovering over a fruit selects it, highlighting it with a black stroke; moving the mouse away deselects it. The visualization demonstrates D3’s data join and general update pattern, using `selection.data`, `enter`, `merge`, and `exit` with `transition` to smoothly animate radius and position changes as the dataset is modified over time.

Rrebeccayc
95% 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
95% 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
95% match
Loading thumbnail…

Bowl of fruit - Hover to select

A bowl of fruit renders as a row of colored circles, each sized by fruit type, with hover highlighting the selected fruit via a black stroke. The example demonstrates data joins and transitions, using D3 v5 scales (scaleOrdinal) and selection methods (enter, merge, exit). Circles animate radius and position over one-second transitions as fruits are added, removed, or changed programmatically, with React-like state management via a setSelectedFruit callback. SVG serves as the rendering target.

PPeter S
95% match
Loading thumbnail…

Bowl of Fruit Hover to Select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are represented as circles, and hovering over a fruit highlights it with a black stroke. The animation shows fruits being eaten, transformed from apple to lemon, and removed from the bowl over time. Using React and D3 v5, the `fruitBowl` function leverages `scaleOrdinal` for color and radius mapping, along with D3's selection and transition APIs to smoothly animate entering, updating, and exiting circle elements with a one-second duration.

JJake
95% match