Bowl of fruit

100%

✓ Published2🌍 Public

Last edited Aug 17, 2019

Created on Aug 14, 2019

A bowl of fruit demonstrates full life-cycle transitions with D3 data joins, animating fruit entering, updating, and exiting over time. Red apples and yellow lemons are rendered as SVG circles with scaleOrdinal color and radius scales, while selection.merge and transition methods handle position and size changes. The example also showcases asynchronous data loading with getCars, a promise that populates a report using formatCar and generateReport.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

Bowl of fruit with transitions

A bowl of fruit displays five circles representing apples and lemons, with a selected fruit outlined in black and a color scale mapping apples to red and lemons to blue. The visualization uses d3 transitions to animate enter, update, and exit states, shrinking new circles from radius zero and removing departing ones. Over time, timed intervals remove a fruit, change one apple to a lemon, and filter out another, demonstrating dynamic data binding with d3's selection merge and keyed data joins.

SShane Carey

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

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

A bowl of fruit demonstrates data joins with enter, update, and exit selections. Apples and lemons appear as colored circles that animate in, move, and shrink away as the dataset changes over time. Built with D3 v5, the example uses `selection.data`, `merge`, and `transition` to handle dynamic updates, while `scaleOrdinal` maps fruit types to colors and radii. The SVG circles animate their position and size over one-second transitions.

MMiyamotodan

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

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

90% match