Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit Click to Select 2

✓ Published0🌍 Public
JJake
Last edited Jul 5, 2020
Created on Jul 5, 2020

Five fruit circles in an SVG bowl transition between apple and lemon states, with hover highlighting that selects a fruit by turning its stroke black. The visualization uses D3 v5's `scaleOrdinal` for color and radius mapping, while `selection.enter` and `exit` manage animated transitions as fruits are removed or changed. The React framework orchestrates state updates through an `onClick` handler, triggering re-renders that shift positions along an x-axis and apply 1000-millisecond duration transitions to circle attributes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, rendered as SVG elements in React with D3 v5. Clicking a fruit highlights it with a gray outline while its color and radius animate through `transition().duration(1000)`, mapping apple and lemon types via `scaleOrdinal` color and radius scales. The data join uses a key function for object constancy, and exit transitions shrink circles to radius 0 before removal as fruits are eaten or replaced over time.

Vvic126
96% match
Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

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

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo
95% match
Loading thumbnail…

Bowl of Fruit Hover to Select

Five circles representing apples and lemons are rendered in an SVG bowl. Hovering over a fruit highlights it with a black stroke and logs its selection. The visualization uses React and D3 v5 to animate circle positions, radii, and colors via `transition().duration(1000)`, with data mutations (apple removal, lemon replacement) triggered by timeouts, demonstrating enter, update, and exit transitions.

Ddacoylo
95% match
Loading thumbnail…

Bowl of fruit Hover to Select

Five fruit circles render in an SVG as apples and lemons; hovering one highlights it with a black stroke while the previous selection clears. The React and D3 v5 code uses a `scaleOrdinal` for color and radius, and enters, updates, and exits circles with a 1000-millisecond `transition`. The example demonstrates data joins by removing, changing, and filtering fruit items while animating circle size and position.

Jjeelong
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.
95% match
Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles are rendered in an SVG, initially all apples, with a black stroke appearing on whichever fruit the mouse hovers over. The code uses a React-style render function with d3 selections and the `scaleOrdinal` color and radius scales to map fruit types to visuals. Updates occur via timed transitions: an apple is removed, a lemon replaces one apple, and another apple is filtered out. The `fruitBowl` function handles enter, update, and exit selections with `.transition().duration(1000)` for animated changes, while mouseover triggers `setSelected` to update the selection state.

BB Sundaresan
95% match