Skip to main content
SimilarExport ZIP
100%

Fork of need some fruit - click interactions

✓ Published1🌍 Public
CCalvin.
Last edited Mar 22, 2022
Created on Mar 22, 2022

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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

Fork of Bowl of fruit - hover to select

A bowl of five apples rendered as SVG circles animates through data updates, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates D3 v5’s join pattern using `selection.data`, `enter`, `merge`, and `exit` transitions, with `scaleOrdinal` mapping fruit types to colors and radii. Hovering triggers a callback to update the selected fruit, while timed actions sequentially remove fruits and replace one apple with a lemon, causing smooth radius and position transitions over one-second durations.

TTimothy sit
91% 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
91% 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
91% 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
90% match
Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples are rendered in a row as SVG circles, with a black outline indicating the currently selected fruit. Clicking any apple updates the selection state. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mappings and React’s `useState` to manage the selected fruit’s ID. The code includes commented-out D3 transitions for potential animated repositioning, though the active version only handles static rendering and click handling.

Llrakla
90% match