Skip to main content
SimilarExport ZIP
100%

Apples and Lemon with D3.js!

✓ Published1🌍 Public
LLidiamir
Last edited Mar 16, 2021
Created on Mar 16, 2021

A live D3.js visualization renders a bowl of fruit as five apples, which are then dynamically eaten or swapped for lemons over three seconds. The SVG scene uses `d3.scaleOrdinal` to map fruit types to specific radii and colors, with a red apple and yellow lemon. The `fruitBowl` function manages enter, update, and exit selections to add and remove circles and text labels for each piece of fruit, driven by a timer that mutates the data array and re-renders.

AI-generated description

Half way towards a smiley face. Smiley mark down (MD).

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

The visualization demonstrates a fruit bowl that animates over time as apples are eaten and one apple transforms into a lemon, using D3.js v5 with an SVG rendering approach. The code leverages D3's scaleOrdinal for both color and radius mappings, and uses a declarative merge-based selection pattern to update SVG elements efficiently. A bowl shape is drawn with a `rect` element, while fruit are represented as circles with text labels, and timed `setTimeout` calls trigger state changes to the data array.

RRoger Yu-Hsiang Lo
91% 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
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a fruit bowl visualization where apples and lemons are rendered as colored circles, with a face-like arrangement created through D3.js data joins. The code uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` to map fruit types to red and yellow colors and different radii. It demonstrates enter, update, and exit selections, first removing an apple, then replacing one with a lemon via `setTimeout`. The SVG output is generated from a simple `fruitBowl` function that binds fruit data to circles.

DDifan Gu
90% match
Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in and out of an SVG bowl as apples are eaten and one apple transforms into a lemon. The example demonstrates D3.js v6 data joins with enter, update, and exit selections, using `scaleOrdinal` for color and radius, and `transition().duration(1000)` to smoothly resize and remove circles. `setTimeout` triggers sequential state changes, showing how reusable chart functions like `fruitBowl` respond to changing data arrays.

LLidiamir
89% match
Loading thumbnail…

bowl of fruit 2

A dynamic fruit bowl demonstrates animated state changes as apples are eaten and swapped for lemons over timed intervals. Rendered as SVG, the visualization uses d3.scaleOrdinal to map fruit types to colors (red/yellow) and radii (50/40), with circles and labels positioned via translated groups. The d3 data-join pattern handles enter, update, and exit selections seamlessly, while setTimeout triggers sequential modifications to the fruit array, animating the bowl’s composition between apple and lemon variants.

Wwyh1029
89% match
Loading thumbnail…

Bowl of Fruit - Interactive

This interactive example uses D3 v5 to visualize a bowl of fruit as colored circles on an SVG canvas. Apples appear as red circles and lemons as yellow ones, with their radii scaled by fruit type via `scaleOrdinal`. The visualization dynamically updates over time: the fruit count decreases, one apple transforms into a lemon, and an apple is removed from the sequence. Clicking on fruit triggers an `onClick` handler that selects a fruit, though the code does not visibly alter the rendering based on that selection.

Ggmille22
89% match
Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates fundamental DOM manipulation with D3.js by drawing apples and lemons as colored circles and updating them over time. The visualization uses an ordinal color scale and radius scale to map fruit types to visual properties, while a data join binds the fruit array to SVG circles. The code employs `selection.data()`, `enter()`, and `exit()` to add, update, and remove elements, and uses `setTimeout` to trigger transitions like eating an apple or swapping a fruit for a lemon.

DDaniel Piqué
89% match
Loading thumbnail…

Bowl of fruit general Click to select.js!

A dynamic fruit bowl visualization updates in real time as apples are eaten and replaced by lemons. Each fruit is rendered as an SVG circle with color and radius scales mapping fruit type to visual attributes. Users click circles to select them, which triggers a black stroke highlight. The code uses D3 v5's data join, ordinal scales, and transitions to animate circle entries, exits, and updates smoothly over one-second durations.

Ddanhuijia
89% match