Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit

✓ Published0🌍 Public
Aala-wahibi
Last edited Mar 5, 2020
Created on Mar 4, 2020

D3.js renders an animated bowl of fruit where apples and lemons appear, transform, and disappear in a circular arrangement. The visualization demonstrates the general update pattern: entering elements fade and scale in, updating elements shift positions, and exiting elements shrink and fade out. Clicking a fruit highlights it with a black stroke. The code uses `scaleOrdinal` for color, radius, and font sizing, `transition().duration()` for animation, and data joins on `g` elements. Fruits are generated randomly and mutated through timed `setTimeout` events.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl Fruit - bowl for fruits

A D3.js simulation shows a bowl of apples and lemons that changes over time. Five fruits sit in a rounded rectangle container; elements disappear, transform, and are removed through sequential animations. The visualization uses SVG shapes with ordinal color and radius scales mapping apple and lemon types to distinct hues and sizes. D3 transitions animate position, circle radius, and fill over one-second durations as the dataset is modified, demonstrating dynamic updates to a static chart.

JJefferson Abreu
94% 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
94% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit is a D3.js example demonstrating fundamental DOM manipulation, showing a sequence of animated changes to a set of circles representing fruits. The visualization uses d3.select and d3.range to manage the SVG elements, with d3.scaleOrdinal mapping fruit types to colors and radii. A series of setTimeout calls triggers transitions: a circle is removed, one changes from an apple to a lemon, and another is filtered out, all animated over one-second durations using the selection.merge() and selection.exit() methods.

MMatan
94% match
Loading thumbnail…

Bowl of fruit!

A bowl of fruit animates as apples and lemons appear, shrink, and disappear in a horizontal row. The visualization uses D3 v5 with an SVG renderer, binding data to circles and applying ordinal scales for color and radius based on fruit type. Updates trigger via `setTimeout`, modifying the array and re-rendering, with enter, update, and exit selections transitioning circle attributes like `cx` and `r` over one-second durations.

Yylzami40
93% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated transitions in D3. The visualization shows five apples rendered as red circles, with one apple turning into a lemon over time and two apples disappearing. The code uses D3 v5's data join, `scaleOrdinal` for color and radius mapping, and `selection.transition` to animate circle radius changes. SVG circles are bound to fruit objects with unique IDs, and exit transitions shrink shapes to zero before removal.

Aaurelio-89
93% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates as apples are eaten and replaced by lemons, with each fruit rendered as a colored circle whose size and hue correspond to its type. Using D3 v6's `scaleOrdinal` for color and radius mappings, the code binds fruit objects to SVG circles via `data` with a key function, then transitions enter, update, and exit states over one-second durations. Apples start red and large, while lemons appear yellow and smaller, demonstrating animated data joins in a React-free HTML page.

WWayne716
93% match
Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit animates as apples shrink and disappear, one apple morphs into a lemon, and another apple is removed entirely, with each change triggered by scripted timeouts. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition()` API to smoothly interpolate circle radii, fill colors, and group transforms over one-second durations. The custom `fruitBowl` function handles enter, update, and exit states for both circle and text elements, while a pink rectangle serves as the bowl. Fruit position and radius depend on index and type, encoded through ordinal scales for color and size.

Fforeverworld1879
93% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit starts with five apples, then changes over time as apples are eaten and one apple is replaced by a lemon. The visualization shows how D3.js handles dynamic data updates by animating circle positions, radii, and colors. The code uses `d3.select`, `d3.range`, and custom scale functions like `d3.scaleOrdinal` to map fruit types to colors and sizes. The D3 `transition` API animates the removal, addition, and modification of circles as the dataset shifts through timed `setTimeout` events.

Wwieswies
93% match