Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
OOsekovS
Last edited Aug 18, 2020
Created on Aug 15, 2020

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as SVG shapes and animated using D3 v5 transitions. The fruitBowl function renders a gray bowl as a rectangle, with each fruit positioned horizontally and colored via a d3.scaleOrdinal color scale with red for apples and yellow for lemons. User interaction includes mouseover and mouseout events that highlight the selected fruit with a green stroke. The animation sequence uses d3.transition to smoothly move, resize, and remove fruits over time, showcasing the merge, enter, and exit lifecycle methods for SVG groups.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

A dynamic fruit bowl visualization demonstrates SVG shape updates and color transitions using D3's data join pattern. Apples and lemons appear as circles with distinct fill colors and radius values, driven by ordinal scales for both color and size. The code uses `selection.enter`, `.merge`, and `.exit` methods with `transition().duration()` to animate circles entering, updating, and leaving as fruits are added, removed, or changed. JavaScript `setTimeout` calls trigger sequential data mutations, showing how D3 v5 handles animated updates to SVG elements.

OOsekovS
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

Five fruits appear as red circles labeled “apple” in an SVG bowl. Over time, the array shrinks, one apple changes to a yellow lemon, and another apple is removed, with each change animated using D3 transitions. The code imports `scaleOrdinal` and `range` from D3 v6, and uses `selection.data`, `.enter`, `.merge`, and `.exit` to update circles and text labels. Styling is handled by CSS, with D3 controlling SVG attributes like `cx`, `r`, and `fill`.

KKateryna
91% match
Loading thumbnail…

Bowl of Fruit

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as circles with color and size mapped to fruit type. The scene animates through a sequence of state changes—removing fruits, replacing one type with another, and filtering—using D3.js v5 selections and merge operations. The SVG output is generated declaratively, with the `scaleOrdinal` function mapping fruit types to visual properties like fill color and radius. The bowl itself is a static rectangle with rounded corners, while the fruits are positioned and updated imperatively via a custom `fruitBowl` function that handles entering, exiting, and updating elements.

Ssakhabutdinov
88% match
Loading thumbnail…

Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions of fruit-shaped circles entering, updating, and exiting an SVG bowl. It shows how circles representing apples and lemons move horizontally and resize smoothly over one-second durations. The visualization uses d3.js v5 with a modular approach, importing `scaleOrdinal` for color and radius mapping, and `select` and `range` for data binding. The `fruitBowl` function manages enter, merge, and exit selections, applying `transition().duration(1000)` to animate both `cx` and `r` attributes. Data consists of five apples initially, with dynamic updates possible through the provided functions.

NNameeeee
88% match
Loading thumbnail…

Fork of bowl of fruit

This example demonstrates animated transitions of fruit shapes in an SVG bowl using D3 v5. Circles representing apples and lemons enter, update, and exit with sequential timing, showing how data joins and key functions track object identity. The code uses `d3.scaleOrdinal` for color and radius mappings, `d3.selectAll` and `selection.merge` for enter-update handling, and `transition.duration` to animate circle positions and radii over one second. Fruits are stored as an array with random IDs, and `setTimeout` triggers state changes like removing or replacing items.

Jjlspangl
88% match
Loading thumbnail…

animated transitions try

The example demonstrates animated transitions of fruit shapes in an SVG bowl, showing apples and lemons that appear, disappear, and change type over time. Using D3.js v5 with the `select`, `range`, and `scaleOrdinal` APIs, it employs data joins with enter, update, and exit selections. The `fruitBowl` module handles rendering, applying `transition().duration(1000)` to smoothly animate circle radii and colors as fruits are eaten or replaced.

Jjblaskovich
88% match
Loading thumbnail…

fruit bowl

This example demonstrates animated transitions of fruit in a bowl, showing apples and lemons as circles that move, resize, and disappear over time. The visualization uses D3.js scaleOrdinal functions for color and radius mapping, with a custom fruitBowl function handling the SVG circle elements via selection, enter, merge, and exit transitions. The code animates changes over a 6-second sequence, including removing an apple, changing an apple to a lemon, and filtering the fruit array.

YYashodhaMagadi
87% 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
87% match