Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - click to select

✓ Published0🌍 Public
Nntds12
Last edited Mar 24, 2020
Created on Mar 24, 2020

Five circles represent a bowl of fruit as apples and lemons. Hovering over a circle selects it with a black outline; moving the mouse away deselects it. The chart uses an SVG renderer and D3 v5 with a data join, ordinal scales for color and radius, and 1000ms transitions. The index.js script modifies the fruit array over time by removing apples and changing one apple into a lemon.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

IIsabel
96% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

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

Bowl of Fruit -Hover to select

Five fruit circles represent apples and lemons in a simple SVG bowl. Hovering over a circle selects it with a black outline. The visualization uses D3’s ordinal color and radius scales to map fruit type to red or yellow fill and size. The `fruitBowl` function animates circle enter, update, and exit transitions over 1000 milliseconds. A script demonstrates dynamic updates by removing apples, replacing one with a lemon, and filtering data.

Pprincit
95% match
Loading thumbnail…

Bowl of Fruit - Hover To Select

Five circles represent apples and a lemon in a bowl, with hovering over any fruit highlighting it with a black stroke. The code uses D3 v5 with an ordinal color scale and radius scale, binding data to SVG circles. Enter, update, and exit selections are animated via transitions over one second, while mouseover and mouseout events trigger a selection callback that re-renders the visualization.

NNita
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing fruit sit in a row, transitioning between apple and lemon types over time. Hovering over a fruit selects it, drawing a black stroke around that circle. The code uses d3.js with the fruitBowl module, handling data joins and transitions. SVG circles animate their radius and position using d3 transitions, while a scaleOrdinal maps fruit types to colors and sizes.

CCurran Kelleher
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples transition into view in an SVG bowl, with each fruit selectable by mouseover and mouseout events that toggle a black stroke. The code uses d3 data joins and ordinal scales to map fruit types to colors and radii, while transition methods animate circle entry and exit. Over time, fruits are removed or replaced with lemons via JavaScript timers, demonstrating animated updates to the bound dataset.

Ffeizhi123
94% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five fruit circles sit in a row and animate with color and size changes when apples are eaten or replaced by lemons. Clicking a fruit selects it with a black outline, re-rendering the chart. Using d3 v6 with SVG and transitions, the code employs scaleOrdinal for color and radius mapping, data joins with enter/merge/exit, and transition.attr for animated updates.

SShuyu Zheng
94% match