Skip to main content
SimilarExport ZIP
100%

Bowl of fruits

✓ Published0🌍 Public
AAsperge-Atomique
Last edited Oct 4, 2019
Created on Sep 18, 2019

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.

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

Bowl of fruits.js

Bowl of fruits.js demonstrates the D3 data-join pattern with enter, update, and exit selections. Five circles, initially apples, are rendered in SVG; a timer pops one fruit, another timer changes a fruit’s type to lemon, and a final filter removes an element. The example uses `selection.merge` to manage updates and `selection.exit` for removals, with `d3.scaleOrdinal` mapping types to fill colors and radii. It shows how array mutations trigger re-renders of the same chart.

DDavideSanto
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 fruits - click to select

A bowl of fruits visualizes a dataset of apples and lemons as colored circles within a bowl-shaped rectangle. Hovering over a fruit selects it, highlighting its outline in blue. Built with D3 v5, the example uses `selection.data`, `transition.attr`, and `scaleOrdinal` to map fruit types to colors and radii. Fruits are added, removed, and transformed via timed `setTimeout` calls, with enter, update, and exit selections animating their appearance and disappearance.

Ssongr0
93% match
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
93% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit shows five apples in a wide rounded rectangle, with one apple changing to a lemon and fruits being removed over time. The visualization uses D3 v5 with SVG rendering, binding fruit data to groups containing circles and text labels. d3.scaleOrdinal maps fruit types to colors and radii, while enter, update, and exit selections manage dynamic changes triggered by setTimeout intervals.

SShane Carey
93% match
Loading thumbnail…

Bowl of fruits

This example shows a dynamic bowl of fruits rendered as circles in an SVG canvas, where apples and lemons appear and disappear over time. Initially five fruits are drawn using a D3 data join with `scaleOrdinal` for both color and radius, mapping fruit types to red or yellow. After one second, a fruit is removed and another changes from an unknown type to a lemon, triggering D3’s enter/exit updates to reflect the state changes. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs with explicit `setTimeout` calls to drive the transitions.

AAsperge-Atomique
93% match