Skip to main content
SimilarExport ZIP
100%

Practic 06 | Bowl of Fruit

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

This example demonstrates the enter-update-exit pattern in D3.js v5 by rendering a row of five red apples as SVG circles. Using `selection.selectAll('circle')` and `selection.data()`, the code binds an array of fruit objects to the DOM, appending circles with `enter().append('circle')` and positioning them via `attr('cx', (d, i) => i * 100 + 60)`. After two seconds, a `setTimeout` removes the last fruit from the array, and the `exit().remove()` method deletes the corresponding circle, showing how D3 handles data-driven updates. The visualization uses a static 960×500 SVG canvas with no interaction.

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

This example shows a static bowl of fruit as five red circles arranged horizontally across an SVG canvas. It demonstrates fundamental DOM manipulation with D3.js by binding an array of fruit objects to circle elements, appending them on enter, and removing them on exit when the array shrinks. The code uses D3 v5’s `select`, `range`, `data`, `enter`, `exit`, and `remove` methods to update the visualization, with the final pop operation removing the last apple from the display.

KKarkG
90% match
Loading thumbnail…

Bowl of Fruit - Update Pattern

Five dark red apples appear in a row inside an SVG canvas. After one second, D3’s enter/exit update pattern removes the last apple, shrinking the row to four circles. The code uses `selection.data()` to bind a fruit array, then explicitly appends circles on enter and removes them on exit, with the array modified via `pop()` and re-rendered.

JJohn Hamilton Bradford
90% match
Loading thumbnail…

Bowl of fruit

A dynamic SVG bowl of fruit demonstrates the enter, update, and exit pattern in D3 v5. The visualization initially renders five red apples as circles with labels, then sequentially removes one apple, changes a second apple into a yellow lemon, and filters out another fruit over timed intervals. Using `scaleOrdinal` for color and radius mapping, the code applies `selection.merge` to update shared attributes and manages transitions with `attr` for x-position and radius. The example relies on `setTimeout` callbacks to trigger re-renders and shows how data joins handle dynamic changes.

IIgor Borzunov
89% 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
89% match
Loading thumbnail…

Bowl of fruit - General update pattern with D3.js

This example demonstrates the general update pattern in D3.js by rendering a bowl of fruit as a row of circles on an SVG canvas. The code uses `select`, `range`, and data binding to create five circles, each representing an apple, positioned horizontally with a spacing of 100 pixels and centered vertically. It relies on the `enter()` selection to append the circles and sets their `cx`, `cy`, and `r` attributes directly. The visualization is built with D3 v5 within a React framework, drawing to a fixed 960×500 SVG viewport.

CCarloWK1202
89% match
Loading thumbnail…

Bowl of fruit

An SVG bowl of fruit shows five apples rendered as red circles, with two scheduled updates: one apple is removed after a second, and another apple turns into a lemon (yellow, smaller) after two seconds. The visualization uses d3-selection to bind and update circle elements, d3-scaleOrdinal for color and radius mappings, and d3-range to generate the initial fruit array. Data updates trigger enter, update, and exit selections, demonstrating a basic data join pattern in D3 v5.

Kkaviya-ds
89% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 v5, showing how to handle enter, update, and exit selections for a simple bowl of fruit visualization. A row of apples is displayed as circles and text, with fruits being removed, replaced, and filtered over time using `setTimeout`. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, and `selection.exit()` to manage SVG groups, while `scaleOrdinal` maps fruit types to colors and radii. The rendering approach is SVG-based, with the fruit positions computed via `translate` transformations inside the `fruitBowl` function.

IIan Perry
89% match
Loading thumbnail…

Bown of fruit general update pattern - D3.js

This example demonstrates the D3.js general update pattern with a bowl of fruit visualization. Five red circles, representing apples, initially appear in a row across the SVG canvas. After one second, a fruit is removed from the array, and the `render` function re-executes, causing the exiting circle to be removed via `selection.exit().remove()`. The visualization uses D3 v5’s `select` and `range` methods, with data bound through `selection.data()`, and renders shapes as SVG circles with fixed positions based on their index.

Iiascchwen
89% match