D3 Bowl of Fruit Example

100%

D3 Bowl of Fruit Example

✓ Published0🌍 Public

Last edited Apr 24, 2020

Created on Apr 22, 2020

This example demonstrates a D3.js fruit bowl visualization where circular fruit shapes enter, exit, and transition between apple and lemon types based on a dataset of efficiency and sales. Using SVG circles and ordinal scales for color and radius, the visualization animates fruit changes with `transition().duration(1000)`. The React framework integration uses the `fruitBowl` function to bind data with `selection.data()`, while circles respond to click events. The example transitions through eating apples, replacing one with a lemon, and filtering fruits, showing dynamic data updates in a simple, interactive way.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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…

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

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

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

92% match

Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates data-binding and animated transitions in D3.js, using circles to represent apples and lemons that update over time. It shows how fruits are added, removed, and have their type changed, with each fruit assigned a unique id to track enter, update, and exit selections. The code uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.duration` to animate position and size changes over one second. Rendering uses SVG elements driven by a `fruitBowl` function that receives a fruits array and height, with JavaScript `setTimeout` calls triggering sequential updates.

TTheRedUnicorn

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

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