Skip to main content
SimilarExport ZIP
100%

click and hover to select

✓ Published0🌍 Public
MMert Gürkan
Last edited Jul 17, 2020
Created on Jul 17, 2020

A bowl of fruit demonstrates selection and dynamic updating. Apples and a lemon are shown as circles with radii and colors mapped via `d3.scaleOrdinal`. Clicking or hovering over a fruit triggers a callback that updates a `selectedFruit` ID, adding a black stroke to the selected item and clearing it on mouse-out. The `bowl` function uses SVG `<circle>` and `<rect>` elements, with `transition().duration(750)` animating position and radius changes when the fruit array is modified over time.

AI-generated description
MIT Licensed

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

Bowl of Fruit - Hover to Select

Hovering over a circle highlights it with a black outline to select the fruit, and moving the mouse away deselects it. The visualization animates fruit entering, exiting, and changing type using D3 v5’s data join and `transition` methods, with scales for color and radius. Apples are red and larger than yellow lemons, arranged in a row. The `fruitBowl` function manages the SVG circles, while `index.js` drives updates through timed `setTimeout` events that remove or replace fruit.

HHeechan lee
92% match
Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit rendered as circles animates through a sequence of changes: fruits disappear, and one apple transitions into a lemon. Hovering over any fruit selects it, displaying a black outline until the mouse moves away. The example uses d3-selection with data joins and transitions to animate circle radii and positions, while d3-scaleOrdinal maps fruit types to colors and sizes. The application state manages a selected fruit ID and triggers re-renders through a custom `fruitBowl` function.

CChinzorigt Ganbat
92% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles animate into a bowl as apples and lemons, each encoded with distinct colors and radii. Hovering highlights a fruit with a black outline and updates the selected state, while non-selected fruits lose the stroke. The example uses D3 v5 with a data join, `scaleOrdinal` for color and size, and transitions to animate entering, updating, and exiting circles. A `setSelectedFruit` callback triggers re-rendering on mouseover and mouseout, demonstrating interactive selection with animated state changes.

AAmol Kulkarni
92% match
Loading thumbnail…

Hover to Select - Bowl of Fruit

Eight apples and lemons rendered as colored circles in a black SVG bowl demonstrate direct manipulation through hover selection. D3 v5 code uses `scaleOrdinal`, `attr`, and `.on('mouseover')` to interactively highlight the hovered fruit with a white stroke. The `transition().duration()` method animates circular elements as fruit is eaten, added, or changed via timeouts. The example showcases state management through `setSelectedFruit` and data-driven rendering with local module imports.

JJames Malvern
92% 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
92% match
Loading thumbnail…

bowl fruit hover select

A bowl of fruit rendered as SVG circles supports interactive hover selection. Five apples appear, then a fruit is removed, one apple changes into a lemon, and another apple is deleted, with animated transitions adjusting positions and radii. Mouseover and mouseout events call `setSelectedFruit` to highlight the selected fruit with a black stroke. The code uses D3 v5 data joins with `enter`, `merge`, and `exit` selections, plus `transition().duration(1000)` for smooth updates.

Ppei9223
92% match
Loading thumbnail…

Bowl of fruit - hover to select

Five fruit circles, initially all apples, transition between fruit types and removal over time, with hover interactions selecting a fruit and highlighting it with a black stroke. The example uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius mapping, and `selection.transition().duration(1000)` to animate entering, updating, and exiting elements in SVG. Apples are eaten and replaced by a lemon through timed updates, demonstrating dynamic data binding and interactive selection.

HHasideluxe
92% match