Skip to main content
SimilarExport ZIP
100%

Hover to Select: Interaction with Unidirectional Data Flow

✓ Published0🌍 Public
AAnnie Liao
Last edited Jun 22, 2020
Created on Jun 22, 2020

Five fruit circles render in an SVG using D3 v5 within a React framework, with apples and lemons distinguished by ordinal color and radius scales. Hovering over a circle triggers a navy stroke via mouseover and mouseout events, updating a selectedFruit state variable that flows unidirectionally into the fruitBowl render function. Transitions animate circle entry, exit, and size changes over one-second durations as the fruit array is modified through pop and type replacement operations.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hover to select

Five fruit circles initially render as apples in a yellow-to-red ordinal scale. Hovering a circle selects it with a black outline, managed through React state and mouseover/mouseout events. Updates demonstrate data joins: a fruit is removed, one apple mutates to a lemon, and another is filtered out. The `fruitbowl` function uses D3 v5 transitions with `selection.merge()` and `exit().remove()` to animate radius and position changes over 1 to 1.5 seconds.

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

Click to Select: Interaction with Unidirectional Data Flow

Five fruit circles animate in and out of a bowl, and clicking one selects it with a navy stroke. The example demonstrates unidirectional data flow where React-like state changes trigger a re-render that updates SVG circles via D3’s data join and `transition` for smooth radius and fill changes. It uses `scaleOrdinal` for color and size, `selectAll` with key functions, and `merge`/`exit` for enter-update-exit patterns. The code shows automatic updates as fruits are removed or replaced without direct DOM manipulation.

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

Bowl of Fruit - Hover to Select

Five pieces of fruit are rendered as color-coded circles in an SVG, with apples in red and lemons in yellow. Hovering over a circle highlights it with a black outline, and moving the mouse away removes the highlight. The visualization uses D3 v5's data join with key functions to smoothly transition circles entering, exiting, and updating, animating radius and position over one second. State changes, such as eating or replacing fruit, are triggered by timed events, with selection managed through React state and callbacks.

BbeauMarko
91% match
Loading thumbnail…

hover to select

Five fruit circles rendered in SVG respond to hover by toggling a black stroke around the selected fruit. The example cycles through data updates—removing fruits, changing a plum into a lemon, and filtering the array—while `d3.transition` animates circle radii to zero for exits. Fruit type maps to color and radius via `d3.scaleOrdinal`, and the selection state drives re-rendering through a custom `fruitBowl` function.

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