Fork of Bowl of fruit

A fork of the Bowl of Fruit example demonstrates dynamic data updates with D3’s enter, update, and exit selections. It shows a row of fruit shapes in a rounded bowl, where apples are red circles and lemons are yellow circles of different sizes, with each fruit labeled by type. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and updates the SVG via `fruitBowl` over timed intervals that remove fruits, change an apple to a lemon, and filter out another apple. The rendering relies on SVG groups containing `circle` and `text` elements, with transitions triggered by JavaScript `setTimeout` calls.

AAndrewRiceMGW

Bowl of Fruit - Forked

A fork of the "Bowl of Fruit" example animates a changing dataset of apples and lemons over time. Circles and text labels are bound to a JavaScript array using D3's data join, with `scaleOrdinal` mappings for color and radius. Timed `setTimeout` calls remove fruits or change one apple to a lemon, triggering re-renders of the SVG via the `fruitBowl` function. The example demonstrates D3 v5's enter, update, and exit selections for dynamic data.

Ssakhabutdinov

Fork of Bowl of Fruit - D3 Update (With Labels)

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and replaced with lemons over time, with labels showing each fruit’s type. Using D3 v7’s data joins and `transition()`, circles and text elements update smoothly, while `scaleOrdinal` maps fruit types to colors and sizes. The SVG rendering animates changes triggered by `setTimeout`, showing enter, update, and exit selections as the dataset mutates.

Hhenryspradlin

Fork of Bowl Of Fruits-Nested

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and transformed into lemons through a sequence of timed updates, showing how D3.js handles incremental data changes. The code uses `d3.select` and `selection.merge` to manage SVG groups and shapes, with `transition().duration()` animating circle radii when fruits change. A custom `fruitBowl` function applies ordinal color and radius scales, mapping fruit types to visual properties, while the removal and addition of data elements triggers enter, update, and exit states. The underlying data is a hardcoded array of fruit objects modified by setTimeout callbacks.

MMahaveer Jain

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

Fork of bowl of fruit

A basket of fruit demonstrates animated data joins in D3 version 5. The visualization shows a row of apples and lemons, with circles and text labels representing each fruit. Using the `fruitBowl` module with `d3.scaleOrdinal` for color and radius, the code handles enter, update, and exit selections via `selection.merge` and `selection.exit`. Timed updates over three seconds remove apples, change one apple to a lemon, and filter another apple, illustrating dynamic SVG transitions with keyed data.

Jjlspangl

Fork of Fork of bowl of fruit

A fruit bowl renders five apples as red circles with labels on an SVG canvas. D3 version 5 uses data joins with enter, update, and exit selections to animate transitions: an apple disappears after one second, the third apple turns into a lemon after two seconds, and another apple is removed after three. The `fruitBowl` function uses `scaleOrdinal` for color and radius mappings, while circles and text elements update their positions and attributes dynamically.

Jjlspangl

Fork of bowl of fruit

This example demonstrates animated transitions of fruit shapes in an SVG bowl using D3 v5. Circles representing apples and lemons enter, update, and exit with sequential timing, showing how data joins and key functions track object identity. The code uses `d3.scaleOrdinal` for color and radius mappings, `d3.selectAll` and `selection.merge` for enter-update handling, and `transition.duration` to animate circle positions and radii over one second. Fruits are stored as an array with random IDs, and `setTimeout` triggers state changes like removing or replacing items.

Jjlspangl