Learn Selection

100%

Learn Selection

✓ Published2🌍 Public

Last edited Jan 5, 2021

Created on Jan 1, 2021

A fruit bowl of five circles transitions through a sequence of changes: one circle shrinks and disappears, a circle changes from red (apple) to yellow (lemon), and another is removed. The example demonstrates D3's selection API with `selectAll`, `.enter()`, `.merge()`, and `.exit()`, using `.transition().duration()` to animate position, fill, and radius. It uses `scaleOrdinal` for color and radius mapping, and `range` to generate initial data.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

bowl of fruit-hover to select

Five circles initially render as apples in a red-to-yellow color scale, with hover events highlighting the selected fruit via a black stroke. Using d3.v5 data joins and transitions, the example animates circle radius and position changes while updating the selection state through callbacks. Over sequential timeouts, the visualization removes fruits and mutates an apple into a lemon, demonstrating enter, update, and exit selections with d3.scaleOrdinal for color and radius values.

Ssingularity6033

88% match

Loading thumbnail…

Click to select with D3.js!

Five fruit circles animate into a bowl, each colored by fruit type via a d3.scaleOrdinal color scale. Clicking a circle selects it, giving it a black stroke, while transitions update positions and radii. The example demonstrates data joins with selection.data, enter/merge/exit patterns, and d3.transition for smooth updates, including removal and type changes timed with setTimeout.

LLidiamir

87% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

CCalvin Gomez

87% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples and lemons enter, update, and exit with a smooth one-second transition, using a D3 ordinal scale for color and radius. Clicking a fruit selects it, adding a black stroke. The example demonstrates a data join with `selection.data`, keyed by `id`, and uses `transition().duration(1000)` for animation. Data mutations occur via `setTimeout`, replacing an apple with a lemon and removing fruits.

HHe Jianfeng

87% match

Loading thumbnail…

click to select

Five circles represent fruit in a bowl, rendered as SVG by D3 v5. Clicking a fruit selects it, highlighting it with a black stroke. A data join with keyed enter, update, and exit transitions animates shape changes: plums shrink and disappear, and one plum transforms into a lemon. The example uses d3.scaleOrdinal for color and radius, and transitions via `selection.transition()` with a duration of 1000ms.

Bbencestubnya

86% match

Loading thumbnail…

FruitBowl Example

Five circles representing apples appear in a row, then transition through a sequence of updates: one fruit is removed, a middle apple changes into a lemon, and another circle exits, all with smooth one-second animations. The example uses D3 v5 with `scaleOrdinal` for color and radius mapping, plus `selection.enter`, `merge`, and `exit` with `transition` and `attr` to animate circle positions and sizes. Data is generated with `range` and `Math.random` IDs, rendered as SVG in a fixed 960×500 viewport.

LLex

86% match

Loading thumbnail…

Untitled

A dynamic bowl of fruit demonstrates D3 v6 data joins and transitions. Five circles representing apples render in an SVG, updating as fruits are removed or changed to lemons over timed intervals. Using `selection.data` with key functions, `enter`, `merge`, and `exit` selections animate position, radius, and color via `transition().duration()`. A `scaleOrdinal` maps fruit types to fill colors and radii. Clicking a circle logs to the console, though no visible selection occurs.

Bbicyclecode

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

86% match