Skip to main content
SimilarExport ZIP
100%

A bowl of fruit

✓ Published1🌍 Public
MMatthiasVanCampen
Last edited Feb 12, 2020
Created on Feb 12, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit animated

Five fruit circles animate inside an SVG canvas, with apples in red and lemons in yellow. A series of timed mutations removes, replaces, and filters the data, demonstrating enter, update, and exit transitions. The `fruitBowl` function uses D3's `scaleOrdinal` for color and radius mapping, while the `transition()` API animates circle radii and x-positions over one second. Data is generated in `index.js` with `range` and random IDs.

JJoachim Klug
93% match
Loading thumbnail…

Bowl of fruit

A dynamic SVG bowl of fruit demonstrates the enter, update, and exit pattern in D3 v5. The visualization initially renders five red apples as circles with labels, then sequentially removes one apple, changes a second apple into a yellow lemon, and filters out another fruit over timed intervals. Using `scaleOrdinal` for color and radius mapping, the code applies `selection.merge` to update shared attributes and manages transitions with `attr` for x-position and radius. The example relies on `setTimeout` callbacks to trigger re-renders and shows how data joins handle dynamic changes.

IIgor Borzunov
92% 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
92% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows five apples rendered as red circles, which are eaten and replaced by a lemon over time through animated transitions. The visualization uses D3 v5’s general update pattern with `selectAll`, `data`, `enter`, `merge`, and `exit` to manage SVG circle elements, applying ordinal scales for color and radius based on fruit type. The animation sequence, driven by `setTimeout`, demonstrates adding, removing, and updating data while smoothly interpolating circle radius and position via `transition`.

Rrebeccayc
92% match
Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates data joins in D3.js v5 by rendering five circles as apples, then updating the visualization over time as one apple is removed and another becomes a lemon. The SVG circles are bound to an array of fruit objects using `selection.selectAll`, `data`, `enter`, `merge`, and `exit`. D3 scales, `scaleOrdinal`, map fruit types to fill colors and radii, while `setTimeout` triggers re-renders to show enter, update, and exit transitions.

Jjlspangl
92% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates animated data binding and SVG manipulation with D3.js. Five apples appear in a rounded rectangle bowl, then one disappears, a middle apple transforms into a lemon, and another apple is removed, with each change animated over one second. The example uses D3’s `scaleOrdinal` for color and radius mapping, `selection.enter` and `selection.exit` for managing dynamic elements, and `transition().duration()` to animate position, radius, and removal.

TTheRedUnicorn
92% match
Loading thumbnail…

FruitBowl Example

Five circles representing apples appear in a row, then transition through a sequence of updates: one fruit is removed, a middle apple changes into a lemon, and another circle exits, all with smooth one-second animations. The example uses D3 v5 with `scaleOrdinal` for color and radius mapping, plus `selection.enter`, `merge`, and `exit` with `transition` and `attr` to animate circle positions and sizes. Data is generated with `range` and `Math.random` IDs, rendered as SVG in a fixed 960×500 viewport.

LLex
92% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated enter, update, and exit transitions for SVG circles representing apples and lemons. Five apples initially render, then one is removed, another changes to a lemon, and a third disappears, with each change animating radius and position over one second. The example uses d3.select and d3.range to generate data, and a custom fruitBowl function with d3.scaleOrdinal for color and radius, plus selection.merge and selection.exit with transition.duration.

AAndrewRiceMGW
92% match