Bowl of fruit

100%

✓ Published0🌍 Public

Last edited Jul 19, 2020

Created on Jul 17, 2020

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - click to select

Five pieces of fruit sit in a bowl, rendered as SVG circles with varying radii and colors via d3.scaleOrdinal. Clicking a fruit selects it, highlighting the chosen item with a black stroke. D3's data join and transition system animate the fruits' positions and sizes as apples are removed, replaced by a lemon, or filtered over time.

WWhitney Hung

95% match

Loading thumbnail…

Bowl of Fruit: Click to select

Five apples and a lemon appear as colored circles in an SVG bowl, where clicking any fruit selects it with a black stroke outline. The example demonstrates animated data joins with D3 v5, using `scaleOrdinal` for color and radius mappings, `transition.attr` for smooth enter/exit animations, and event handlers on merged selections to update the selected fruit state.

AAjit Singh

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

Loading thumbnail…

Bowl of fruit. Click to Select

Five circles represent apples in a bowl, rendered as red SVG circles using d3.scaleOrdinal for color and radius. Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3 transitions to animate enter, update, and exit states, with fruits shrinking to zero radius on removal. Over three seconds, the code programmatically removes apples and changes one to a lemon, demonstrating data joins with d3.v5.

AAlex Arobelidze

94% match

Loading thumbnail…

Bowl of fruit

A bowl of fruit shows five apples in a wide rounded rectangle, with one apple changing to a lemon and fruits being removed over time. The visualization uses D3 v5 with SVG rendering, binding fruit data to groups containing circles and text labels. d3.scaleOrdinal maps fruit types to colors and radii, while enter, update, and exit selections manage dynamic changes triggered by setTimeout intervals.

SShane Carey

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

94% match

Loading thumbnail…

Bowl of Fruit Click to select

Five apples and lemons are rendered as color-coded circles in an SVG bowl, with clicks selecting a fruit by highlighting its stroke. The visualization animates fruit removal, type changes, and reordering using D3 v5’s data join and `transition().duration()` for resizing radii. Positions are set via a simple index-based scale, with ordinal scales mapping fruit types to colors and sizes.

Ggilbster

94% match