Blow of fruit - Click to select

100%

Blow of fruit - Click to select

✓ Published1🌍 Public

Last edited Feb 18, 2020

Created on Feb 18, 2020

Forked from Blow of fruit - General update pattern

This example demonstrates the "blow of fruit" interaction, where a row of apples and lemons moves and changes size with animated transitions. Clicking any fruit toggles a black selection outline, while the fruit bowl updates over time as fruits are removed or transformed. The visualization uses D3 v5’s data joins, `selection.enter`, and `transition` to handle dynamic updates, with an ordinal color scale and radius scale mapping fruit types. SVG groups and circles render each fruit, and click events trigger re-renders of the selection state.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Blow of fruit - Hover to select

A hovering mouse selects individual fruit in a D3.js animated bowl, highlighting the chosen item with a black outline. The visualization demonstrates data joining and DOM manipulation: fruit enter, update, and exit as the dataset changes over time, with apples and lemons rendered as colored circles. D3 scales map fruit types to colors and radii, while transitions animate size and fill changes. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, `selection.exit()`, and `transition().duration()` to manage the five fruit elements in an SVG.

PPotikorn

93% match

Loading thumbnail…

Blow of fruit - General update pattern

A row of apples and lemons animates through the general update pattern in this D3.js example. Buttons and timed re-renders trigger enter, update, and exit selections as fruits are added, replaced, or removed. Using the `selection.join()` method with d3.v5, the code binds fruit data to SVG groups, transitioning circle radii, colors, and text labels between states. The `colorScale` and `radiusScale` ordinal scales map fruit types to visual properties.

PPotikorn

89% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

YYF

87% 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

87% match

Loading thumbnail…

Bowl of Fruit - Click to select

This example presents a bowl of fruit where apples and lemons animate their size and color as the dataset updates. A user can click any fruit to select it, which adds a black stroke. The D3 v5 code uses `scaleOrdinal` for color and radius mappings, and applies transitions to smoothly animate entering, exiting, and resizing circles. Array mutations (removing or altering fruit) trigger re-renders, demonstrating dynamic data binding with click-driven selection.

SSimon Pettersson

87% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit shows five apples shrinking, disappearing, and one apple turning into a lemon over time, with users able to click any fruit to highlight it with a black stroke. The visualization uses D3 v5's data join with enter, update, and exit selections, while `scaleOrdinal` maps fruit types to colors and radii. Clicking triggers a re-render that updates the selected fruit's stroke, and all movements animate via `transition().duration(1000)`.

Nnkohdatavis

87% match

Loading thumbnail…

Fork of Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection with animated transitions as apples and lemons appear, change, and disappear over time. Users click any fruit to highlight it with a black stroke. The visualization uses SVG circles with a D3 v5 data join, updating enter, update, and exit states via transitions on circle radius and position, with `scaleOrdinal` mapping fruit types to colors and sizes.

Ssgzzhinde

86% match

Loading thumbnail…

Bowl of Fruit - Interaction(Hover to Select)

This example demonstrates an interactive bowl of fruit where users can hover over apples and a lemon to select them, highlighting the chosen fruit with a black outline. The visualization shows how data updates and animations work together as fruits are removed or change type over time. Each fruit is rendered as a circle using D3’s SVG API, with size and color determined by ordinal scales. The implementation leverages `scaleOrdinal` for color and radius, and uses `transition().duration(1000)` to animate the circles growing and shrinking as they enter, exit, or update.

MMinwoo Pak

86% match