Skip to main content
SimilarExport ZIP
100%

Meyve Sepeti

✓ Published1🌍 Public
Aases1996
Last edited Jun 2, 2020
Created on May 28, 2020

This example shows a fruit bowl visualization where apples and lemons are rendered as colored circles inside a gray bowl. The scene updates over time, removing fruits and changing an apple into a lemon. The code uses `scaleOrdinal` for color and radius mapping, `selectAll` with data joins to manage entering and exiting elements, and SVG `<circle>` and `<text>` elements. Transitions are handled through `setTimeout` calls that modify the fruits array and trigger a re-render with the `fruitBowl` function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Meyve Sepeti Üzerine Getirme

Five circles representing apples and lemons are rendered in an SVG bowl, with hovering highlighting the selected fruit via a black stroke. The visualization uses D3 v5’s `scaleOrdinal` for color and radius, and `.data()` with key functions to bind fruit objects. Transitions animate circle radius and position over 1000ms, while `mouseover` and `mouseout` events update the selection state. Over time, `setTimeout` triggers data changes: a fruit is removed, one apple becomes a lemon, and another is filtered out.

Aases1996
90% 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
89% match
Loading thumbnail…

Meyve Sepeti Click

Five apples and a lemon are arranged in a row as colored circles that animate when clicked, with the selected fruit outlined in black. The visualization uses D3 v5 with a custom `fruitBowl` component, employing `scaleOrdinal` for color and radius mapping, and `.transition()` for smooth size and position updates. Data mutates over time—fruit removal and type changes—while the SVG renders the results.

Aases1996
89% match
Loading thumbnail…

Bowl of fruits

This example shows a dynamic bowl of fruits rendered as circles in an SVG canvas, where apples and lemons appear and disappear over time. Initially five fruits are drawn using a D3 data join with `scaleOrdinal` for both color and radius, mapping fruit types to red or yellow. After one second, a fruit is removed and another changes from an unknown type to a lemon, triggering D3’s enter/exit updates to reflect the state changes. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs with explicit `setTimeout` calls to drive the transitions.

AAsperge-Atomique
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

This example shows a bowl of fruit as animated circles representing apples and lemons over time. Using D3’s scaleOrdinal for color and radius, the visualization updates as fruits are removed, changed, or added, with transitions animating the circle sizes. The scene is rendered in SVG via React, with circle positions calculated by index and vertical centering. D3’s selection and transition APIs handle the lifecycle of entering, merging, and exiting elements.

Ssheafallick
87% match
Loading thumbnail…

Fork of Bowl of Fruit - Samir

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and replaced over time. The view updates through a sequence of timed state changes, with each fruit rendered as an SVG circle and labeled text. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and the `fruitBowl` function manages enter, update, and exit selections. Data is a simple array of fruit objects, manipulated through `setTimeout` calls to trigger re-renders.

Ooptimizeresume
87% match
Loading thumbnail…

fruit bowl

This example demonstrates a dynamic fruit bowl where apples and lemons are represented as animated SVG circles, with each fruit’s type determining its color (red for apples, green for lemons) and radius (larger for apples). Using the `selection` API from D3, the visualization animates changes to the `fruits` array over time, such as removing an apple or replacing one with a lemon, through smooth transitions on the `cx` and `r` attributes. The code leverages `scaleOrdinal` from D3 v3 to map fruit types to visual properties.

YYashodhaMagadi
87% match