Skip to main content
SimilarExport ZIP
100%

Bowl of fruit

✓ Published0🌍 Public
PPaolaAntonicoli
Last edited Feb 22, 2022
Created on Feb 22, 2022
Forked from Fork of Hello HTML

This example shows a simple still life of a bowl of fruit, drawn as two black dots on a large yellow circle with a black outline. The visualization uses basic Scalable Vector Graphics (SVG) shapes defined directly in an HTML page, with circle elements specifying center coordinates, radii, and fill and stroke styles. The rendering relies on inline SVG markup rather than any external JavaScript library, and the page is styled with a minimal CSS reset to remove default margins and hide overflow. No interactive or animated behavior is present in the code.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fruit bawl

This visualization displays a static bowl of fruit rendered entirely through inline SVG shapes, with all styling defined in an external stylesheet. The SVG canvas is 960 by 500 pixels and contains no dynamic elements or data-driven features. The rendering relies on raw SVG elements such as `<svg>`, `<g>`, and `<path>` with CSS classes for stroke and fill properties, including `stroke-linejoin` and `stroke-linecap`. The example demonstrates basic SVG structure without any JavaScript libraries, showing a hand-coded illustration rather than a data mapping.

Jjulieducasse
86% match
Loading thumbnail…

Bowl of Fruit

This example shows a static bowl of fruit as five red circles arranged horizontally across an SVG canvas. It demonstrates fundamental DOM manipulation with D3.js by binding an array of fruit objects to circle elements, appending them on enter, and removing them on exit when the array shrinks. The code uses D3 v5’s `select`, `range`, `data`, `enter`, `exit`, and `remove` methods to update the visualization, with the final pop operation removing the last apple from the display.

KKarkG
83% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows a row of apples and lemons rendered as colored circles on a rounded rectangle, with each fruit labeled by type. The visualization updates over time as apples are removed or replaced with lemons, demonstrating data joins. Built with D3 v5, it uses `scaleOrdinal` for color and radius mappings, `selectAll` with enter/merge/exit patterns, and SVG groups with `translate` transforms. The rendering is SVG, with the bowl drawn as a `<rect>` and fruit as `<circle>` elements.

Zzhangfa
83% 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
83% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit is a D3.js example demonstrating fundamental DOM manipulation, showing a sequence of animated changes to a set of circles representing fruits. The visualization uses d3.select and d3.range to manage the SVG elements, with d3.scaleOrdinal mapping fruit types to colors and radii. A series of setTimeout calls triggers transitions: a circle is removed, one changes from an apple to a lemon, and another is filtered out, all animated over one-second durations using the selection.merge() and selection.exit() methods.

MMatan
83% match
Loading thumbnail…

Bowl of fruit

Five red apples are arranged in a horizontal line across the middle of an SVG canvas. The example demonstrates basic data joins with D3 v5, using `select`, `range`, and `selectAll` to bind an array of fruit objects to circle elements. Each circle gets its x position calculated from its index, with a fixed radius and fill color, rendering a simple static bowl of fruit without interaction.

EE.D.M.
83% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit uses D3 v5 to render a row of apples and lemons inside a rounded rectangle, updating as fruits are added, removed, or replaced over time. The visualization relies on ordinal color and size scales to map fruit types to red and yellow circles of varying radii, while SVG groups and circles are joined to data using selection.enter and merge patterns. Shape transitions are driven by timed intervals that pop, filter, and mutate the fruit array.

PPedro Ernesto Tramontina
83% match
Loading thumbnail…

Bowl of fruit

This example demonstrates the dynamic addition and removal of fruit shapes in an SVG bowl, where each fruit is represented as a colored circle with a label. The visualization uses D3 v5’s data join pattern to bind fruit data to SVG circle and text elements, with smooth transitions animating the circles’ positions and radii over one second when data updates. React serves as the integration framework, while D3’s ordinal scales map fruit types to colors and sizes, and exit selections shrink departing circles to zero radius before removal.

Aandy-yc-lin
82% match