Skip to main content
100%

Froyo Machine!

✓ Published0🌍 Public
YYonet
Last edited Jul 24, 2015
Created on Jul 24, 2015

This interactive froyo machine demonstrates event-driven data visualization through a simulated conveyor belt. Users select vanilla, chocolate, or swirl flavors by clicking buttons, which triggers the creation of corresponding image elements appended to a conveyor belt graphic. The code uses native HTML DOM APIs including `document.getElementById` and `createElement` to manage button events and dynamically append images. A power button toggles the machine, though the display of flavor options remains static. The visualization relies on locally stored image assets for the machine, conveyor, and flavor scoops.

AI-generated description

Similar vizzes

Loading thumbnail…

Welcome to Flavors

The visualization displays a colorful, patterned canvas of flavor-themed imagery, rendered as a static SVG composed from a single base64-encoded PNG image. The page, built with React, uses this embedded image as a repeating pattern to fill the entire 600 by 420 viewport via SVG `<pattern>` and `<image>` elements. It does not use D3.js or interactive features, serving instead as a simple visual introduction with a custom graphic.

Ddivyakota99
60% match
Loading thumbnail…

Bowl of fruit general Click to select.js!

A dynamic fruit bowl visualization updates in real time as apples are eaten and replaced by lemons. Each fruit is rendered as an SVG circle with color and radius scales mapping fruit type to visual attributes. Users click circles to select them, which triggers a black stroke highlight. The code uses D3 v5's data join, ordinal scales, and transitions to animate circle entries, exits, and updates smoothly over one-second durations.

Ddanhuijia
60% match
Loading thumbnail…

Fork of activity6_Question2

This bar chart displays the distribution of favorite ice cream flavors among 20 respondents, with flavor categories on the x-axis and the number of respondents on the y-axis. The chart is rendered on an HTML Canvas element using the Chart.js library, which is loaded via a CDN. Data is hardcoded in the JavaScript, with each flavor’s count specified in the `datasets` array. The visualization uses distinct background and border colors for each bar, and axes are labeled with scale descriptions.

Aakitisaitejareddy@gmail.com
60% match
Loading thumbnail…

Bowl of Fruit

This example demonstrates a simple data-driven fruit bowl visualization where apples and oranges are rendered as colored circles with text labels. The code uses d3.scaleOrdinal to map fruit types to colors and sizes, with SVG circles and text elements animated through D3’s enter/update/exit pattern. A timed sequence of snack events (eating an apple or swapping one for an orange) triggers re-renders. The implementation imports specific functions like scaleOrdinal and range from d3, with the fruitBowl module handling the selection joins.

YYifu Chen
60% match
Loading thumbnail…

Bowl of Fruit-Hover to Select.js

A dynamic bowl of fruit shows apples and lemons as colored circles that animate in size and position, with a black stroke highlighting the currently hovered fruit. The visualization uses D3 v5 and SVG, with `scaleOrdinal` mapping fruit types to colors and radii. Mouseover and mouseout events trigger a selection state, while transitions animate the circles' entry, exit, and updates as fruits are eaten or replaced over time.

NNeepaB
60% match
Loading thumbnail…

Bowl of Fruit - Clicking is life

A dynamic scatterplot visualizes fruit data as colored circles representing types—apple, lemon, melon—with size encoding type and color encoding category. Users click or hover over circles to select or highlight them, which updates stroke, opacity, and triggers animated transitions via d3.transition. The example uses d3.scaleOrdinal for color mapping and d3.selection with .merge for incremental updates, rendering through SVG. Data originates from an in-memory fruit array, with interactions managed by event handlers for click and mouseover.

Ddaanasma
59% match
Loading thumbnail…

Fork of Engaging and visually appealing image of Gulab Jamun with Ice-cream

This visualization renders a stylized SVG dessert of Gulab Jamun served with vanilla ice cream in a bowl. The code uses D3.js v7 to construct geometric shapes—ellipses for the serving dish and syrup, circles for the dessert balls and melting ice cream drips, and rotated ellipses for pistachio and almond garnishes. Hardcoded data arrays define the positions and sizes of each element, with colors approximating the dish's appearance. The scene is centered using an SVG transform, illustrating a procedural approach to creating static, illustrative graphics.

11002.greeshma@gmail.com
59% match
Loading thumbnail…

Bowl of Fruit-Click to Select.js

An interactive fruit bowl displays apples and lemons as colored circles, with a single click selecting a fruit and highlighting it with a black stroke. The visualization uses d3-scale's `scaleOrdinal` to map fruit types to colors and radii, while d3-transition animates circle entry, exit, and position changes over one second. d3-selection handles data joins and click events, and the code demonstrates dynamic updates through timed mutations that remove fruits or change an apple to a lemon.

NNeepaB
59% match