Bowl of Fruit

100%

✓ Published2🌍 Public

Last edited Nov 26, 2019

Created on Nov 2, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Bowl of Fruit

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.

ZZY Huang

94% match

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

94% match

Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit represented as colored circles in an SVG canvas. The visualization initially displays five apples, then sequentially removes one fruit, changes another from an apple to a lemon, and filters out a second apple, demonstrating how the `fruitBowl` function from `fruitBowl.js` updates the chart with each state change. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and relies on the selection and data-join methods (`.enter()`, `.merge()`, `.exit()`) to manage circle elements.

AAsperge-Atomique

94% match

Loading thumbnail…

Bowl of fruit

This example shows a dynamic visualization of a bowl of fruit, where apples and lemons are represented as colored circles that animate in response to data changes. The visualization demonstrates data joins and transitions using D3 v5 within a React framework, rendering to SVG with animation. The code uses `d3.scaleOrdinal` to map fruit types to colors and sizes, `selection.enter()`, `merge()`, and `exit()` to manage elements, and `.transition().duration(1000)` to animate position and radius changes. Users can click the SVG to double the displayed data values, while timers trigger the removal of fruits and type changes.

SStacyLeson

94% match

Loading thumbnail…

Bowl of Fruit

This example shows a bowl of fruit as animated circles representing apples and lemons over time. Using D3’s scaleOrdinal for color and radius, the visualization updates as fruits are removed, changed, or added, with transitions animating the circle sizes. The scene is rendered in SVG via React, with circle positions calculated by index and vertical centering. D3’s selection and transition APIs handle the lifecycle of entering, merging, and exiting elements.

Ssheafallick

94% match

Loading thumbnail…

Bowl of Fruit with Labels

This example demonstrates a dynamic bowl of fruit, initially containing five apples, which are visually removed or transformed into lemons over time. The visualization uses the D3.js framework (v5) to render scalable vector graphics (SVG) elements, animating a change in radius, fill color, and labels for each fruit. The d3 scaleOrdinal function maps fruit types to distinct sizes and colors, while the data join and transition methods manage the addition and removal of graphical elements. The animation is driven by setTimeout calls that alter the underlying data array and trigger a re-render of the scene.

Ssherryyx

93% match