Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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…

Bowl of fruit

A bowl of five apples rendered as SVG circles uses D3's enter, merge, and exit selections to update the scene. Over time, apples disappear, one transforms into a lemon, and colors and radii shift via ordinal scales and smooth transitions. The animation runs through timed JavaScript calls, with data bound to random IDs for stable updates. D3 v5's selection methods and transition API drive the changes, replacing apples with lemons at fixed x-positions.

Cceresfin
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…

About fruits

Five apples render in an SVG bowl, then update through timed data joins: one apple disappears, another becomes a lemon, and a third is removed. The fruit bowl chart uses d3-selection’s `enter` and `merge` methods to bind fruit objects to groups containing circles and text labels. `d3.scaleOrdinal` maps fruit types to colors and radii, with the code drawing from d3.v5.

WWhitney Hung
84% match
Loading thumbnail…

Bowl of fruit nested

Five apples render as red circles in an SVG bowl, then an apple is removed, one turns lemon yellow, and another is deleted in timed steps. The example shows D3.js data joins with key functions, using `selection.enter` and `selection.exit` to update groups and circles. `d3.scaleOrdinal` maps fruit types to colors and radii, while a `fruitBowl` function encapsulates the nested join logic.

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