Skip to main content
SimilarExport ZIP
100%

Interazione con il flusso di dati unidirezionale

✓ Published0🌍 Public
Ppplomith
Last edited Mar 23, 2021
Created on Mar 9, 2021

A React component renders an interactive bowl of fruit as SVG circles, using D3 scales to map fruit type to color and radius. Clicking a circle selects it, shown by a black stroke, with selection state managed through React hooks for unidirectional data flow. The visualization updates declaratively as props change, while commented-out code hints at possible D3 transitions for dynamic data updates. Built with React, D3 v5, and SVG rendering.

AI-generated description
MIT Licensed

Similar vizzes

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

Hover to Select: Interaction with Unidirectional Data Flow

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.

AAnnie Liao
83% match
Loading thumbnail…

Bowl of fruit

This example demonstrates the dynamic addition and removal of fruit shapes in an SVG bowl, where each fruit is represented as a colored circle with a label. The visualization uses D3 v5’s data join pattern to bind fruit data to SVG circle and text elements, with smooth transitions animating the circles’ positions and radii over one second when data updates. React serves as the integration framework, while D3’s ordinal scales map fruit types to colors and sizes, and exit selections shrink departing circles to zero radius before removal.

Aandy-yc-lin
83% match
Loading thumbnail…

React Hooks Bowl of Fruit

This example demonstrates a data visualization of a fruit bowl using React Hooks and D3.js. It shows a row of apple and lemon circles, where clicking a fruit selects it and highlights it with a black stroke. The code uses React's `useState` hook to manage the fruit data and selected fruit state, while D3's `scaleOrdinal` functions define the color and radius scales for each fruit type. The visualization renders as SVG circles within a React component, though the commented-out code suggests potential animation transitions that are not active.

CCurran Kelleher
83% match
Loading thumbnail…

React Hooks Bowl of Fruit

A static bowl of fruit rendered as SVG circles demonstrates React Hooks and D3.js scale constructors working together. Using `d3.scaleOrdinal` for both fill color and radius, five red apples appear in a row, with the first apple highlighted by a black stroke on click. The `FruitBowl` component receives array data and handles selection state via React's `useState`, while the code includes commented-out transition logic for future interactive animation, indicating a placeholder for D3's `.transition()` API.

Ccodexmon
83% match
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
82% match
Loading thumbnail…

Interazione con flusso di dati unidirezionale - Original

Five circles render as apples and animate with transitions as data changes. When clicked, the selected fruit gets a black stroke. The dataset shrinks, one apple mutates to a lemon, and another element is removed across timed updates. Using D3 v5, the code applies a data join with `selection.data`, `enter`, `merge`, `exit`, and `transition.attr` to update SVG circle positions, radii, and colors based on ordinal scales.

Ppplomith
82% 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
82% match