Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
KKateryna
Last edited Sep 24, 2020
Created on Sep 21, 2020

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`.

AI-generated description
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
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

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.

OOsekovS
91% match
Loading thumbnail…

Bowl of fruit

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

AAbishek-Dulal
88% match
Loading thumbnail…

Click to Select

Five fruit shapes appear in a row, rendered as SVG circles with labels. Hovering over a circle turns it steel blue, while apples are red and lemons yellow. The visualization demonstrates data joins through animated transitions, removing apples, replacing one with a lemon, and filtering elements at timed intervals. It uses d3-selection, d3-scaleOrdinal, and transition methods to update position, radius, and fill based on a selectedFruit state.

Ggoodej
87% match
Loading thumbnail…

Hey there, fruity!

Five apples appear as red circles in an SVG bowl, then shift through a sequence of updates: one disappears, another turns yellow and shrinks into a lemon, and a third is removed. The D3 data join uses `selection.enter`, `merge`, and `exit` with inline transitions, while `scaleOrdinal` maps fruit types to colors and radii.

OOhayouKaminari
87% match
Loading thumbnail…

bowl of fruit

A bowl of fruit displays five red apples as circles in an SVG, then demonstrates D3.js data joins by removing one apple after a second and turning another into a yellow lemon after two seconds. Using d3.select, d3.range, and scaleOrdinal, the code binds an array of fruit objects to circle elements, handling enter, update, and exit selections with merge and remove methods. The color and radius scales map fruit types to visual properties, showing how D3 manages dynamic DOM updates.

SSuzie1022susu
87% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples render as red circles in an SVG bowl, with yellow lemon circles appearing when an apple’s type changes. Hovering toggles a black stroke on the selected fruit, while timed updates remove and replace circles. The code uses `d3.scaleOrdinal` for colors, radii, and stroke states, with `selection.merge` and `transition.attr` animating enter, update, and exit circles. Data is generated randomly via `Math.random`, and interactions trigger `onClick` callbacks.

Aarths-glitch
86% match
Loading thumbnail…

A bowl of fruit

A bowl of fruit demonstrates animated updates to an SVG circle chart using D3.js v5. Five circles representing apples enter with a scaling radius transition, then shrink and vanish as fruit is consumed, swap from apple to lemon with a color change, and filter out one item. The example uses D3’s `scaleOrdinal` for color and radius mappings, `selection.enter()`, `.merge()`, and `.exit()` with `transition().duration(1000)` to animate circle properties. The data source is a random set of fruit objects generated in the script, rendered as SVG circles with a fixed vertical position and horizontal spacing.

MMatthiasVanCampen
86% match