Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
Xxychen0612.cs09@nycu.edu.tw
Last edited Sep 20, 2023
Created on Sep 20, 2023

Five apples are rendered as red circles in an SVG bowl, and a timed sequence demonstrates D3 data joins by eating, replacing, and filtering fruits. Each apple is a circle with a label, positioned via a transform attribute using index-based spacing. The code uses `d3.scaleOrdinal` for color and radius mapping, while `selection.enter` and `selection.exit` manage element updates. The fruit data is an array of objects, and the visualization updates through repeated calls to a `fruitBowl` render function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as red circles in an SVG, with each fruit labeled by type. The visualization demonstrates data joins through timed state changes: one apple disappears, another becomes a lemon, and a third is removed. The code uses D3 v5 with modular functions `fruitBowl` and scales from `scaleOrdinal` for color and radius, updating circles and text via enter/update/exit selections.

Bben-chin-43
96% match
Loading thumbnail…

Bowl of fruit

An SVG bowl of fruit shows five apples rendered as red circles, with two scheduled updates: one apple is removed after a second, and another apple turns into a lemon (yellow, smaller) after two seconds. The visualization uses d3-selection to bind and update circle elements, d3-scaleOrdinal for color and radius mappings, and d3-range to generate the initial fruit array. Data updates trigger enter, update, and exit selections, demonstrating a basic data join pattern in D3 v5.

Kkaviya-ds
95% match
Loading thumbnail…

Bowl of fruit nested

Five apples render as red circles in an SVG bowl, then an apple is removed, one turns lemon yellow, and another is deleted in timed steps. The example shows D3.js data joins with key functions, using `selection.enter` and `selection.exit` to update groups and circles. `d3.scaleOrdinal` maps fruit types to colors and radii, while a `fruitBowl` function encapsulates the nested join logic.

MMatan
95% 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
94% 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.
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl. A black outline highlights the currently selected fruit, which changes when a user clicks a circle. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius mappings and handles the click interaction through React state, `setSelectedFruit`.

Bbeca8675
94% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit is represented by two red circles, initially displayed as apples. The visualization demonstrates D3's data join pattern: circles are appended to an SVG based on an array of fruit objects, then one fruit is removed from the data after a one-second timeout, causing the corresponding circle to exit. The code uses d3.select, selection.data, selection.enter, and selection.exit to manage the dynamic update, with the fruit data defined via an ES6 module that creates apple objects.

TTrustPaul
94% 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
93% match