bowl of fruit 3

100%

bowl of fruit 3

✓ Published2🌍 Public

Last edited Apr 1, 2020

Created on Mar 25, 2020

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.

AI-generated description

bowl of fruit 3 点击交互

MIT Licensed

Similar vizzes

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 - Click to Select

A set of fruit shapes animate into a bowl using SVG circles. Each fruit is rendered with a color and radius determined by its type via `d3.scaleOrdinal`, with apples appearing red and larger, lemons yellow and smaller. Clicking a fruit selects it, applying a black stroke, and triggers a callback that re-renders the visualization. The example demonstrates the D3 general update pattern: new fruits enter with a 2-second radius animation, exiting fruits shrink away over 1 second, and changes to existing fruit types update smoothly through the merged enter/update selection.

Rrebeccayc

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 fruit 2

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.

Ppei9223

94% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.

94% match

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

Five pieces of fruit sit in a row, with apples and lemons distinguished by red and yellow fills and differing radii. The animation shows apples being eaten, a lemon replacing an apple, and another apple disappearing. The piece is built with D3 v6, using `scaleOrdinal` for colors and radii, and `transition().duration(1000)` to animate circle attributes. SVG circles are appended, merged, and removed via `selection.selectAll` and the `fruitbowl` function.

Wwei

93% match