Bowl of Fruit

100%

✓ Published0🌍 Public

Last edited Apr 25, 2020

Created on Apr 25, 2020

This example shows a dynamic bowl of fruit where apples and lemons appear, disappear, and change type over time. It uses d3’s selection joins with `enter` and `merge` to update SVG groups, while `scaleOrdinal` maps fruit types to colors and radii. The fruit positions are computed manually via `translate` transforms, and a series of `setTimeout` calls triggers transitions between states.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruits

This example shows a dynamic bowl of fruits rendered as circles in an SVG canvas, where apples and lemons appear and disappear over time. Initially five fruits are drawn using a D3 data join with `scaleOrdinal` for both color and radius, mapping fruit types to red or yellow. After one second, a fruit is removed and another changes from an unknown type to a lemon, triggering D3’s enter/exit updates to reflect the state changes. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs with explicit `setTimeout` calls to drive the transitions.

AAsperge-Atomique

94% match

Loading thumbnail…

Bowl of Fruit

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as circles with color and size mapped to fruit type. The scene animates through a sequence of state changes—removing fruits, replacing one type with another, and filtering—using D3.js v5 selections and merge operations. The SVG output is generated declaratively, with the `scaleOrdinal` function mapping fruit types to visual properties like fill color and radius. The bowl itself is a static rectangle with rounded corners, while the fruits are positioned and updated imperatively via a custom `fruitBowl` function that handles entering, exiting, and updating elements.

Ssakhabutdinov

94% match

Loading thumbnail…

Bowl of fruit. Nested Version

A bowl of fruit shows a stateful, animated sequence of fruit on a platter. The D3.js v5 example repeatedly calls a custom `fruitBowl` component that uses a data join to add, update, and remove SVG groups and their circles and text labels. Using `scaleOrdinal` for color and radius, apples and lemons are drawn in red and yellow at different sizes. A timer alternates between popping items from the array and changing an apple to a lemon, demonstrating the enter, update, and exit transitions of the D3 selection API's `.enter().merge()`.

AAlex Arobelidze

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

93% match

Loading thumbnail…

Bowl of Fruit

This example demonstrates animated updates to a bowl of fruit using D3’s data join. Circles representing apples shrink to zero when removed, while a middle apple transitions into a lemon with a new color and radius. The fruitBowl function uses `scaleOrdinal` for color and size, and `transition().duration(1000)` for smooth movements. The React-based setup renders SVG circles, with state changes triggered by `setTimeout` to eat or replace fruit.

Ddacoylo

93% 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 - D3 Update

This example demonstrates a dynamic fruit bowl visualization, where colored circles representing apples, lemons, and oranges enter, exit, and change type over time. It showcases D3’s data-join pattern with key functions, using `selection.data()`, `.enter()`, `.merge()`, and `.exit()` to handle updates. The code applies smooth `transition()` animations for position, radius, and fill color, mapping fruit types to colors and sizes via `scaleOrdinal`. SVG circles are rendered in an HTML page using D3 v7, with data mutations triggered by timed `setTimeout` calls.

Hhenryspradlin

92% match

Loading thumbnail…

Bowl of fruits

A dynamic SVG visualization renders a changing bowl of fruits using D3 v5's data-join pattern. Five apples appear initially, then the code removes one fruit, converts another to a lemon, and filters out a third over timed intervals. The fruitBowl module applies `scaleOrdinal` for color and radius, mapping apples to red circles and lemons to yellow ones. Circles enlarge on hover via CSS, showing interactive feedback.

Vvladvaculin

92% match