Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Practic 06 | Bowl of Fruit

✓ Published0🌍 Public
Hhimanshucse2012
Last edited Nov 6, 2021
Created on Nov 6, 2021

Five apples arranged as circles transition in and out of a bowl over time, with one apple turning into a lemon. The example demonstrates enter, update, and exit selections using D3 v5 data joins, where circles animate their radius and fill color via d3-transition. Fruit positions and sizes are mapped through ordinal scales for color and radius. Timed callbacks trigger changes to the fruit array, showing smooth visual updates as elements are added, removed, or modified.

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 Fork of Bowl of fruit - with click events

A bowl of five apples animates through a sequence of changes: one fruit disappears, another transforms into a lemon, and a third is removed. Clicking any fruit selects it, highlighting its outline in black. The example demonstrates reusable data joins with `d3.selectAll`, `enter`/`merge`/`exit` selections, and ordinal scales for mapping fruit type to color and radius. Smooth transitions are applied via `transition().duration()`, animating circle position and radius over one second.

Cceresfin
92% 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
92% match
Loading thumbnail…

Fork of Practic 06 | Bowl of Fruit

This example demonstrates a dynamic fruit bowl visualization using D3.js where five apples are initially rendered as circles, one is removed, and another transforms into a lemon over time. The code uses D3's `select`, `scaleOrdinal` for color and radius scales, and `range` to generate the fruit array. It manipulates the SVG document directly by appending, updating, and removing circle elements through the `render` function to reflect changes in the data array. The visual comparison between the red apples and yellow lemon is created using a categorical color scale.

Hhimanshucse2012
91% match
Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

A bowl of five apples animates in with a smooth transition, and clicking a fruit selects it with a black stroke while deselecting others. The code demonstrates a data join with enter, update, and exit selections, using `d3.scaleOrdinal` for color and radius scales, and `transition().duration(1000)` to animate shape changes. Over time, apples are eaten and one is replaced by a lemon, re-rendering the bowl with each change in the `fruits` array.

Yyejichun@naver.com
91% match
Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

Five apples appear in a row, then a sequence of timed changes demonstrates the D3.js general update pattern: one apple is removed, another becomes a lemon, and a second apple is removed. The fork renders with SVG circles using D3 v5, leveraging `scaleOrdinal` for color and radius mappings. The reusable `fruitBowl` function applies the standard enter, merge, and exit selection workflow with `selection.data`, showing how to handle dynamic data updates in D3.

MMuiruriscode
91% match
Loading thumbnail…

Fork of Fork of Bowl of fruit - Click to Select D3.js!

Five circles render as apples and lemons in an SVG bowl, with clicks selecting a fruit by highlighting its black stroke. D3.js v5’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates circle entry, exit, and resizing. The `fruitBowl` module uses data joins, `on('click')` handlers, and timed `setTimeout` calls to dynamically add, remove, or mutate fruit data, triggering re-renders.

CCarloWK1202
91% match
Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

Five apples animate into a row, then the sequence removes one, changes one to a lemon, and deletes another, demonstrating the D3 general update pattern’s special cases. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.duration`, scaling circle colors by fruit type via `scaleOrdinal`. Rendering is SVG with D3 v5, driven by timed `setTimeout` calls.

Ggharakhani1986
91% match
Loading thumbnail…

Fork of bowl of fruit

This example demonstrates animated transitions of fruit shapes in an SVG bowl using D3 v5. Circles representing apples and lemons enter, update, and exit with sequential timing, showing how data joins and key functions track object identity. The code uses `d3.scaleOrdinal` for color and radius mappings, `d3.selectAll` and `selection.merge` for enter-update handling, and `transition.duration` to animate circle positions and radii over one second. Fruits are stored as an array with random IDs, and `setTimeout` triggers state changes like removing or replacing items.

Jjlspangl
91% match