Skip to main content
SimilarExport ZIP
100%

Interazione con flusso di dati unidirezionale - Original

✓ Published1🌍 Public
Ppplomith
Last edited Mar 20, 2021
Created on Mar 9, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interazione con flusso di dati unidirezionale - Original - pt2

Five circles representing apples and lemons are rendered in an SVG and animate through a series of state changes: removal of a fruit, a type change, and filtering out another item. Using d3.v5’s data join, the circles update with smooth transitions, while mouseover and mouseout events trigger a selected state, highlighting the fruit with a black stroke. The code leverages `selection.data`, `.enter()`, `.merge()`, `.exit()`, and `.transition().duration()`.

Ppplomith
94% match
Loading thumbnail…

Unidirectional Flow

Five fruit circles appear in a row, rendered as SVG via D3 v5. The example demonstrates a unidirectional data flow in D3: a click handler updates a selected fruit’s stroke, a timed removal deletes the last circle, and another timed update changes a fruit’s type from apple to lemon, altering its color and radius. The code uses `selection.enter`, `merge`, and `exit`, along with `scaleOrdinal` for color and radius mappings.

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

Rendering dynamic data

Five circles, colored by a D3 ordinal scale, animate across an SVG canvas as JavaScript modifies an array of fruit objects. The example uses the D3 version 5 API to demonstrate data joins with `enter`, `merge`, and `exit` selections, plus `transition().duration()` to animate radius and position changes over time.

Ppplomith
85% match
Loading thumbnail…

Click to Select

Five apples render as SVG circles that transition in size and position when clicked, receiving a black stroke to indicate selection. The example demonstrates d3 data joins with key functions, ordinal scales for color and radius, and chained transition APIs. D3 v6’s selection.on, merge, and exit patterns handle dynamic updates as fruits are removed or one apple transforms into a lemon.

WWayne716
85% match
Loading thumbnail…

Circle Transitions

Five apples appear as circles in a row. Over time, the dataset is modified: one fruit is removed, another changes type to a lemon, and a third is filtered out. D3's SVG circle elements animate their position and radius, with color and size scaling based on fruit type. The `transition` API handles the smooth changes in position, radius, and removal.

AAditya-me
85% match
Loading thumbnail…

Data join and Transition

This example demonstrates the data join pattern with animated transitions in D3 v5, showing how circles representing fruit enter, update, and exit. Starting with five apples, the visualization removes a fruit after one second, changes the third fruit's type to lemon at two seconds, and filters out another item at three seconds. Each change triggers a smooth 1-second transition where new circles grow from radius zero, existing circles adjust their color, size, and position, and removed circles shrink away. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, and `selection.exit()` with `transition().duration()` for the animations, along with `scaleOrdinal` for color and radius mapping.

JJenny
84% match
Loading thumbnail…

Untitled

A dynamic bowl of fruit demonstrates D3 v6 data joins and transitions. Five circles representing apples render in an SVG, updating as fruits are removed or changed to lemons over timed intervals. Using `selection.data` with key functions, `enter`, `merge`, and `exit` selections animate position, radius, and color via `transition().duration()`. A `scaleOrdinal` maps fruit types to fill colors and radii. Clicking a circle logs to the console, though no visible selection occurs.

Bbicyclecode
84% match