Skip to main content
SimilarExport ZIP
100%

Eating apples

✓ Published1🌍 Public
PPioustu
Last edited Jun 1, 2022
Created on Jun 1, 2022
Forked from Hello Smile

Five apples sit in a bowl, drawn as steelblue circles in an SVG. A sequence of timed updates removes apples, and one apple changes into an orange lemon, with each change animated over one second using D3 v5 transitions and data joins. The code imports `scaleOrdinal` for color and radius mappings, and the `fruitsBowl` function uses `selection.enter` and `exit` to add, update, and remove circles based on array modifications driven by `setTimeout`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

bowl of apples

A row of SVG circles represents fruit in a bowl, starting as five apples. A simple d3 data join (with keyed enter, update, and exit selections) animates the circles with `transition` on their radius and x-position. The scene changes over time: a fruit is eaten (removed), one apple turns into a lemon via a color scale, and another is filtered out. Mouseover and mouseout events update a selected fruit, applying a black stroke highlight. Code uses D3 v7's `scaleOrdinal` for color and radius values.

Aakshayms0
91% match
Loading thumbnail…

Bowl of fruit - general update pattern

Five apples appear as red circles in an SVG, arranged horizontally above a bowl. Following a timed script, the visualization removes an apple, changes an apple to a yellow lemon, and removes another, demonstrating D3’s general update pattern. The code uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` with a `transition().duration(1000)` to animate radius and x-position changes, while `scaleOrdinal` maps fruit types to colors and sizes.

JJason-Manbodh
91% match
Loading thumbnail…

Bowl of fruit - general update pattern

Five apples appear as red circles in an SVG, arranged horizontally above a bowl. Following a timed script, the visualization removes an apple, changes an apple to a yellow lemon, and removes another, demonstrating D3’s general update pattern. The code uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` with a `transition().duration(1000)` to animate radius and x-position changes, while `scaleOrdinal` maps fruit types to colors and sizes.

JJason-Manbodh
91% match
Loading thumbnail…

Bowl of Fruit -Animation- Eat Another Apple

Five red apples sit in a row, then disappear and change colors through timed updates. The D3 v5 code uses `scaleOrdinal` for color and radius, `selection.data` with key functions, and `transition.duration` to animate circles growing, shrinking, and being removed. SVG circles render the fruit, and `setTimeout` calls trigger the bowl’s changes every second.

MMinwoo Pak
90% match
Loading thumbnail…

Bowl of Fruits

A bowl of five apples animates through a sequence of data changes, demonstrating D3’s data join and enter/update/exit pattern. Each circle represents a fruit, with its type determining fill color and radius via ordinal scales. Over time, an apple is removed, a middle apple transforms into a lemon, and another apple is filtered out. The code uses `selection.data`, `merge`, and `transition` to smoothly animate circle radii and positions, while SVG circles are appended, updated, and removed accordingly.

YYasara Peiris
90% match
Loading thumbnail…

Boll of fruit - click to select

Five apples transition into a bowl, resizing and recoloring via ordinal scales, while click-to-select highlights a fruit with a black stroke. The D3 v5 data join manages enter, update, and exit states, animating radius and position with `transition().duration(1000)`. Apples are removed, replaced with lemons, and filtered over timed intervals, demonstrating object-consistent updates through a key function. SVG rendering with `scaleOrdinal` for colors and radii drives the interactive, animated visualization.

Lloicvdk
90% match
Loading thumbnail…

Bowl of fruit 5:06:00

Five apples animate into view as red circles, then sequentially demonstrate D3 data joins: one apple disappears, another turns into a yellow lemon, and a third is removed. The example uses `d3.select` and `scaleOrdinal` for color and radius, with `selection.enter`, `merge`, and `exit` to manage updates. Transitions via `transition.duration` and `attr` animate the changes over one-second intervals, rendering static SVG circles that reshape and recolor in place.

Hhanulik.ondrej@gmail.com
90% match
Loading thumbnail…

Eating apples Tags

Color-coded circles represent fruits in a static SVG bowl, with steelblue apples and an orange lemon positioned along a row. The example demonstrates a data join pattern, updating the visualization when fruits are removed or one apple changes to a lemon. Using d3 v5, it employs `scaleOrdinal` for color and radius mappings, and selection methods like `merge` and `exit` to handle dynamic data changes. The fruits are generated in code, not from an external dataset.

PPioustu
90% match