Fork of Bowl of Fruit

100%

Fork of Bowl of Fruit

✓ Published0🌍 Public

Last edited Jan 24, 2021

Created on Jan 24, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

95% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

CClara Hu

94% match

Loading thumbnail…

Fork of bowl of fruit

This example demonstrates D3.js data joins by rendering a bowl of fruit as SVG circles that update over time. A row of five apples initially appears, then one apple is removed, and another is replaced with a lemon, triggering enter, update, and exit selections. The `render` function uses `selection.selectAll('circle')`, `.data()`, `.merge()`, and `.exit().remove()` to handle dynamic changes, with `scaleOrdinal` mapping fruit types to colors and radii.

Jjlspangl

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of bowl of fruit

A fork of a fruit bowl demonstrates animated data joins in D3 version 5, showing apples and lemons as colored circles with labels that transition when fruits are eaten or replaced. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and employs `selection.data` with key functions, `enter`/`merge`/`exit` patterns, and `transition` with a one-second duration to smoothly update positions and sizes. SVG rendering updates at timed intervals, removing apples, swapping one for a lemon, and filtering based on index.

Jjlspangl

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of Bowl of fruit general update pattern

A fork of the "Bowl of fruit" example demonstrates the D3 general update pattern for dynamic SVG visualizations. The code renders a wooden bowl containing fruit circles, with apples and lemons distinguished by color and radius via `scaleOrdinal`. Over timed intervals, `setTimeout` modifies the fruits array by removing elements and changing types, while the `fruitBowl` function uses `enter`/`merge`/`exit` selections to append, update, and remove groups accordingly. The example uses D3 v5 with ES6 modules for data-driven DOM manipulation.

MMuiruriscode

94% match