Fork of haha

100%

✓ Published0🌍 Public

Last edited Dec 3, 2022

Created on Dec 3, 2022

Forked from haha

Five apples appear in a bowl, then the example animates a series of changes: one apple is removed, a second apple turns into a lemon, another apple disappears, and a third becomes a lemon. Each fruit is an SVG circle, with color and size determined by a `scaleOrdinal` color scale and radius scale. The D3 code uses `select` for DOM selection, `.transition()` with a one-second duration to animate attribute changes, and mouseover/mouseout events that call `onClick` to highlight the selected fruit with a yellow stroke.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of haha

A sequence of apples and lemons is rendered as colored circles in an SVG bowl, with fruit appearing, disappearing, and changing type over time. The example demonstrates data joins and transitions using D3 v5, with the `fruitbowl` function updating circle and text elements via `selection.merge()` and `exit()` removal. Color and radius are mapped through `scaleOrdinal` domains, while timed `setTimeout` calls modify the fruit array to trigger re-renders.

Llinyyyyyyyyy

91% match

Loading thumbnail…

Fork of Fork of Bowl of Fruit - clicks

Five apples render as circles in an SVG, with clicks, mouseovers, and mouseouts temporarily highlighting a fruit with a black stroke. D3 transitions animate new fruit entering with a radius of zero and removed fruit shrinking away. The code uses `d3.scaleOrdinal` for color and radius, plus selection `.merge` and `.transition` to update positions. A timer-driven sequence replaces an apple with a lemon and removes other apples over time.

EEmmanuel Chukwujindu

91% match

Loading thumbnail…

Fork of Fork of Bowl of Fruit - Hover to Select

Using D3 v5, this visualization displays a row of five apples as colored circles that animate in size and position. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses `scaleOrdinal` for color and radius, `transition().duration()`, and a data join with `enter`, `merge`, and `exit`. Over time, `setTimeout` calls remove apples or change one to a lemon, demonstrating animated updates to the SVG scene.

Ggharakhani1986

90% match

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

Five apples appear in a row and enlarge from zero radius; clicking one selects it with a black stroke, while a lemon is added to the bowl using an animated transition. The code uses d3-selection’s data join with a key function, and d3-transition’s `.transition().duration()` to animate circle positions and radii. SVG rendering displays the fruit, with d3-scaleOrdinal mapping fruit types to colors and sizes.

SSuzie1022susu

89% match

Loading thumbnail…

Fork of bowl of apples 87

Five apples are rendered as red circles that transition to their positions, with hover highlighting and removal animated by shrinking the radius. The code uses D3 v7 selections with data joins, `scaleOrdinal` for color and radius mappings, and `transition().duration()` for movement. Apples are removed and one changes to a lemon over timed updates.

Aakshayms0

89% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

A bowl of five apples animates in with a smooth transition, and clicking a fruit selects it with a black stroke while deselecting others. The code demonstrates a data join with enter, update, and exit selections, using `d3.scaleOrdinal` for color and radius scales, and `transition().duration(1000)` to animate shape changes. Over time, apples are eaten and one is replaced by a lemon, re-rendering the bowl with each change in the `fruits` array.

Yyejichun@naver.com

89% match

Loading thumbnail…

Fork of Fork of Bowl of fruit - with click events

A bowl of five apples animates through a sequence of changes: one fruit disappears, another transforms into a lemon, and a third is removed. Clicking any fruit selects it, highlighting its outline in black. The example demonstrates reusable data joins with `d3.selectAll`, `enter`/`merge`/`exit` selections, and ordinal scales for mapping fruit type to color and radius. Smooth transitions are applied via `transition().duration()`, animating circle position and radius over one second.

Cceresfin

88% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

Five circles represent apples in an SVG bowl, rendered with d3 v5 via the `fruitBowl` module. Hovering an apple selects it with a black stroke, using `mouseover` and `mouseout` events that call `setSelectedFruit`. The `scaleOrdinal` color and radius scales map fruit types to red or yellow and sizes. Animated `transition` calls adjust circle positions and radii over one second, while `exit` transitions shrink removed fruits; timers replace an apple with a lemon and remove fruits.

AAnthony Zornig

88% match