fruit bowl

100%

✓ Published1🌍 Public

Last edited May 22, 2020

Created on May 22, 2020

This example demonstrates a dynamic fruit bowl where apples and lemons are represented as animated SVG circles, with each fruit’s type determining its color (red for apples, green for lemons) and radius (larger for apples). Using the `selection` API from D3, the visualization animates changes to the `fruits` array over time, such as removing an apple or replacing one with a lemon, through smooth transitions on the `cx` and `r` attributes. The code leverages `scaleOrdinal` from D3 v3 to map fruit types to visual properties.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

fruit bowl

This example demonstrates animated transitions of fruit in a bowl, showing apples and lemons as circles that move, resize, and disappear over time. The visualization uses D3.js scaleOrdinal functions for color and radius mapping, with a custom fruitBowl function handling the SVG circle elements via selection, enter, merge, and exit transitions. The code animates changes over a 6-second sequence, including removing an apple, changing an apple to a lemon, and filtering the fruit array.

YYashodhaMagadi

94% match

Loading thumbnail…

fruit bowl

A fruit bowl visualization uses D3 v5 and React to display an animated collection of circles representing apples and lemons in an SVG. The data array changes over time as fruits are eaten, replaced, or removed, triggering smooth 1000ms transitions via `transition()` and `duration()`. A `scaleOrdinal` maps fruit types to colors (red for apples, green for lemons) and radii (50 for apples, 30 for lemons). The `enter`, `merge`, and `exit` selections manage circle updates, with exiting fruits shrinking to zero radius before removal.

Ssagarknt97

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

93% match

Loading thumbnail…

fruits

This example demonstrates a dynamic fruit bowl visualization using D3 version 6. It shows circles representing apples and lemons, with colors and radii mapped by fruit type via `d3.scaleOrdinal`. The animation uses D3's selection API and the `.transition()` method to smoothly update positions and sizes over time. Fruits are initially added, then removed, type-changed, and filtered through timed `setTimeout` events, while `selectAll` and `.merge()` manage the enter, update, and exit states of the SVG circles.

Vvictoriokhomas

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

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

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

91% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

CClara Hu

91% match