Skip to main content
SimilarExport ZIP
100%

bowl of fruit

✓ Published3🌍 Public
Jjlspangl
Last edited Aug 31, 2021
Created on Aug 30, 2021
Forked from D3 Starter

A bowl of fruit demonstrates animated data joins with D3 using ordinal scales to map fruit types to colors and radii. Apples appear as red circles, lemons as yellow ones, with text labels below each shape. The visualization uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections as fruits are removed or changed over timed intervals. The code employs `scaleOrdinal`, `range`, and SVG rendering with `attr` and `merge` operations.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates data joins with D3 v5, using an ordinal scale to assign colors and radii to apples and lemons rendered as SVG circles. As the underlying array changes over time—removing fruits, replacing one apple with a lemon, and filtering another—the visualization updates through enter, update, and exit selections. The `fruitBowl` module applies `scaleOrdinal` for both color and size, while `selection.merge` and `selection.exit` manage the transitions.

Tthanhtrant219
95% match
Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates data joins in D3.js v5 by rendering five circles as apples, then updating the visualization over time as one apple is removed and another becomes a lemon. The SVG circles are bound to an array of fruit objects using `selection.selectAll`, `data`, `enter`, `merge`, and `exit`. D3 scales, `scaleOrdinal`, map fruit types to fill colors and radii, while `setTimeout` triggers re-renders to show enter, update, and exit transitions.

Jjlspangl
94% 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
94% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit visualizes a small dataset of fruits as colored circles, with apples in red and lemons in yellow. The example demonstrates enter, update, and exit selections in D3 v6, using `scaleOrdinal` for both color and radius. As the animation progresses, fruits are removed from the array and types change, triggering corresponding SVG circle updates via the `fruitBowl` module. The rendering relies on plain SVG elements and a React-based scaffold.

Mmbergevoet
93% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates fundamental DOM manipulation with D3.js by drawing apples and lemons as colored circles and updating them over time. The visualization uses an ordinal color scale and radius scale to map fruit types to visual properties, while a data join binds the fruit array to SVG circles. The code employs `selection.data()`, `enter()`, and `exit()` to add, update, and remove elements, and uses `setTimeout` to trigger transitions like eating an apple or swapping a fruit for a lemon.

DDaniel Piqué
93% match
Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit demonstrates animated data joins in D3 v6. Five apples appear as red circles, with a black stroke highlighting the currently selected fruit after a click. Over time, apples are removed, one apple transforms into a lemon, and the remaining selection is filtered. The example uses `d3.scaleOrdinal` for colors and radii, `selection.data` with key functions, `transition` for smooth enter/exit animations, and event handlers to manage selection state.

OOleg
93% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows a row of apples and lemons rendered as colored circles on a rounded rectangle, with each fruit labeled by type. The visualization updates over time as apples are removed or replaced with lemons, demonstrating data joins. Built with D3 v5, it uses `scaleOrdinal` for color and radius mappings, `selectAll` with enter/merge/exit patterns, and SVG groups with `translate` transforms. The rendering is SVG, with the bowl drawn as a `<rect>` and fruit as `<circle>` elements.

Zzhangfa
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a data join pattern with D3 v5, showing how a list of apples and lemons responds to changes over time. Five apples appear in a rendered bowl, then a fruit is removed, one apple changes to a lemon, and another apple disappears. The `fruitBowl` function uses `scaleOrdinal` for color and radius, while `selection.data`, `enter`, `merge`, and `exit` manage SVG `g`, `circle`, and `text` elements, updating positions with `attr('transform')` and `transition`.

Ssiddharth171
93% match