Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
Vvic126
Last edited Jun 25, 2020
Created on Jun 25, 2020

Five fruit circles appear in a row, rendered as SVG elements in React with D3 v5. Clicking a fruit highlights it with a gray outline while its color and radius animate through `transition().duration(1000)`, mapping apple and lemon types via `scaleOrdinal` color and radius scales. The data join uses a key function for object constancy, and exit transitions shrink circles to radius 0 before removal as fruits are eaten or replaced over time.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit Click to Select 2

Five fruit circles in an SVG bowl transition between apple and lemon states, with hover highlighting that selects a fruit by turning its stroke black. The visualization uses D3 v5's `scaleOrdinal` for color and radius mapping, while `selection.enter` and `exit` manage animated transitions as fruits are removed or changed. The React framework orchestrates state updates through an `onClick` handler, triggering re-renders that shift positions along an x-axis and apply 1000-millisecond duration transitions to circle attributes.

JJake
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruits render as colored circles in an SVG, with apples and lemons distinguished by size and color. Clicking a circle records its selection and triggers a re-render. The visualization demonstrates data joins and transitions using d3.selectAll, data binding, and transition methods, with fruits added, removed, and type-changed over timed intervals. The d3.scaleOrdinal maps fruit types to radii and colors, while React manages the click handler and state updates.

Ccathykan
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that shrink away, change to lemons, and are removed. Clicking any fruit selects it, highlighting it with a black outline. Updates use D3 v5 data joins with `enter`, `merge`, and `exit`, relying on ordinal scales for color and radius. All position and size changes animate over one second via `transition().duration(1000)`.

ZZ-Richard
95% match
Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich
95% match
Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row, rendered as SVG circles. Clicking any piece toggles a black selection ring around it, and the bowl animates over one second: apples shrink to nothing and disappear, a lemon grows in place, and the remaining items slide to new positions. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mapping, and `transition().duration(1000)` to animate enter, update, and exit states.

BbeauMarko
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row as circles, and each circle can be clicked to select it, which adds a black outline. Over time, the fruits change: one is removed, one becomes a yellow lemon with a smaller radius, and another is deleted. The visualization uses a React component with D3 v5’s `scaleOrdinal` for color and radius, and animated transitions via `transition().duration()` to smoothly grow, shrink, and reposition the SVG circles. Data mutations are triggered by timed `setTimeout` calls in the main `index.js`.

GGino Dzin
95% match
Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing apples animate into a horizontal row, with clicking one highlighting it with a black stroke. Over time, an apple is removed, another changes into a lemon, and a second apple is deleted, demonstrating enter, update, and exit transitions. Built with React and D3 v5, the visualization uses `d3.scaleOrdinal` for color and radius mappings, while `selection.merge` and chained `transition` calls animate circle attributes based on bound fruit data.

BB Sundaresan
95% match