Skip to main content
SimilarExport ZIP
100%

Just replace an apple with a lemon (apply 'merge')

✓ Published1🌍 Public
DDi Zhen
Last edited Jun 21, 2019
Created on Jun 21, 2019

Five apples in a row are displayed as pink circles on an SVG canvas. One second later the last apple disappears, and after another second the third apple turns yellow, demonstrating a data merge. The example uses the d3 v5 `select` and `range` functions to manage the fruit array and the `merge` method to smoothly apply the color and radius changes to existing circles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Just replace an apple with a lemon (apply 'merge')

Five apples render as pink circles, then one apple is removed and a different apple changes to a yellow lemon. Built with D3 v5, the `fruitBowl` component uses `selection.selectAll` and the `.merge()` method to apply shared `fill` and `r` attributes from ordinal color and radius scales to both new and existing circles.

DDi Zhen
93% 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
86% 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
85% match
Loading thumbnail…

Click to Select

Five apples render as SVG circles that transition in size and position when clicked, receiving a black stroke to indicate selection. The example demonstrates d3 data joins with key functions, ordinal scales for color and radius, and chained transition APIs. D3 v6’s selection.on, merge, and exit patterns handle dynamic updates as fruits are removed or one apple transforms into a lemon.

WWayne716
85% 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
85% match
Loading thumbnail…

Making a bowl of fruit

Five apples appear in a row, then one exits and another becomes a lemon. This D3.js example demonstrates the general update pattern through chained `selection.join` methods without using `join`, instead applying `enter`, `merge`, and `exit` to handle data changes. It uses `scaleOrdinal` for fruit colors and radii, and `setTimeout` to trigger pop and type-change mutations. The SVG circles are positioned with fixed `cx` values and a static `cy`, with the exiting fruit turning black before removal.

NNoWizards
84% match
Loading thumbnail…

Click to Select

Five fruit shapes appear in a row, rendered as SVG circles with labels. Hovering over a circle turns it steel blue, while apples are red and lemons yellow. The visualization demonstrates data joins through animated transitions, removing apples, replacing one with a lemon, and filtering elements at timed intervals. It uses d3-selection, d3-scaleOrdinal, and transition methods to update position, radius, and fill based on a selectedFruit state.

Ggoodej
84% match
Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl demonstrates a data join pattern in D3.js, rendering five apples as circles with red fills inside a rounded rect bowl on an SVG canvas. The example uses `d3.scaleOrdinal` to map fruit types to colors and radii, and `selection.merge()` to update circles and text labels in place. Over timed intervals, the code removes fruits, replaces one apple with a lemon, and filters out another, showing how enter, update, and exit selections handle changing data.

Eemntd
83% match