interactions

100%

✓ Published0🌍 Public

Last edited Mar 4, 2022

Created on Mar 4, 2022

Forked from Bowl of Fruit - Animated Transitions

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are rendered as colored circles that appear, disappear, and change type over time. Clicking a circle logs its ID to the console, though no visible selection change occurs. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, `selection.enter()` and `exit()` with `transition().duration()` for animated updates, and SVG circles that are re-bound to data via `data(fruits, d => d.id)`. The scene cycles through adding, removing, and replacing fruits on a timed sequence.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Dynamic Rendering

This example demonstrates dynamic rendering of a fruit bowl visualization, where circles represent fruits that appear, disappear, and change type over time. The code uses D3 v5 with ES6 modules to manage the enter, update, and exit selections, animating radius changes via transitions. A color scale and radius scale map fruit types to visual properties, with click events triggering a selection state. The animation sequence removes apples, replaces one with a lemon, and filters out another, showcasing data-driven updates.

AAlex Jiasheng Ni

90% match

Loading thumbnail…

fruits

This example demonstrates a dynamic fruit bowl visualization using D3 version 6. It shows circles representing apples and lemons, with colors and radii mapped by fruit type via `d3.scaleOrdinal`. The animation uses D3's selection API and the `.transition()` method to smoothly update positions and sizes over time. Fruits are initially added, then removed, type-changed, and filtered through timed `setTimeout` events, while `selectAll` and `.merge()` manage the enter, update, and exit states of the SVG circles.

Vvictoriokhomas

89% 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

89% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

CClara Hu

89% match

Loading thumbnail…

Bowl of Fruit - Interactive

This interactive example uses D3 v5 to visualize a bowl of fruit as colored circles on an SVG canvas. Apples appear as red circles and lemons as yellow ones, with their radii scaled by fruit type via `scaleOrdinal`. The visualization dynamically updates over time: the fruit count decreases, one apple transforms into a lemon, and an apple is removed from the sequence. Clicking on fruit triggers an `onClick` handler that selects a fruit, though the code does not visibly alter the rendering based on that selection.

Ggmille22

88% match

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

88% match

Loading thumbnail…

3.28

This example demonstrates how to update a data-bound visualization with D3’s enter, update, and exit selections. An animated fruit bowl shows apples and lemons as colored circles that appear, change type, and disappear over timed intervals. The code uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition` to smoothly animate circle attributes. Fruit data is generated randomly with each item assigned a unique `id` to track changes across renders. All rendering is done in SVG.

Aalbatross97

88% match

Loading thumbnail…

ANIMATION

This example demonstrates a dynamic fruit bowl where apples and lemons appear, disappear, and change type over time, governed by a series of timed state updates. It shows how D3's data-join pattern (enter, merge, exit) handles array mutations, with ordinal scales mapping fruit types to colors and radii. The code uses `d3.scaleOrdinal` for styling and SVG `circle` and `text` elements, while rendering is triggered by `setTimeout` callbacks that modify the data array and re-invoke the render function.

Ccocktaildata

88% match