Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
FFMajid-ops
Last edited Dec 18, 2020
Created on Dec 17, 2020

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`.

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

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
92% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
92% 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
91% match
Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

IIgor Borzunov
91% match
Loading thumbnail…

Bowl of Fruits - Click to Select

This example demonstrates a dynamic fruit bowl visualization where users can click individual fruit circles to select them. It shows how D3’s general update pattern handles entering, updating, and exiting SVG elements with smooth transitions. The code uses `d3.scaleOrdinal` for color and radius mappings, `selection.enter()` and `selection.exit()` with `.transition()` to animate circle appearance and removal, and an `onClick` handler that triggers a re-render. Randomly generated fruit IDs serve as data keys, with apples and lemons represented as red and yellow circles.

OOvxOO
91% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a bowl of fruit as a set of colored circles that users can click to select, with a black outline highlighting the chosen piece. The visualization uses D3 v5’s selection API, `scaleOrdinal` for color and radius mapping, and chained transitions to animate the circles’ entry, exit, and size changes over 1000 milliseconds. Data is generated randomly, and the sequence demonstrates adding, removing, and modifying fruit items, with apples and lemons rendered in red and yellow.

LLongYuu
91% match