Fork of Practic 06 | Bowl of Fruit

100%

Fork of Practic 06 | Bowl of Fruit

✓ Published1🌍 Public

Hhimanshucse2012

Last edited Nov 6, 2021

Created on Nov 6, 2021

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.

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 Practic 06 | Bowl of Fruit

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.

Hhimanshucse2012

91% 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

90% match

Loading thumbnail…

Fork of Bowl of Fruit - Samir

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and replaced over time. The view updates through a sequence of timed state changes, with each fruit rendered as an SVG circle and labeled text. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and the `fruitBowl` function manages enter, update, and exit selections. Data is a simple array of fruit objects, manipulated through `setTimeout` calls to trigger re-renders.

Ooptimizeresume

90% match

Loading thumbnail…

Fork of Bowl Of Fruits-Nested

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and transformed into lemons through a sequence of timed updates, showing how D3.js handles incremental data changes. The code uses `d3.select` and `selection.merge` to manage SVG groups and shapes, with `transition().duration()` animating circle radii when fruits change. A custom `fruitBowl` function applies ordinal color and radius scales, mapping fruit types to visual properties, while the removal and addition of data elements triggers enter, update, and exit states. The underlying data is a hardcoded array of fruit objects modified by setTimeout callbacks.

MMahaveer Jain

90% 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

89% 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

89% match

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

89% 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

88% match