Skip to main content
SimilarExport ZIP
100%

Breakfast Bowl - Wish You a Perfect 100 Score

✓ Published1🌍 Public
CChooo4u
Last edited Sep 21, 2018
Created on Sep 21, 2018

Five slices of bacon sit in a bowl, then animate over five seconds as some are eaten and others transform into eggs and an avocado, spelling out the letters B-A-E. The example uses d3 selections with enter, merge, and exit to update SVG ellipses and text, while d3.scaleOrdinal maps food types to colors and radii.

AI-generated description

You waked up later than usual, since you studied a long time for the exam today.

When you came in to the dining room, you found a dish full of bacon.

"Hey mom, did you just buy too much bacon yesterday?"

And your mom smiled to you:"Surprise! Wish you have a 100% score today!"

"Bacon, avocado, egg -- Bae!"

MIT Licensed

Similar vizzes

Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

Five slices of bacon sit in a bowl, then animate over five seconds as some are eaten and others transform into eggs and an avocado, spelling out the letters B-A-E. The example uses d3 selections with enter, merge, and exit to update SVG ellipses and text, while d3.scaleOrdinal maps food types to colors and radii.

CChooo4u
100% match
Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

Breakfast Bowl animates a sequence of five items inside a rounded SVG bowl, beginning with five pieces of bacon and progressively swapping, removing, and replacing them with eggs and avocado. Each item is rendered as a colored ellipse with a text label, using `d3.scaleOrdinal` for color and radius mappings. The `d3` selection, `.enter()`, `.merge()`, and `.exit()` patterns manage the dynamic updates over timed transitions via `setTimeout` in JavaScript. SVG `<rect>` and `<ellipse>` elements form the bowl and fruit shapes.

CChooo4u
95% match
Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

A breakfast bowl animates through a timed sequence of D3 transitions, using elliptical shapes to represent bacon, eggs, and avocado as items are eaten or swapped by a mother preparing a 100-score exam-day meal. The visualization uses `d3.scaleOrdinal` for color and radius mapping, with `selection.enter`, `merge`, and `exit` to update SVG groups. Rendered as SVG with `d3.select`, the narrative unfolds via `setTimeout` calls that modify the data array and re-render the bowl.

CChooo4u
92% match
Loading thumbnail…

Breakfast Bowl - Wish You a Perfect 100 Score

A breakfast bowl visualization uses D3 v5 to animate fruit images in an SVG. Apples, lemons, and avocados, rendered as colored ellipses, enter from the left, shift positions, and disappear over time, with text labels below. The code uses `selection.merge` for incremental updates, and sets ellipse radii and colors via `scaleOrdinal`. The animation simulates eating and replacing fruit, with a rounded rectangle as the bowl.

CChooo4u
89% 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
70% match
Loading thumbnail…

Bowl of Fruit - hover to select

Five pieces of fruit sit in a row, each drawn as an SVG circle; hovering over one selects it with a black outline. The bowl updates over time, as apples are removed and one apple changes into a lemon via d3 transitions. The code uses d3.scaleOrdinal for color and radius, data joins with enter/merge/exit, and mouseover/mouseout events to trigger selection.

Aaidanoconnor1
70% match
Loading thumbnail…

Bowl of Fruit

Five circles represent apples in a bowl, rendered as red SVG circles that scale up on entry and shrink on exit. Over time, the code removes an apple, changes one apple into a yellow lemon by re-binding data and updating fill color, then filters out another apple. The example uses d3.v5 with scaleOrdinal for color and radius mapping, and transition().duration() to animate enter, update, and exit selections.

ZZY Huang
70% match
Loading thumbnail…

Bowl of fruit - Nested Elements

A bowl of fruit demonstrates nested SVG elements with a dynamic data join, showing apples and lemons arranged in a row. The visualization uses a D3 ordinal scale to map fruit types to colors and radii, while enter, update, and exit selections manage the transitions as fruits are eaten or replaced over time. Circles and text labels are appended within each group element, and the bowl is drawn as a rounded rectangle behind the fruit.

Hhugomell
69% match