bowl fruit 2

100%

✓ Published0🌍 Public

Last edited Sep 15, 2022

Created on Sep 15, 2022

A bowl of fruit animates as apples and a lemon are added, removed, and transformed over time. Using D3 v5’s selection and transition APIs, each fruit is rendered as an SVG `<circle>` with a label, while a rounded `<rect>` forms the bowl. The example demonstrates enter, update, and exit states as the dataset changes, with a one-second transition interpolating position and radius. Fruit types map to fixed colors and sizes, and the code explicitly merges newly created and existing groups to manage state.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

bowl of fruit 3

A set of fruit circles animates in and out of an SVG bowl, with apples and lemons distinguished by red and yellow fills and different radii. Clicking a fruit highlights it with a black stroke, triggering a re-render through the custom `fruitBowl` function. The example uses `d3.scaleOrdinal` for color and size mappings, `d3.range` to generate initial data, and `transition` with 1000ms duration to smoothly animate enter, update, and exit states as fruits are removed or change type over time.

Wwyh1029

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

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

94% match

Loading thumbnail…

bowl of fruit 2

A dynamic fruit bowl demonstrates animated state changes as apples are eaten and swapped for lemons over timed intervals. Rendered as SVG, the visualization uses d3.scaleOrdinal to map fruit types to colors (red/yellow) and radii (50/40), with circles and labels positioned via translated groups. The d3 data-join pattern handles enter, update, and exit selections seamlessly, while setTimeout triggers sequential modifications to the fruit array, animating the bowl’s composition between apple and lemon variants.

Wwyh1029

93% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates as apples and lemons are eaten and change types, with each fruit rendered as a colored circle and label inside a rounded rectangular bowl. The example uses React with D3 v5, leveraging `scaleOrdinal` for color and radius mappings, data joins to update SVG groups, and `transition().duration(1000)` to animate radius changes. The `fruitBowl` function binds fruit data to `g` elements, appending circles and text, while `setTimeout` calls trigger state changes over time.

YYoram

93% match

Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit animates as apples shrink and disappear, one apple morphs into a lemon, and another apple is removed entirely, with each change triggered by scripted timeouts. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition()` API to smoothly interpolate circle radii, fill colors, and group transforms over one-second durations. The custom `fruitBowl` function handles enter, update, and exit states for both circle and text elements, while a pink rectangle serves as the bowl. Fruit position and radius depend on index and type, encoded through ordinal scales for color and size.

Fforeverworld1879

93% match

Loading thumbnail…

Bowl Fruit - bowl for fruits

A D3.js simulation shows a bowl of apples and lemons that changes over time. Five fruits sit in a rounded rectangle container; elements disappear, transform, and are removed through sequential animations. The visualization uses SVG shapes with ordinal color and radius scales mapping apple and lemon types to distinct hues and sizes. D3 transitions animate position, circle radius, and fill over one-second durations as the dataset is modified, demonstrating dynamic updates to a static chart.

JJefferson Abreu

93% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated transitions in D3. The visualization shows five apples rendered as red circles, with one apple turning into a lemon over time and two apples disappearing. The code uses D3 v5's data join, `scaleOrdinal` for color and radius mapping, and `selection.transition` to animate circle radius changes. SVG circles are bound to fruit objects with unique IDs, and exit transitions shrink shapes to zero before removal.

Aaurelio-89

93% match