Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
PPenguin-jpg
Last edited Sep 18, 2023
Created on Sep 18, 2023

Five circles representing fruit appear in a row, and clicking one highlights it with a black outline. The scene animates over time: a fruit is removed after one second, an apple changes into a lemon after two seconds, and another fruit is removed after three seconds. The example uses D3 v7 with `d3.select`, `d3.range`, and `d3.scaleOrdinal` to manage colors and radii, while SVG `<circle>` elements are added, updated, and removed via `transition().duration()` for smooth animations.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit animate into a bowl. Clicking a fruit selects it, giving it a black outline, and a sequence of timed updates replaces an apple with a lemon, removes fruits, and pops one. Built with D3 v5, it uses `selection.transition().duration()` for SVG circle animations, `scaleOrdinal` to map the types 'apple' and 'lemon' to colors and radii, and a click handler to update the `selectedFruit` state, all driven by a render function.

Ccyro666
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

CCalvin Gomez
95% match
Loading thumbnail…

Bowl of fruit - Click to Select

Five fruit circles sit in a row; clicking one highlights it with a black outline. Apples and lemons are distinguished by color and size, and fruit is removed or swapped in over time. Built with D3 v5, the example uses a general update pattern with `selection.selectAll`, `.enter().append`, `.merge`, and `.exit().transition` to animate radius and position changes over one second. Settings come from an `index.js` script that modifies a fruit array at timed intervals.

MMelina
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, and clicking one selects it with a thick black stroke. Over time, apples are removed, and one apple transforms into a lemon with a yellow color and smaller radius. The example uses D3 v5’s data join with a `key` function and `transition` methods to animate enter, update, and exit states. It also uses `scaleOrdinal` for color and radius mappings and SVG circles for rendering.

MMichał Szumnarski
95% match
Loading thumbnail…

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

Bowl of Fruit - Click to Select

Five fruit circles animate between a bowl arrangement and removal, with each apple and lemon rendered as an SVG circle. The d3.js code uses a shared fruitBowl function with a click handler to highlight the selected fruit with a black stroke. Transitions employ the D3 update pattern with enter, merge, and exit selections to smoothly animate radius and position changes over one-second durations. The colorScale and radiusScale ordinals map fruit types to their visual properties.

MMukund Khandelwal
94% match
Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing apples appear in a row and can be clicked to select one, which gains a black outline. Over time, one apple is removed and another transforms into a lemon, changing its color and size, while a third apple disappears. Using D3 v5, the chart binds SVG groups to data, applies ordinal scales for color and radius, and animates radius changes via `transition`. A click event updates the selected fruit, triggering a re-render with the `fruitBowl` function.

MMartin Christensen
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit sit in a row across an SVG canvas. Clicking an apple or lemon adds its ID to a selected set, drawing a black outline around it. The bowl animates over time as apples are removed and one apple is replaced by a lemon, using D3 v5's `data` join, `transition()` with a 1000-millisecond duration, and `scaleOrdinal` for color and radius mapping.

RRobert Curtis
94% match