Skip to main content
SimilarExport ZIP
100%

bowl of fruit

✓ Published1🌍 Public
Jjlspangl
Last edited Aug 30, 2021
Created on Aug 27, 2021

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruits

A bowl of fruits visualizes data joins in D3.js v5, showing five circles that represent fruit types. The example uses `d3.scaleOrdinal` to map fruit types to colors and radius values, with SVG circles positioned along a horizontal axis. After rendering, a `setTimeout` removes the last fruit, and another replaces one fruit with a lemon, triggering enter, update, and exit selections through the `render` function. The code demonstrates fundamental DOM manipulation with `d3.select`, `selection.data`, `selection.enter`, and `selection.exit` on a static SVG canvas.

AAsperge-Atomique
95% 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
94% match
Loading thumbnail…

bowl of fruit

A bowl of fruit displays five red apples as circles in an SVG, then demonstrates D3.js data joins by removing one apple after a second and turning another into a yellow lemon after two seconds. Using d3.select, d3.range, and scaleOrdinal, the code binds an array of fruit objects to circle elements, handling enter, update, and exit selections with merge and remove methods. The color and radius scales map fruit types to visual properties, showing how D3 manages dynamic DOM updates.

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

Bowl of fruit - click to select

A bowl of fruit demonstrates a join-based update pattern in D3 v5. Circles represent apples and lemons, scaled by fruit type via `scaleOrdinal`, with the selected fruit highlighted by a black stroke. Clicking a circle triggers a callback that updates the selection and re-renders the visualization. Transitions animate new circles growing from radius zero, exiting circles shrinking away, and position changes over one second. The example uses `selection.data`, `.enter()`, `.merge()`, and `.exit()` to manage enter, update, and exit states, with SVG rendering and an animation showing data changes over time.

TTimothy sit
94% match
Loading thumbnail…

bowl of fruit

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.

Jjlspangl
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