Skip to main content
SimilarExport ZIP
100%

Bowl of fruits

✓ Published1🌍 Public
Nnikeshkv
Last edited Jan 2, 2021
Created on Jan 2, 2021

A bowl of five apples animates through a sequence of changes: one apple is eaten, a second is replaced by a lemon, another is eaten, and a final apple rots. The visualization uses D3 v5 with an ordinal color scale mapping fruit types to red, yellow, and brown, and an ordinal radius scale for size. Each fruit is an SVG circle, and transitions are animated over one second using D3's transition API. The data is generated randomly in JavaScript and rendered within an SVG canvas.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit

A bowl of fruit depicts five apples as circles, which are eaten, replaced by a lemon, and otherwise removed over time, with each change animated via a one-second transition. The visualization uses D3 v6 with data joins and merge to update SVG circle elements, while ordinal scales map fruit types to colors and radii. The React framework wraps this D3 code, with SVG rendering driven by timed state changes.

CChinzorigt Ganbat
94% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows five apples rendered as red circles, which are eaten and replaced by a lemon over time through animated transitions. The visualization uses D3 v5’s general update pattern with `selectAll`, `data`, `enter`, `merge`, and `exit` to manage SVG circle elements, applying ordinal scales for color and radius based on fruit type. The animation sequence, driven by `setTimeout`, demonstrates adding, removing, and updating data while smoothly interpolating circle radius and position via `transition`.

Rrebeccayc
94% match
Loading thumbnail…

Bowl of Fruit

A bowl of five apples appears as red circles; the animation then shows one apple being removed, a second apple changing into a lemon, and a third apple disappearing, with each fruit’s size and color encoded by its type. The visualization uses d3 scales (`scaleOrdinal`) to map fruit type to color and radius, and d3 transitions to animate circle position and radius over one-second durations. The SVG is rendered in `index.html`, with data mutations triggered by timed `setTimeout` calls in `index.js`.

Zzhangfa
94% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows five apples animated with D3 transitions, responding to mouseover by highlighting the selected fruit with a black outline. Over time, apples are consumed and one transforms into a lemon, changing both color and radius via d3.ordinal scales. The visualization uses d3 v5 with SVG rendering, binding data by unique ID to handle enter, update, and exit selections smoothly. Temperature timestamps from a CSV file drive the timing of these fruit transformations.

HHirsh Gupta
94% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit starts with five apples, then changes over time as apples are eaten and one apple is replaced by a lemon. The visualization shows how D3.js handles dynamic data updates by animating circle positions, radii, and colors. The code uses `d3.select`, `d3.range`, and custom scale functions like `d3.scaleOrdinal` to map fruit types to colors and sizes. The D3 `transition` API animates the removal, addition, and modification of circles as the dataset shifts through timed `setTimeout` events.

Wwieswies
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
93% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated transitions in D3. The visualization shows five apples rendered as red circles, with one apple turning into a lemon over time and two apples disappearing. The code uses D3 v5's data join, `scaleOrdinal` for color and radius mapping, and `selection.transition` to animate circle radius changes. SVG circles are bound to fruit objects with unique IDs, and exit transitions shrink shapes to zero before removal.

Aaurelio-89
93% match
Loading thumbnail…

Bowl of Fruits

A bowl of five apples animates through a sequence of data changes, demonstrating D3’s data join and enter/update/exit pattern. Each circle represents a fruit, with its type determining fill color and radius via ordinal scales. Over time, an apple is removed, a middle apple transforms into a lemon, and another apple is filtered out. The code uses `selection.data`, `merge`, and `transition` to smoothly animate circle radii and positions, while SVG circles are appended, updated, and removed accordingly.

YYasara Peiris
93% match