fruit bowl

100%

✓ Published1🌍 Public

Last edited May 22, 2020

Created on May 19, 2020

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.

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

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

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

93% match

Loading thumbnail…

Bowl of Fruit with Animated Transitions

A bowl of fruit visualization uses animated SVG circles to represent apples and lemons, with color and radius scales mapping fruit type to visual properties. The example demonstrates d3 transitions as fruits are eaten, removed, or change type over timed intervals. Using d3's `select`, `range`, `scaleOrdinal`, and `transition` APIs within a React framework, the code manages enter, merge, and exit states, animating circle positions and radii over one-second durations. The data consists of a mutable array of fruit objects with random IDs, rendered via raw SVG elements in an HTML page.

JJake

93% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit visualizes a small dataset of fruits as colored circles, with apples in red and lemons in yellow. The example demonstrates enter, update, and exit selections in D3 v6, using `scaleOrdinal` for both color and radius. As the animation progresses, fruits are removed from the array and types change, triggering corresponding SVG circle updates via the `fruitBowl` module. The rendering relies on plain SVG elements and a React-based scaffold.

Mmbergevoet

93% match

Loading thumbnail…

fruit bowl

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.

YYashodhaMagadi

93% match

Loading thumbnail…

Bowl of Fruit - Animated Transitions

A bowl of fruit demonstrates animated transitions between data states, showing how circles representing apples and lemons appear, move, and disappear. Using D3 v6 with SVG and React, the visualization employs keyed data joins to track fruit identity. The `fruitBowl` function uses `scaleOrdinal` for color and radius, while `transition().duration(1000)` animates position and size changes on enter, update, and exit selections over timed intervals.

SSergio Eijben

93% match

Loading thumbnail…

Bowl of fruit

A bowl of fruit depicts five apples as circles, which are eaten, replaced by a lemon, and otherwise removed over time, with each change animated via a one-second transition. The visualization uses D3 v6 with data joins and merge to update SVG circle elements, while ordinal scales map fruit types to colors and radii. The React framework wraps this D3 code, with SVG rendering driven by timed state changes.

CChinzorigt Ganbat

93% match