Skip to main content
SimilarExport ZIP
100%

click to select

✓ Published1🌍 Public
Bbencestubnya
Last edited Jun 8, 2020
Created on Jun 8, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Click to select

Five circles render in an SVG, each representing a fruit. Clicking a circle selects it, applying a black stroke. The visualization uses D3 v5 within a React framework to animate circle radii and colors based on fruit type ("apple" or "lemon") via ordinal scales. The fruitBowl function manages enter, update, and exit transitions, animating radius changes with `transition().duration(1000)`.

Eevapavlinek
92% match
Loading thumbnail…

Click to select

Five fruit circles animate into a row, with apples rendered large and red while lemons appear smaller and yellow. Clicking a circle selects it, highlighting it with a black stroke. The visualization uses d3.js v5 with the data-join pattern in `fruitBowl.js`, employing ordinal scales for color and radius, and transitions to animate entering, updating, and exiting circles over time.

RRoger Yu-Hsiang Lo
91% 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
91% 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
91% 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
91% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit enter the SVG with a 1-second transition, each colored by a d3.scaleOrdinal mapping apples to red and lemons to yellow. Clicking a circle selects it, applying a black stroke via the data join and transition. The scene’s data updates are arranged with setTimeout: apples are removed from the end, the third fruit changes type to a lemon, and another apple is filtered out, demonstrating enter, update, and exit transitions.

Iianleekq
91% match
Loading thumbnail…

hover to select

Five fruit circles rendered in SVG respond to hover by toggling a black stroke around the selected fruit. The example cycles through data updates—removing fruits, changing a plum into a lemon, and filtering the array—while `d3.transition` animates circle radii to zero for exits. Fruit type maps to color and radius via `d3.scaleOrdinal`, and the selection state drives re-rendering through a custom `fruitBowl` function.

Bbencestubnya
91% match