Skip to main content
SimilarExport ZIP
100%

Click to select with D3.js!

✓ Published1🌍 Public
LLidiamir
Last edited Mar 18, 2021
Created on Mar 17, 2021

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.

AI-generated description

Half way towards a smiley face. Smiley mark down (MD).

MIT Licensed

Similar vizzes

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

Bowl of fruit - Click to select

Five circles representing fruit appear in a row and animate to their full size. Clicking a circle selects it, drawing a black outline around that fruit. The example uses D3 v5 with data joins and transitions to update the visualization, while `scaleOrdinal` maps fruit types to colors and sizes. Over time, the data changes to remove fruit or change one apple to a lemon.

DDaniel García
91% 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 fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Ggregosaure
91% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl and animate into position using D3 v5 data joins. Clicking a fruit selects it, highlighting the circle with a black stroke. The code uses `scaleOrdinal` for color and radius, `transition().duration()` for smooth updates, and keyed data joins to handle entering, updating, and exiting elements across timed state changes.

LLucas Meirelles
91% match
Loading thumbnail…

Click to select

Five fruits, rendered as colored circles in a bowl, respond to clicks by acquiring a black outline to indicate selection. The SVG visualization demonstrates dynamic updates using D3.js v5 within a React framework, where the `fruitBowl` function handles enter, update, and exit transitions. Animated with `transition().duration(1000)`, fruits shrink on removal and change color when swapped. The example shows D3’s `scaleOrdinal` for color and radius mappings and `select` for DOM manipulation, illustrating core data-binding and lifecycle management.

Ggorfoula
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