Bowl of fruits

100%

Bowl of fruits - singular + transition

✓ Published1🌍 Public

Last edited Jul 14, 2019

Created on Jul 13, 2019

A bowl of fruits uses a small animated data set, initially five apples, to demonstrate singular selection and transitions in D3.js. Over time, the code removes fruits, changes an apple to a lemon, and filters out another item, using a key function on random IDs to track elements. The visualization renders a fixed bowl shape and animates circle radii and positions via `transition().duration(1000)`, applying ordinal color and radius scales (`scaleOrdinal`) to distinguish fruit types.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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…

A bowl of fruits demonstrates data binding and animated transitions in D3.js v5. Initially five red apples appear as circles, then examples sequentially remove an apple, change one apple to a yellow lemon, and filter out another fruit. The visualization uses `selection.data()` with key functions, `enter`, `merge`, and `exit` selections, plus `transition()` to animate radius and position changes over 500 milliseconds. SVG circles and text labels are rendered with D3 scales (`scaleOrdinal`) mapping fruit types to colors and sizes.

MMahaveer Jain

93% match

Loading thumbnail…

Bowl of fruits

A bowl of fruits demonstrates animated enter, update, and exit transitions for SVG circles. Initially five apples appear, then one is removed, another becomes a lemon, and a third is filtered out. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and radius mappings, `selection.data` with key functions, and chained `transition().duration()` calls to animate circle attributes. Random IDs track individual fruits through the data joins.

SSchmittYannic

92% match

Loading thumbnail…

Bowl of fruits - singular

A bowl of fruits is drawn with D3.js, showing a static collection of apples before a lemon replaces one apple and another apple is removed. The visualization demonstrates fundamental DOM manipulation by updating an SVG scene: a rounded rectangle bowl and fruit groups are created, transformed, and deleted using D3's selection API. The code uses `scaleOrdinal` from D3 v5 to map fruit types to colors and radii, and `groups.enter()`, `merge()`, and `exit().remove()` to manage elements as data changes over timed intervals.

Aaxliao

92% match

Loading thumbnail…

Bowl of fruits with transition

Five visual fruits sit in a green bowl, each represented by a circle and an accompanying text label. The simple animation shows a sequence of transitions: one fruit is removed, one apple changes into a lemon, another is deleted, and a new lemon appears. Using D3 v5, the example demonstrates animated SVG updates through data joins, with `transition().duration()` tweening the circles' radii and the bowl’s width to match the changing dataset. The `scaleOrdinal` function maps fruit types to distinct colors and sizes, while data comes from a static `data.csv` file listing city areas.

Vvladvaculin

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

92% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated data joins with D3.js. Five apples render as colored circles, then a sequence of timed transitions removes fruit, changes an apple into an orange, and filters another apple, showing enter, update, and exit selections. The code uses `scaleOrdinal` for color and size, `transition().duration()`, and custom `fruitBowl` and `render` functions, rendering SVG groups with circles and text labels. Data is generated randomly with `Math.random` IDs.

YYifu Chen

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