Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNeepaB
Last edited Dec 19, 2020
Created on Dec 19, 2020

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.

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

16_Bowl of Fruit - hover 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.

FFMajid-ops
92% match
Loading thumbnail…

Interaction With Unidirectional Data Flow - Click

Fruit circles animate between orange and lemon varieties while responding to clicks that select a fruit with a blue stroke. The visualization demonstrates unidirectional data flow: click events call `setSelectedId`, which updates `selectedId` and re-renders the entire scene via `fruitBowl`. D3 v5's data join, `transition`, and ordinal scales (`scaleOrdinal`) handle SVG circle updates, while timed `splice` and `pop` operations mutate the `fruits` array to trigger enter, update, and exit transitions over four seconds.

Ccarlos157oliveira
90% 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
90% 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
89% 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, with click and hover events triggering updates through a unidirectional data flow. The fruit bowl renders apples and lemons as circles using a D3 data join, with transitions animating size and position changes. Clicking a fruit selects it with a black stroke, while hovering applies an orange stroke, managed by callback props passed from the main script. The code uses D3 v5 APIs including `scaleOrdinal` for colors and radii, `selection.on` for event listeners, and `transition.duration` for smooth updates across three timed state changes.

MMe3P
89% match
Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection and animated updates in D3.js v5. Clicking a circle highlights it with a black stroke and updates a selectedFruit variable, triggering a re-render. The fruitBowl function uses data joins with enter, merge, and exit selections, applying transitions on circle radii and positions. Ordinal scales map fruit types to colors and sizes, while setTimeout calls animate changes like removing apples, replacing one with a lemon, and filtering the data.

XX. N. Chu
88% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit demonstrates D3’s data-join with animated transitions, where apples and lemons are drawn as circles and clicking a fruit highlights it with a black stroke. The example uses `d3.scaleOrdinal` for colors and radii, `selection.transition().duration(1000)` to animate enter and exit, and a custom click handler to update the selected fruit. Rendered in SVG, the scene shows fruits being removed, replaced, and filtered over time.

BBrett
88% match