Click to select

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

Select a fruit

Five fruit circles render in an SVG, each an apple or lemon represented by color and size. Clicking a circle selects it, adding a black stroke. D3 transitions animate the fruit entering, exiting, and changing type over time. The React framework manages state for selection and fruit data, while the D3 `scaleOrdinal` maps fruit types to colors and radii, and `data` joins drive the update pattern.

JJoseph Popoola

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

Bowl of fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Clicking a circle selects it, marking it with a black stroke. The React app uses d3.scaleOrdinal for colors and radii, while d3's selection, data join, and transition API animate entering, exiting, and updating circles over one-second durations.

NNkwachi Abel

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

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

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

Bowl of Fruit - Click to Select

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.

Vvic126