Boll of fruit

100%

Boll of fruit - click to select

✓ Published0🌍 Public

Last edited Jul 27, 2020

Created on Jul 27, 2020

Forked from 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.

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

91% match

Loading thumbnail…

Bowl of fruit : Click to select

Five apples appear in a row, each as a colored circle that expands to its full radius over one second. A click selects a fruit, outlining it in black. Animations, including apple removal and type changes, demonstrate D3's enter, merge, and exit transitions, using a modular selection API and ordinal scales for color and radius.

TTomisin Owolabi

90% match

Loading thumbnail…

bowl of fruit-click to select

Five circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033

90% 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…

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

MMuhammad Jarir Kanji

90% match

Loading thumbnail…

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.

Lloicvdk

90% match

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

Hhugomell

90% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in an SVG bowl. Clicking one turns its stroke black to mark it selected. The example demonstrates the D3 data join with enter, update, and exit selections, animating circle radius, position, fill, and stroke via `transition().duration()`. Using `scaleOrdinal` for color and size, it removes fruits on a timer, filters an apple, and changes one to a lemon, all rendered with `select` and `fruitBowl`.

WWarren-Fitzhenry

89% match