Apple project

100%

✓ Published0🌍 Public

Last edited Nov 6, 2019

Created on Nov 4, 2019

Forked from Let's make a face with D3.js!

This example demonstrates dynamic updates to a D3.js visualization using data joins. A row of five red apples is initially rendered as SVG circles, then the data array is modified over time: one fruit is removed, one apple changes to a lemon (gray and smaller), and another apple is deleted. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` to handle these changes, with `scaleOrdinal` mapping fruit types to colors and radii. The visualization is rendered as SVG and driven by `setTimeout` callbacks.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example demonstrates DOM manipulation by rendering a row of five apples as red circles in an SVG, then animating their removal and a color change over time. Using `d3.select`, `d3.range`, and `d3.scaleOrdinal`, the code maps fruit types to fill colors and radii. A `render` function binds data to circles via `selection.selectAll` and `data`, handling enter, update, and exit selections. A `setTimeout` removes an apple after one second, and another changes one to a lemon after 2.5 seconds, showcasing dynamic updates with D3 v5.

Ss-janibekova

87% match

Loading thumbnail…

Fork of Rendering dynamic data - pt2

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.

Ppplomith

86% match

Loading thumbnail…

General Update Pattern

This example demonstrates D3.js’s general update pattern for binding data to SVG circles, rendering a row of apples that changes over time. It shows how entering, updating, and exiting elements are handled by merging selections and calling `selection.exit().remove()`. The code uses `d3.scaleOrdinal` for color and radius mappings, and `d3.range` to generate initial fruit data. After one second, an apple is removed; after two, one apple changes to a lemon. The visualization relies on SVG circles and explicit `attr` updates without transitions.

Vvkanotra

86% match

Loading thumbnail…

Let's make a face with D3.js

A D3.js v5 example demonstrates data-binding and enter/exit updates by rendering a row of fruit as SVG circles. Five apples appear initially, then one is removed after a second, and a third apple becomes a lemon after two seconds, illustrating dynamic updates to the DOM. Using `d3.select`, `scaleOrdinal`, and `range`, the code maps fruit types to fill colors and radii, with all circles positioned via `attr` and removed via `.exit().remove()`.

GGeolffrey S Mena

86% match

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

86% match

Loading thumbnail…

Let's make a face with D3.js

A data-driven update pattern renders a bowl of fruit as colored circles, transitioning from six red apples to a lemon over time. Using D3.js v5, the example demonstrates data joins with `selection.data`, `enter`, `merge`, and `exit` methods within a custom `fruitBowl` function. A `scaleOrdinal` maps fruit types to fill colors and radii, while `setTimeout` triggers sequential state changes—removing one apple and mutating another to a lemon—to show how the visualization reacts to data updates. The SVG is selected and populated from a static `index.html` file.

GGeolffrey S Mena

86% match

Loading thumbnail…

d3dataMechanism

Rendering a fruit bowl as animated SVG circles and labels, this example demonstrates how D3's data join and exit selections handle dynamic updates. Five apples appear, then one is removed, another turns into a lemon, and a different fruit disappears, with all transitions driven by `transition().duration()` over 1000 milliseconds. The code uses `d3.scaleOrdinal` for color and radius mapping, while mouseover and mouseout events update a selected fruit's stroke outline. Data mutations trigger `render()` calls, which rebuild the visualization from the current array state.

Zzenoe

86% match

Loading thumbnail…

HTML Starter

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are rendered as colored circles with labels, and the dataset changes over time through simulated eating and replacement actions. The visualization uses D3 v5 and React, with SVG rendering for the bowl shape and fruit elements. The code leverages D3’s `scaleOrdinal` for color and radius mappings, and employs data joins with `enter`, `merge`, and `exit` selections to update the scene. Timed `setTimeout` calls trigger modifications to the fruits array, showcasing incremental updates.

Ggregosaure

86% match