Skip to main content
SimilarExport ZIP
100%

Fruit bowl

✓ Published0🌍 Public
YYuanting Mao
Last edited Oct 20, 2021
Created on Oct 20, 2021

Five red circles are drawn inside an SVG to represent apples, with each apple positioned at an equal horizontal interval and vertically centered. The example demonstrates how D3.js manipulates the DOM by appending circles for an initial dataset and then removing the last apple when the data array shrinks. Using D3 v5’s `select`, `range`, and data join methods like `enter()` and `exit()`, the code explicitly separates data from graphical marks, showing how updates to the underlying array trigger corresponding visual changes.

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

Five red apples are arranged in a horizontal line across the middle of an SVG canvas. The example demonstrates basic data joins with D3 v5, using `select`, `range`, and `selectAll` to bind an array of fruit objects to circle elements. Each circle gets its x position calculated from its index, with a fixed radius and fill color, rendering a simple static bowl of fruit without interaction.

EE.D.M.
93% match
Loading thumbnail…

Fruit bowl

A fruit bowl demonstrates incremental updates to SVG circles using D3.js v5. Five apples first render as a row of red circles, then one apple is removed, and a later change turns one remaining fruit yellow. The code uses D3's `select`, `range`, and `scaleOrdinal` APIs, with explicit enter, merge, and exit selections to manage the changing dataset.

GGlenn Henshaw
93% match
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
92% 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
92% match
Loading thumbnail…

Bowl of Fruit

Five red apples are arranged in a horizontal row across the middle of an SVG canvas, each rendered as a circle with a fixed radius. The visualization is built with D3 v5, using the `select` and `range` functions to generate fruit objects and bind them to circle elements via the data join. The code uses the `enter` selection and `append` method to create circles, positioning them with static `cx` and `cy` attributes. No interactivity or dynamic behavior is present; the example demonstrates a basic SVG drawing with D3.

AAkshay Khobragade
91% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl, and a timed sequence demonstrates D3 data joins by eating, replacing, and filtering fruits. Each apple is a circle with a label, positioned via a transform attribute using index-based spacing. The code uses `d3.scaleOrdinal` for color and radius mapping, while `selection.enter` and `selection.exit` manage element updates. The fruit data is an array of objects, and the visualization updates through repeated calls to a `fruitBowl` render function.

Xxychen0612.cs09@nycu.edu.tw
91% match
Loading thumbnail…

Frutas

This example shows a row of five red apples rendered as circles in an SVG canvas, using D3.js to bind data to SVG elements. The visualization demonstrates fundamental DOM manipulation by adding circles to the SVG with the `.enter()` method and removing them with the `.exit()` method after a fruit is popped from the data array. The code uses D3 v5's `select`, `range`, and data-binding APIs to manage the lifecycle of the circles, with each circle positioned horizontally based on its index and vertically centered. The apples are initially created and then one is removed, illustrating how D3 handles dynamic data updates.

Pphdiamantino
91% match
Loading thumbnail…

Bowl of Fruit

This example shows five red apples arranged in a horizontal row across the center of an SVG canvas. The visualization uses D3 version 5’s `select` and `range` functions to generate and bind a dataset of fruit objects, then appends circles for each apple with fixed spacing and a uniform radius. The rendering relies on SVG circles and static attributes for positioning and fill color.

Sshreyagoddu
91% match