Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

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

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.

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

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

bowl fruit general update

This example demonstrates a data join pattern for a fruit bowl visualization, where apples and lemons are added, removed, and updated over time via animated transitions. It shows how SVG circles with distinct colors and radii represent different fruit types, while the bowl’s contents change through a sequence of timed updates. The code uses D3 v5’s `selection.data` with a key function, `enter`, `merge`, and `exit` selections, combined with `transition().duration()` to smoothly animate position and radius changes. The animation runs automatically on page load, with updates triggered by `setTimeout` callbacks that modify the fruit array and re-render.

Ppei9223
87% 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
87% match
Loading thumbnail…

Let's make a face with D3.js!

A dynamic SVG scene of fruit circles arranges as a face-like bowl, with apples and lemons changing position, size, and color through animated transitions. Using D3 v5’s `scaleOrdinal` for color and radius mapping, the example demonstrates data joins with `enter`, `merge`, and `exit` selections, applying `transition().duration(1000)` to animate circle attributes. Clicking a circle highlights it with a black stroke via a `selectedFruit` callback. Over time, `setTimeout` removes fruits and mutates one apple into a lemon, showcasing live updates.

Ccpsshan
86% match
Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl visualization demonstrates data binding and transitions with D3.js. Rendered as SVG, it shows apples and lemons as circles with color and size scales, positioned along a bowl-shaped rectangle. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to update elements, with `transition()` animating position changes. Over time, fruits are removed and one apple changes to a lemon, illustrating dynamic updates. The implementation relies on D3 v5 modules `scaleOrdinal`, `range`, and `select`, with state managed via `setTimeout` in the main script.

Ccpsshan
86% match
Loading thumbnail…

12.a - fruit bowl - d3 update pattern - dataviz 2018

Balls representing apples and lemons enter, update, and exit a horizontal row on an SVG canvas, using the D3 v7 data join pattern. The example demonstrates the enter-merge-exit sequence with `selection.data()`, `.enter().append('circle')`, `.merge()`, and `.exit().remove()`, animating circle radius and x-position via `.transition().duration()`. Colors and radii map ordinal scales (`scaleOrdinal`) for fruit types, while JavaScript `setTimeout` calls drive state changes. SVG circles render the fruit bowl, with transitions smoothly resizing and repositioning elements.

Zzach b.
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