Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published2🌍 Public

Last edited Sep 17, 2018

Created on Sep 17, 2018

Forked from Bowl of Fruit - Click To Select

Five fruit circles enter as apples, with two later replaced by a lemon or removed entirely, demonstrating D3's data join. Clicking any fruit toggles a dark blue selection stroke, triggering a re-render via the `fruitBowl` module. The code uses `d3.scaleOrdinal` for color and radius, `selection.merge`, and `transition` for animated position and size changes over one second. SVG rendering with `d3.select` and `setTimeout` drives the scripted state updates.

AI-generated description

MIT Licensed

Similar vizzes

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.

96% match

Loading thumbnail…

Bowl of fruit - Click to select

Five fruit circles render as apples and lemons in a bowl, with a click selecting a fruit and highlighting it with a black outline. The D3.js code uses a data join with enter, update, and exit selections, animating radius changes via `transition().duration(1000)`. Ordinal scales map fruit types to colors and sizes, while a random ID identifies each element for stable updates across timed data mutations.

JJoachim Klug

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select II

Five fruit circles render as a bowl of apples and lemons, with each fruit colored and sized by `d3.scaleOrdinal` and positioned via a custom `xPos` function. Clicking a fruit highlights its stroke and calls `onClick` to update the selection state. The example uses D3 v6’s data join with `enter`, `merge`, and `exit` selections, animating radius and position through `.transition().duration(1000)`, while `setTimeout` dynamically removes fruits and swaps an apple for a lemon over three seconds. SVG rendering and event listeners are used throughout.

Eegrebing

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

Five fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Ggregosaure

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row and animate into a fruit bowl using D3 v5 selections. Mousing over each fruit toggles its selected state, which adds a black stroke around the circle. The example uses `d3.scaleOrdinal` for color, radius, and stroke mapping, and `selection.enter`, `merge`, `exit` with transitions. A `setTimeout` sequence then removes one fruit, changes another to a lemon, and filters out a third, demonstrating dynamic data updates with animated circle radii and positions.

Aarths-glitch

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles enter as apples with a radius of zero, then grow into place while a black stroke marks clicked selections. Using d3 v5’s data join with object constancy, the fruitBowl module renders SVG circles and animates enter, update, and exit transitions via `transition().duration(1000)`. A sequential script eats apples and replaces one with a lemon, demonstrating ordinal color and radius scales. Clicking toggles a fruit’s selection state, re-rendering with updated strokes.

NNikkor

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select.js

Five fruit circles sit in a beige bowl shape rendered as an SVG rectangle with rounded corners. Clicking any piece of fruit selects it, highlighting that fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for fruit color and radius, `selection.data` with a key function for enter/update/exit transitions, and `transition.duration` to animate fruit removal or type changes from apple to lemon after timed delays.

Dddperdue

95% match