Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
BBazarbayevManas
Last edited Aug 28, 2019
Created on Aug 28, 2019

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
100% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a bowl of fruit as a set of colored circles that users can click to select, with a black outline highlighting the chosen piece. The visualization uses D3 v5’s selection API, `scaleOrdinal` for color and radius mapping, and chained transitions to animate the circles’ entry, exit, and size changes over 1000 milliseconds. Data is generated randomly, and the sequence demonstrates adding, removing, and modifying fruit items, with apples and lemons rendered in red and yellow.

LLongYuu
96% match
Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

IIgor Borzunov
95% match
Loading thumbnail…

Bowl of Fruits - Click to Select

This example demonstrates a dynamic fruit bowl visualization where users can click individual fruit circles to select them. It shows how D3’s general update pattern handles entering, updating, and exiting SVG elements with smooth transitions. The code uses `d3.scaleOrdinal` for color and radius mappings, `selection.enter()` and `selection.exit()` with `.transition()` to animate circle appearance and removal, and an `onClick` handler that triggers a re-render. Randomly generated fruit IDs serve as data keys, with apples and lemons represented as red and yellow circles.

OOvxOO
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic fruit bowl displays five circles representing apples and lemons, with each fruit scaled by type and color-coded via a categorical scale. Clicking a fruit selects it and adds a black stroke. The visualization uses D3’s selection API to incrementally update the SVG, animating radius and position changes over one-second transitions as fruits are eaten or replaced, demonstrating stateful, event-driven interactions.

Ssakhabutdinov
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select #2

The visualization displays five fruit circles in a bowl; clicking one selects it, shown with a black border. Animated transitions shrink, remove, or alter fruit types (apple to lemon) over time. Built with D3 v5, it uses `scaleOrdinal` for color and radius, the `select`/`merge`/`transition` API for smooth SVG updates, and mouse click handlers to manage selected state.

Zzlastefcia
95% match
Loading thumbnail…

Bowl of Fruit - Click ti Select

Clicking a fruit in this SVG bowl selects it, highlighting the chosen item with a black outline while all others remain unhighlighted. The visualization demonstrates animated enter, update, and exit transitions using D3 v5, with circles smoothly resizing and repositioning as apples are eaten or replaced by lemons. Fruit types map to distinct colors and radii via ordinal scales, and selection is handled through click events that re-render the scene. The example uses D3 selections, transitions, and scaleOrdinal to manage the dynamic dataset.

Aanuj1450
95% match
Loading thumbnail…

Bowl of Fruit-Click to Select

This example demonstrates a dynamic fruit bowl visualization where users can click on apples or lemons to select them, highlighting the chosen fruit with a black outline. The bowl renders as a rounded rectangle with fruit circles labeled by type, using D3.js scaleOrdinal for consistent color and radius mapping. The scene animates over time as fruits are removed, replaced, or modified through setTimeout calls. Built with d3.v5, it employs SVG rendering and transition animations, with DOM manipulation handled through d3.select and d3.range methods.

Mmeihaoming
95% match