Skip to main content
SimilarExport ZIP
100%

TM

✓ Published0🌍 Public
Rrenenadorp
Last edited Aug 21, 2022
Created on Aug 21, 2022

A simple animated fruit bowl demonstrates D3's declarative update and object constancy. Five circles, initially apples, transition through a scripted sequence: an apple is removed, one apple turns into a lemon, then another apple is eaten. D3's `select`, `range`, and `scaleOrdinal` manage the SVG circles and text labels, while `data()` and merge operations ensure smooth updates. The example uses D3 v5 and the `fruitBowl` component, drawing on static, hard-coded data.

AI-generated description

https://www.youtube.com/watch?v=_8V5o2UHG0E

MIT Licensed

Similar vizzes

Loading thumbnail…

A bowl of fruit

A bowl of fruit demonstrates animated updates to an SVG circle chart using D3.js v5. Five circles representing apples enter with a scaling radius transition, then shrink and vanish as fruit is consumed, swap from apple to lemon with a color change, and filter out one item. The example uses D3’s `scaleOrdinal` for color and radius mappings, `selection.enter()`, `.merge()`, and `.exit()` with `transition().duration(1000)` to animate circle properties. The data source is a random set of fruit objects generated in the script, rendered as SVG circles with a fixed vertical position and horizontal spacing.

MMatthiasVanCampen
89% match
Loading thumbnail…

Untitled

A D3 v6 demonstration shows a bowl of fruit rendered as SVG circles and text labels, with apples and lemons distinguished by color and size via `d3.scaleOrdinal`. The code uses the general update pattern to handle entering, updating, and exiting elements, animating radius changes with `transition().duration()`. Timed `setTimeout` calls remove fruits, change an apple’s type to a lemon, and filter the array, illustrating how data joins update the visualization.

Bbicyclecode
89% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles represent apples in an SVG bowl, and a sequence of animated updates demonstrates D3's general update pattern. The visualization starts with five apples, then removes one, changes another into a lemon, and finally filters out a third fruit, using enter, merge, and exit selections. D3 v6 scales map fruit types to colors and radii, while transitions animate radius and position changes over one second. The `fruitBowl` module handles the data join with `selection.data`, `enter.append`, and `exit.remove` APIs.

BbeauMarko
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…

d3 Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern in SVG. The visualization begins with five apples, then at one-second intervals removes an apple, changes one apple into a lemon, and removes another apple, all while a black outline highlights the fruit under the mouse cursor. The `fruitBowl` function uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` on `g` and `circle` elements to handle added, updated, and removed data. The `d3.scaleOrdinal` maps fruit types to colors (`darkred` for apple, `#f1f90c` for lemon) and radii, while `.transition().duration(1000)` animates circle positions and radii, and `.remove()` deletes exiting elements.

JJohnPaulPagelerJr
89% match
Loading thumbnail…

Bowl of Fruit - General Update pattern

Five circles representing fruit shrink or resize as apples are eaten and one apple morphs into a lemon, demonstrating the D3 general update pattern. The animation uses `d3.scaleOrdinal` for color and radius scales, with D3's selection `.enter()`, `.merge()`, and `.exit()` transitions to handle data joins over a one-second duration. The JavaScript-driven example renders animated SVG circles with random IDs, updating the fruit bowl in response to timed array mutations.

NNikki-gea
88% match
Loading thumbnail…

Bowl of Fruit- General Update pattern

This example demonstrates the D3.js general update pattern by animating a bowl of fruit, where apples are eaten, replaced with lemons, and removed over time. It uses D3 selections with enter, merge, and exit methods to manage dynamic data binding, rendering SVG circles and text elements via a reusable `fruitBowl` function. The visualization employs `d3.scaleOrdinal` to map fruit types to colors and radii, with the data driven by timed `setTimeout` callbacks that modify a hardcoded fruits array.

SSagar Malviya
88% match
Loading thumbnail…

Bowl of fruit - General Update Pattern

Five apples appear in a row, then shrink and vanish as they are eaten, while one apple transforms into a lemon through a color and size change. This demonstrates d3's general update pattern using `enter`, `merge`, and `exit` selections with `transition.attr` to animate circle radii and positions. The fruit types map to color and radius scales, with data bound by unique `id` keys. SVG circles render the bowl of fruit, and `setTimeout` calls trigger the staged updates over three seconds.

Nntds12
88% match