Fork of bowl of fruit

100%

Fork of bowl of fruit

✓ Published0🌍 Public

Last edited Aug 30, 2021

Created on Aug 30, 2021

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.

AI-generated description

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

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

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

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

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…

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

93% match

Loading thumbnail…

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

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

Loading thumbnail…

Bowl of fruit

This example demonstrates how D3 data joins manage the lifecycle of DOM elements. It shows a bowl of fruits where apples change into lemons, are removed, or disappear entirely, with each fruit rendered as a circle and label. The visualization uses D3 v5’s `selectAll`, `data`, and explicit `enter`, `update`, and `exit` handlers to add, modify, or delete SVG elements based on changing array data. Color and radius are mapped via `scaleOrdinal` based on fruit type.

Lloicvdk

92% match