Skip to main content
SimilarExport ZIP
100%

Fruit bowl

✓ Published0🌍 Public
GGlenn Henshaw
Last edited Sep 27, 2019
Created on Sep 27, 2019
Forked from graph2.js!

A fruit bowl demonstrates incremental updates to SVG circles using D3.js v5. Five apples first render as a row of red circles, then one apple is removed, and a later change turns one remaining fruit yellow. The code uses D3's `select`, `range`, and `scaleOrdinal` APIs, with explicit enter, merge, and exit selections to manage the changing dataset.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fruit bowl

Five red circles are drawn inside an SVG to represent apples, with each apple positioned at an equal horizontal interval and vertically centered. The example demonstrates how D3.js manipulates the DOM by appending circles for an initial dataset and then removing the last apple when the data array shrinks. Using D3 v5’s `select`, `range`, and data join methods like `enter()` and `exit()`, the code explicitly separates data from graphical marks, showing how updates to the underlying array trigger corresponding visual changes.

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

Bowl of fruit

A dynamic SVG bowl of fruit demonstrates the enter, update, and exit pattern in D3 v5. The visualization initially renders five red apples as circles with labels, then sequentially removes one apple, changes a second apple into a yellow lemon, and filters out another fruit over timed intervals. Using `scaleOrdinal` for color and radius mapping, the code applies `selection.merge` to update shared attributes and manages transitions with `attr` for x-position and radius. The example relies on `setTimeout` callbacks to trigger re-renders and shows how data joins handle dynamic changes.

IIgor Borzunov
92% match
Loading thumbnail…

Bowl of Fruit - General Update Patter

A bowl of fruit implements D3's general update pattern, demonstrating how to add, modify, and remove SVG circles as data changes. The visualization initially displays five red apples, then removes one apple after a second, and finally transforms another apple into a yellow lemon. Using D3 v5's `select`, `range`, `scaleOrdinal`, and chained selection methods, the code enters, merges, and exits circle elements based on shifts in a fruit array. The circles maintain their x-position by index while updating fill color and radius according to their fruit type.

Sshallowater
92% match
Loading thumbnail…

Bowl of Fruit - General Update Patter

A bowl of fruit implements D3's general update pattern, demonstrating how to add, modify, and remove SVG circles as data changes. The visualization initially displays five red apples, then removes one apple after a second, and finally transforms another apple into a yellow lemon. Using D3 v5's `select`, `range`, `scaleOrdinal`, and chained selection methods, the code enters, merges, and exits circle elements based on shifts in a fruit array. The circles maintain their x-position by index while updating fill color and radius according to their fruit type.

Sshallowater
92% match
Loading thumbnail…

Bowl of Fruit - Click to Select

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.

Xxychen0612.cs09@nycu.edu.tw
91% 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
91% match