D3 Animation - Bowl of Fruit

100%

D3 Animation - Bowl of Fruit

✓ Published1🌍 Public

Last edited Jun 23, 2022

Created on Jun 19, 2022

Forked from General Update Pattern - Bowl of Fruit

A bowl of fruit demonstrates animated data updates and mouse-based selection in SVG. Circles represent fruit types, with color and size mapped through ordinal scales. The animation uses `transition().duration()` to smoothly move and resize marks as items are added, removed, or changed over time. Hovering highlights a fruit with a black stroke, and the `fruitBowl` function manages enter, update, and exit transitions for circles and labels.

AI-generated description

Listening for Click Event
Unidirectional Data Flow Concept
Selecting a Mark by Clicking
Highlighting Selected Mark
Selecting a Mark by Hovering

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Animation - Bowl of Fruit - Nested Version

A bowl of fruit undergoes a sequence of animated changes: fruits are eaten, replaced, and added over time. Each fruit is a circle with a label, colored and sized by its type via `d3.scaleOrdinal`. The `fruitBowl` function uses D3's declarative transitions (`transition().duration()`) to animate position, radius, and removal, taking data from a static CSV.

YYoung Song

93% match

Loading thumbnail…

D3 Animation - Bowl of Fruit - Bowl

This example animates a bowl of fruit as apples are eaten, replaced with lemons and watermelons, and added over time using D3’s data join with enter, update, and exit selections. Each fruit moves smoothly to a new horizontal position via `transition().duration()` and updates its color, size, and label based on a `scaleOrdinal` mapping. Rendering is done with SVG circles and text inside a rectangular bowl, driven by timers that mutate the array and re-render the scene.

YYoung Song

92% match

Loading thumbnail…

Bowl of Fruit

Animating a bowl of fruit, this example demonstrates D3’s enter, update, and exit pattern on SVG circles. Apples and lemons, distinguished by red and yellow fills, shrink and expand their radii over one-second transitions as items are removed, replaced, or changed. The code uses `d3.scaleOrdinal` for color and size, `selection.data` with an id accessor, and chained `transition().attr` calls to morph circle properties.

BBKirst3

91% match

Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates data-binding and animated transitions in D3.js, using circles to represent apples and lemons that update over time. It shows how fruits are added, removed, and have their type changed, with each fruit assigned a unique id to track enter, update, and exit selections. The code uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.duration` to animate position and size changes over one second. Rendering uses SVG elements driven by a `fruitBowl` function that receives a fruits array and height, with JavaScript `setTimeout` calls triggering sequential updates.

TTheRedUnicorn

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

90% match

Loading thumbnail…

Bowl of Fruit -Hover to Select

Five fruit circles enter the bowl and animate to full size using D3 transitions. Hovering strokes a selected fruit black, while the selection state updates through a callback. The example demonstrates data joins and enter/update/exit patterns with `d3.scaleOrdinal` for color and radius, and `transition.attr` for animations. Fruits are removed or mutated over time.

MMunTatt Yap

90% match

Loading thumbnail…

Bowl of fruit - Hovering

Five fruit circles enter an SVG as apples and lemons, with mouseover highlighting a selected fruit with a black stroke. The example demonstrates data joins and animated transitions in D3 v5: fruit enters by expanding from radius zero, exits by shrinking, and updates move and recolor via `selection.merge` and `transition`. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `data` keyed by fruit ID to track entering, updating, and exiting elements over time.

MMaciek Sitkowski

90% match

Loading thumbnail…

(animated)Bowl of Fruit

Animated fruit circles transition between sizes and positions as apples are removed and one apple becomes a lemon, with hover events highlighting the selected fruit by a black outline. The visualization uses D3 v5 with SVG, binding data to circles via `selection.data()` and key functions. Enter and exit selections animate radius changes through `transition().duration(1000)`, while ordinal scales map fruit types to colors and radii.

ZZY Huang

90% match