Skip to main content
SimilarExport ZIP
100%

Fruit Bowl

✓ Published2🌍 Public
AAbhijeet Panda
Last edited Nov 1, 2019
Created on Oct 29, 2019

Five circles enter an SVG as apples, then one is removed, another turns into a lemon, and a third is filtered out. The fruitBowl function uses d3's scaleOrdinal for color and radius mappings, and transitions animate the circle area and removal over one-second durations. The data is generated in index.js with d3.range and Math.random for unique IDs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

FruitBowl Example

Five circles representing apples appear in a row, then transition through a sequence of updates: one fruit is removed, a middle apple changes into a lemon, and another circle exits, all with smooth one-second animations. The example uses D3 v5 with `scaleOrdinal` for color and radius mapping, plus `selection.enter`, `merge`, and `exit` with `transition` and `attr` to animate circle positions and sizes. Data is generated with `range` and `Math.random` IDs, rendered as SVG in a fixed 960×500 viewport.

LLex
93% match
Loading thumbnail…

Bowl of Fruit

Five circles represent apples in a bowl, rendered as red SVG circles that scale up on entry and shrink on exit. Over time, the code removes an apple, changes one apple into a yellow lemon by re-binding data and updating fill color, then filters out another apple. The example uses d3.v5 with scaleOrdinal for color and radius mapping, and transition().duration() to animate enter, update, and exit selections.

ZZY Huang
92% match
Loading thumbnail…

Bowl of fruit-2

Five fruit circles enter as apples, then one is removed, another changes from apple to lemon, and a third is filtered out, with each state transitioned over one second. The SVG animation uses D3 v5 data joins with enter, merge, and exit selections, and renders circles whose fill and radius come from ordinal color and radius scales.

Kkaviya-ds
92% match
Loading thumbnail…

Bowl of fruit

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

AAbishek-Dulal
92% match
Loading thumbnail…

Bowl of fruit animated

Five fruit circles animate inside an SVG canvas, with apples in red and lemons in yellow. A series of timed mutations removes, replaces, and filters the data, demonstrating enter, update, and exit transitions. The `fruitBowl` function uses D3's `scaleOrdinal` for color and radius mapping, while the `transition()` API animates circle radii and x-positions over one second. Data is generated in `index.js` with `range` and random IDs.

JJoachim Klug
92% match
Loading thumbnail…

Bowl of Fruit

Five fruit circles represent apples and lemons in an animated bowl. The visualization uses a D3 v5 data join to update the SVG, with fruits appearing, disappearing, and changing type over timed intervals. A scaleOrdinal color scale maps apples to blue and lemons to yellow, while another scale assigns radii of 50 and 30 pixels. The code transitions the circle radius property over one second for entering and exiting elements.

AAtrayeeDeb
92% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples transition into view in an SVG bowl, with each fruit selectable by mouseover and mouseout events that toggle a black stroke. The code uses d3 data joins and ordinal scales to map fruit types to colors and radii, while transition methods animate circle entry and exit. Over time, fruits are removed or replaced with lemons via JavaScript timers, demonstrating animated updates to the bound dataset.

Ffeizhi123
92% match
Loading thumbnail…

bowl off fruit click

Five circles, designed as apples and lemons, are shown in an SVG canvas. The visualization demonstrates D3 transitions as the dataset changes over time: a fruit is removed, an apple transforms into a lemon, and another fruit is deleted. The code uses D3's `selectAll`, `data`, and `transition` APIs to animate circle radius and x-position over two-second durations. Each circle has a click handler that logs to the console, and the color and size are mapped via `scaleOrdinal` based on the fruit type. The data is generated programmatically with `Math.random` for unique identifiers.

RRobindj2000
91% match