Fork of Rendering dynamic data - pt2

100%

Fork of Rendering dynamic data - pt2

✓ Published2🌍 Public

Last edited Mar 8, 2021

Created on Mar 8, 2021

This example shows a fruit bowl visualization with apples and lemons that updates dynamically over time, demonstrating how D3 handles data joins. The code uses d3.scaleOrdinal to map fruit types to colors and radii, and d3.range with setTimeout to simulate buying and eating fruit. As data changes, SVG circles and text elements are added, removed, or updated in place using selection joins. The example was built with D3 v5 and renders to an inline SVG element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of bowl of fruit

This example demonstrates D3.js data joins by rendering a bowl of fruit as SVG circles that update over time. A row of five apples initially appears, then one apple is removed, and another is replaced with a lemon, triggering enter, update, and exit selections. The `render` function uses `selection.selectAll('circle')`, `.data()`, `.merge()`, and `.exit().remove()` to handle dynamic changes, with `scaleOrdinal` mapping fruit types to colors and radii.

Jjlspangl

90% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

CClara Hu

90% match

Loading thumbnail…

Fork of Bowl of Fruit - D3 Update (With Labels)

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and replaced with lemons over time, with labels showing each fruit’s type. Using D3 v7’s data joins and `transition()`, circles and text elements update smoothly, while `scaleOrdinal` maps fruit types to colors and sizes. The SVG rendering animates changes triggered by `setTimeout`, showing enter, update, and exit selections as the dataset mutates.

Hhenryspradlin

90% match

Loading thumbnail…

Fork of Bowl of Fruit

A fork of the Bowl of Fruit example demonstrates dynamic data updates with D3’s enter, update, and exit selections. It shows a row of fruit shapes in a rounded bowl, where apples are red circles and lemons are yellow circles of different sizes, with each fruit labeled by type. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and updates the SVG via `fruitBowl` over timed intervals that remove fruits, change an apple to a lemon, and filter out another apple. The rendering relies on SVG groups containing `circle` and `text` elements, with transitions triggered by JavaScript `setTimeout` calls.

AAndrewRiceMGW

89% match

Loading thumbnail…

Fork of Bowl of fruit - General Update Pattern with D3.js!

This example demonstrates the D3.js General Update Pattern by animating a bowl of fruit, where apples and lemons are added, removed, or replaced over time. It shows how data joins and enter/update/exit selections handle dynamic changes to a simple SVG scene. The code uses d3.scaleOrdinal for color and radius mappings, d3.select for DOM manipulation, and d3.range to generate initial data. Rendered as SVG rectangles, circles, and text, it illustrates reusable component patterns with a modular fruitBowl function.

CCarloWK1202

89% 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

88% match

Loading thumbnail…

Fork of Bowl Of Fruits-Nested

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and transformed into lemons through a sequence of timed updates, showing how D3.js handles incremental data changes. The code uses `d3.select` and `selection.merge` to manage SVG groups and shapes, with `transition().duration()` animating circle radii when fruits change. A custom `fruitBowl` function applies ordinal color and radius scales, mapping fruit types to visual properties, while the removal and addition of data elements triggers enter, update, and exit states. The underlying data is a hardcoded array of fruit objects modified by setTimeout callbacks.

MMahaveer Jain

88% match

Loading thumbnail…

Fork of bowl of fruit

A basket of fruit demonstrates animated data joins in D3 version 5. The visualization shows a row of apples and lemons, with circles and text labels representing each fruit. Using the `fruitBowl` module with `d3.scaleOrdinal` for color and radius, the code handles enter, update, and exit selections via `selection.merge` and `selection.exit`. Timed updates over three seconds remove apples, change one apple to a lemon, and filter another apple, illustrating dynamic SVG transitions with keyed data.

Jjlspangl

88% match