Boll of fruit

100%

✓ Published2🌍 Public

Last edited Jul 26, 2020

Created on Jul 26, 2020

Five apples animate into a row, then shrink and vanish as they are eaten or replaced by lemons. This demonstrates the D3 data join pattern with explicit enter, update, and exit selections. The code uses `selection.data`, `selection.enter`, `selection.merge`, and `selection.exit` alongside `.transition().duration()` for smooth radius and position changes. Fruit type determines color and size through `scaleOrdinal` with a d3.v5 SVG rendering approach.

AI-generated description

/* When we call selectAll and data, we create a "data join", we join data (in this case our 5 apples (array) and some elements (DOM elements in this case: our circle)

We have 3 case > Enter : we only have data, no elements

Update : we have both data and elements Exit : we only have elements but no data

In d3 we need to explicitly call thos 3 functions (.enter, .update, .exit)

selectAll give the elements part, .data give the data (always an array)

thanks to that d3 know exactly how much element are on the enter, update and exit */

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Boll of fruit - Hover to select

Five fruit circles are rendered in an SVG, and hovering one turns its outline black. A data join in D3 v5 handles enter, update, and exit states: new fruits grow in, types change between apples and lemons, and removed fruits shrink away. The code uses `d3.selectAll`, `selection.data`, `selection.merge`, and `transition.attr` for the animated updates, with `scaleOrdinal` mapping fruit type to color and radius. The `fruitbowl.js` module manages the rendering.

Lloicvdk

90% match

Loading thumbnail…

Boll of fruit - click to select

Five apples appear as circles whose size and color encode fruit type, and a black or white stroke highlights the user-selected fruit. Clicking a circle updates the selection with a one-second transition that animates circle radius and position. The example demonstrates D3's data join model by explicitly handling enter, update, and exit states through `selectAll`, `.data`, `.enter`, `.merge`, and `.exit`, using `scaleOrdinal` for color and radius scales.

Lloicvdk

90% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

FFernando Gonzalez - Valadez

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

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

89% match

Loading thumbnail…

About fruits

This example shows how a data join animates changes to a fruit bowl. Five apples are initially rendered as circles, then one is removed, another transforms into a lemon, and a third is eaten, all with smooth transitions. Using D3's `select`, `range`, and `scaleOrdinal`, the `fruitBowl` function manages circle enter, update, and exit states via `.transition().duration(1000)`, animating radius and position. The SVG output is updated dynamically as JavaScript timeouts trigger the re-rendering.

WWhitney Hung

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate into a row, with apples shown as large red circles and lemons as smaller yellow ones. Clicking a fruit logs its ID and re-renders the selection state. Apples are removed and replaced over timed intervals, demonstrating enter, update, and exit transitions. The example uses d3-selection’s `data` join with key functions, `transition().duration()`, and d3-scale’s `scaleOrdinal` for color and radius mappings, rendering in SVG.

EecoBela

89% match