AAAAApple

100%

✓ Published0🌍 Public

Last edited Aug 12, 2019

Created on Aug 12, 2019

Five red apples appear in a row against a white background, then one disappears after a second. The example demonstrates D3's data join pattern by binding an array of fruit objects to SVG circles, entering circles for each apple, and removing the circle when the data array shrinks. It uses D3 v5's `select`, `range`, and the `enter`/`exit` selections with `attr` to position and style the circles at 120-pixel intervals.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fruit bowl

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.

YYuanting Mao

88% match

Loading thumbnail…

bowl of apples

Five apples render as red circles in a row. After one second, an apple is removed. After two more seconds, a middle apple becomes a lemon, changing its color and radius. The example demonstrates the data join pattern using D3 v7’s `selectAll`, `data`, `enter`, `merge`, and `exit` methods, with `scaleOrdinal` mapping fruit types to colors and radii in an SVG.

Aakshayms0

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

85% match

Loading thumbnail…

Hey there, fruity!

Five apples appear as red circles in an SVG bowl, then shift through a sequence of updates: one disappears, another turns yellow and shrinks into a lemon, and a third is removed. The D3 data join uses `selection.enter`, `merge`, and `exit` with inline transitions, while `scaleOrdinal` maps fruit types to colors and radii.

OOhayouKaminari

85% match

Loading thumbnail…

fruit bowl - general update pattern

Five red circles represent apples in a row, using D3 v5’s general update pattern with `selection.data`, `enter`, `exit`, and `remove`. The initial `range(5)` dataset renders all circles, then after one second a `setTimeout` removes the last apple, triggering an exit transition that deletes the corresponding circle from the SVG.

AAkash Goyal

84% match

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.

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

84% match

Loading thumbnail…

Fruit bowl to be

Five apples appear in a row, then one disappears after a second, and one apple turns yellow to become a lemon. The example demonstrates basic D3.js data joins with `selection.selectAll`, `enter`, and `exit` methods, using `scaleOrdinal` for color mapping. It renders SVG circles sized by a fixed radius, with transitions triggered by `setTimeout` calls that modify the underlying `fruits` array before re-rendering.

Wwieswies

84% match