Skip to main content
SimilarExport ZIP
100%

Click to select

✓ Published2🌍 Public
RRoger Yu-Hsiang Lo
Last edited Feb 6, 2020
Created on Feb 6, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu
94% match
Loading thumbnail…

Bowl of Fruit - click to select

Five circles render a bowl of fruit where apples and lemons appear as red and yellow circles of different sizes. Clicking a fruit selects it and highlights it with a black stroke. The visualization animates circle radius, position, and color transitions over one second using D3's transition system. Data updates through timed scripted events that remove fruits or change an apple into a lemon in real time.

DDi Zhen
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps
93% match
Loading thumbnail…

Bowl of fruit Click to Select

Five circles represent fruit in a bowl, starting as red apples and transitioning to a yellow lemon, with the ability to click any fruit to select it. The visualization uses D3 v5 data joins with `transition` to animate circle radii on entry and exit, while `scaleOrdinal` maps fruit types to colors and sizes.

Jjeelong
93% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five colored circles represent apples and lemons in a bowl. Clicking a fruit selects it with a black outline. The visualization animates changes, with new fruits growing from a radius of zero and removed fruits shrinking away. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, while SVG circle transitions handle the enter, update, and exit animations.

PPabloReyesBetanzo
93% 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
93% match