16_Bowl of Fruit - hover to select - Interactions with unidirectional dataflow

100%

16_Bowl of Fruit - hover to select - Interactions with unidirectional dataflow

✓ Published0🌍 Public

Last edited Dec 18, 2020

Created on Dec 18, 2020

Forked from 15_Bowl of Fruit - click to select - Interactions with unidirectional dataflow

This example demonstrates a bowl of fruit where hovering over a circle highlights it with a black stroke, using d3’s `select`, `range`, `scaleOrdinal`, and `.transition()` for animation. Rendered as SVG, the visualization reacts to mouseover and mouseout events, updating the `selectedFruit` state and redrawing circles with changing radii and colors. Data mutations (e.g., removing or replacing fruits) occur via timed `setTimeout` calls, driving a unidirectional dataflow that re-renders the scene.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

15_Bowl of Fruit - click to select - Interactions with unidirectional dataflow

This example demonstrates interactive selection within a bowl of fruit, where clicking a circle highlights it with a black stroke and logs its unique ID. The visualization uses D3 v5’s selection API to manage a unidirectional dataflow: `fruitBowl` renders the SVG circles from an array of fruit objects, animating radius changes over one second via `.transition().duration(1000)`. The `index.js` script drives updates—removing an apple, mutating one to a lemon, and filtering—while the `onClick` callback triggers re-rendering. Color and radius scales are defined with `scaleOrdinal`.

FFMajid-ops

93% match

Loading thumbnail…

15_Bowl of Fruit - click to select - Interactions with unidirectional dataflow

This example demonstrates interactive selection within a small SVG scene of colored circles. The D3.js program uses a unidirectional dataflow, where a selected fruit's ID is passed to a click handler that updates the program state before re-rendering. Animated transitions using `transition.duration()` grow new fruit circles upon entry, shrink them on exit, and apply a black stroke to the currently selected fruit. The visualization also reacts to timers that remove or modify fruit items.

NNeepaB

92% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

This example demonstrates a data join with smooth SVG transitions as a bowl of fruit updates over time. Circles representing apples and lemons enter, exit, and change type, with color and radius mapped through `d3.scaleOrdinal`. Hovering highlights a fruit by updating a `selectedFruit` state, which triggers a re-render via `fruitBowl`. The code uses `selection.merge`, `transition.attr`, and mouse event listeners within a D3 v6 module.

Eegrebing

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

91% match

Loading thumbnail…

Bowl of Fruit - Hover to Select.js

Five fruit circles sit in a beige bowl, rendered as SVG rectangles and circles. Hovering over a fruit highlights it with a black stroke, and the selection updates state before smoothly transitioning the circles to new positions and radii. The example uses d3-selection, d3-scaleOrdinal, and d3-transition to animate fruit removal and type changes from apple to lemon, driven by timed mutations of the data array.

Dddperdue

91% match

Loading thumbnail…

Bowl of Fruit -Hover to Select

Five fruit circles enter the bowl and animate to full size using D3 transitions. Hovering strokes a selected fruit black, while the selection state updates through a callback. The example demonstrates data joins and enter/update/exit patterns with `d3.scaleOrdinal` for color and radius, and `transition.attr` for animations. Fruits are removed or mutated over time.

MMunTatt Yap

91% match

Loading thumbnail…

Bowl of Fruit: Hover to select

A bowl of fruit demonstrates animated SVG transitions and mouse interaction. Five circles, initially apples, move, resize, and change color over time; one apple becomes a lemon, and fruits are removed. Hovering over any circle highlights it with a black stroke and updates a `selectedFruit` state, triggering a re-render. The example uses D3 v5's `select`, `scaleOrdinal`, and `transition` APIs, rendering with SVG and animating circle radius, color, and position over one-second durations.

AAjit Singh

91% match

Loading thumbnail…

D3 Course 6: Interaction with Unidirectional Data Flow

This example demonstrates interactive selection and highlighting of fruit marks in an SVG bowl using unidirectional data flow. Clicking or hovering a circle triggers callbacks that update the selected or hovered fruit ID, which then re-renders the bowl with the appropriate stroke color—black for clicked, orange for hovered. The code uses d3.scaleOrdinal for color and radius mapping, d3.select for data joins with enter/merge/exit, and d3 transitions to animate circle radius changes over one second. The fruit data is generated with d3.range and random IDs, with timed updates removing or replacing fruits.

GGabrz

91% match