Bowl of Fruit - Hoover to select events with D3.js!

100%

Bowl of Fruit - Hoover to select events with D3.js!

✓ Published0🌍 Public

Last edited Jul 15, 2020

Created on Jul 15, 2020

Forked from Bowl of Fruit - Click events with D3.js!

This example demonstrates interactive selection in a data visualization using D3.js within a React application. Animated SVG circles represent fruits in a bowl—apples and lemons—which appear, disappear, and change type over time. Users can hover over a circle to highlight it with a black stroke, triggering a selection event that updates the visualization's state. The implementation uses D3's `select`, `scaleOrdinal`, and transition APIs to manage animated enter, update, and exit states for the circles, driven by a `setSelectedFruit` callback.

AI-generated description

Click events.

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click events with D3.js!

This example demonstrates interactive SVG circles representing a bowl of fruit, where clicking a fruit highlights it with a black stroke. The visualization uses D3.js data joins to smoothly transition fruit sizes and positions when apples are removed or replaced with lemons over timed intervals. The `fruitBowl` function handles enter, update, and exit selections with animated radius and x-coordinate transitions. React is used as the framework wrapper, while `scaleOrdinal` maps fruit types to colors and radii, and event listeners trigger the selection state updates.

SSaroj Khanal

92% match

Loading thumbnail…

Bowl of Fruit - Click events with D3.js!

An interactive bowl of fruit visualizes how D3.js handles click events and dynamic data updates. The SVG scene renders apples and lemons as colored circles, with a black stroke highlighting the currently selected fruit. Clicking any circle triggers a callback that updates the selection state and redraws the visualization. The code uses `selection.enter()`, `merge()`, and `exit()` to manage data joins, while `transition().duration(1000)` animates circle positions and radii. Data changes occur through scheduled `setTimeout` calls that remove items or change fruit types, demonstrating React and D3 integration.

Fforcox43

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

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

90% match

Loading thumbnail…

Bowl of Fruit-Hover to Select.js

A dynamic bowl of fruit shows apples and lemons as colored circles that animate in size and position, with a black stroke highlighting the currently hovered fruit. The visualization uses D3 v5 and SVG, with `scaleOrdinal` mapping fruit types to colors and radii. Mouseover and mouseout events trigger a selection state, while transitions animate the circles' entry, exit, and updates as fruits are eaten or replaced over time.

NNeepaB

90% match

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

90% match

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit demonstrates interactive selection with animated SVG transitions in React. Apples render as red circles and lemons as yellow circles, with click-to-select highlighting the chosen fruit with a black outline. The example uses d3.scaleOrdinal for color and radius mapping, while d3 transitions animate circle radius changes when fruits are added or removed. Data updates occur through timed functions that remove, replace, and filter fruit array elements, showcasing enter, update, and exit selections.

PPeter S

90% match

Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo

90% match