Fruit Bowl

100%

✓ Published2🌍 Public

Last edited Dec 14, 2020

Created on Dec 10, 2020

This example shows a fruit bowl where five apples shrink and disappear over time, with one apple turning into a lemon. The data-driven update pattern uses D3’s data joins to handle enter, update, and exit selections for SVG circles and text labels. The code relies on `scaleOrdinal` for color and radius mappings, and `selection.merge` to apply shared attributes across entering and updating elements. The React starter structure wraps the D3 logic in a reusable `fruitBowl` function, rendering to an `<svg>` element with fixed dimensions.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit

This example shows a dynamic bowl of fruit where apples and lemons are added, removed, or replaced over time. An SVG bowl shape is populated with fruit symbols, each colored and sized according to its type using d3.scaleOrdinal. The code uses D3's data joins with enter, merge, and exit selections to handle updates smoothly, while React manages the rendering of the fruit positions and attributes. The visualization demonstrates D3 version 6 in a React framework, with data-driven changes animated via timed events.

WWayne716

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

92% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how a bowl of fruit changes as apples are removed and replaced with lemons over timed intervals. The visualization renders SVG circles and text labels using D3’s data join with enter, update, and exit selections. The code uses `scaleOrdinal` for mapping fruit types to colors and radii, with `selection.data()`, `merge()`, and `exit().remove()` to handle dynamic updates. React composes the `fruitBowl` function, which updates the scene based on the `fruits` array.

Nnsadath

92% match

Loading thumbnail…

Bowl of fruit, general update Pattern

This example demonstrates the general update pattern in D3.js, showing a bowl of fruit as circles that change over time. Initially five apples appear, then one is removed, another changes to a lemon, and a second apple is eaten. The visualization uses d3.scaleOrdinal for color and radius mapping, with enter, merge, and exit selections to handle dynamic data updates. Rendered as SVG in a React framework with d3.v5, the code also includes a static bowl shape drawn as a rounded rectangle.

Bbambaleq

91% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins in D3, animating a bowl of fruit as apples are removed and transformed into lemons over time. The visualization uses a React-like component structure, with a reusable `fruitBowl` function that handles enter, update, and exit selections via `selection.selectAll('circle').data(fruits, d => d.id)`. The code explicitly uses D3 v5 APIs including `scaleOrdinal` for color and radius mappings, `transition().duration(1000)` for smooth animations, and `merge` to combine enter and update selections. The initial five apples pop in with a radius of zero, then exit by shrinking back down.

GGino Dzin

91% match

Loading thumbnail…

Bowl of Fruit - Click to select! with D3.js!

This example shows a bowl of fruit rendered as SVG circles and labels, where apples and lemons are distinguished by color and size. The visualization updates over time as fruits are removed or replaced, demonstrating how D3.js 5 with React-like merge and exit operations handles dynamic data changes. Using `scaleOrdinal` for color and radius mappings, the code appends groups with circles and text, adjusting their positions and attributes as the fruit array mutates.

Fforcox43

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

91% match

Loading thumbnail…

Bowl of fruits

A bowl-shaped SVG container holds a row of red apples that transform over time, with one apple changing to a lemon and fruits being removed. The visualization demonstrates data joins in React using d3.v5, where the `fruitBowl` function manages enter, update, and exit selections. Ordinal color and radius scales map fruit types to visual properties, while the `index.js` script mutates the fruit array with `setTimeout` calls to trigger re-renders.

SSchmittYannic

91% match