Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Bowl of fruit - Click to Select D3.js!

✓ Published1🌍 Public
CCarloWK1202
Last edited Jul 28, 2022
Created on Jul 13, 2022

Five circles render as apples and lemons in an SVG bowl, with clicks selecting a fruit by highlighting its black stroke. D3.js v5’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates circle entry, exit, and resizing. The `fruitBowl` module uses data joins, `on('click')` handlers, and timed `setTimeout` calls to dynamically add, remove, or mutate fruit data, triggering re-renders.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - Hovering to Select D3.js!

Five fruit circles, apples and lemons, render in an SVG bowl using D3 v5’s data join pattern. Hovering over a circle selects it, applying a black stroke via the `mouseover` and `mouseout` handlers. The `scaleOrdinal` color and radius scales map fruit types, while entering and exiting circles animate radius changes with `transition().duration(1000)`. A `setSelectedFruit` callback triggers re-renders, demonstrating animated updates as fruits are removed or replaced over time.

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

Fork of need some fruit - click interactions

Five apples and a lemon are rendered as color-coded circles in an SVG bowl, with each fruit selectable by click. The selected fruit gains a black outline. The code uses D3 v5’s `scaleOrdinal` for color and radius, and joins data to circles with `selectAll`, `enter`, and `merge`. It also demonstrates transitions on `attr` for radius and position, plus `on('click')` handlers to update a selected fruit’s ID and re-render. Data updates add, remove, and change fruit types over timed intervals.

CCalvin.
93% match
Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

A circle represents each fruit, with apples and lemons distinguished by color and size, and clicking a fruit selects it by adding a black stroke. The visualization uses D3 v5 with a data join to update SVG circles across timed changes that remove fruits, replace an apple with a lemon, and filter the array. Transition methods animate radius and x-position changes, while ordinal scales map fruit type to color and radius.

Ggharakhani1986
93% 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…

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

Fork of Fork of bowl of fruit

A fruit bowl renders five apples as red circles with labels on an SVG canvas. D3 version 5 uses data joins with enter, update, and exit selections to animate transitions: an apple disappears after one second, the third apple turns into a lemon after two seconds, and another apple is removed after three. The `fruitBowl` function uses `scaleOrdinal` for color and radius mappings, while circles and text elements update their positions and attributes dynamically.

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