Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published1🌍 Public
SSybil Jas
Last edited Feb 23, 2020
Created on Feb 23, 2020
Forked from HTML Starter

This example demonstrates a simple data-join visualization of fruit shapes, showing apples and lemons as colored circles with labels. It uses D3 v5’s `scaleOrdinal` to map fruit types to colors (red for apples, yellow for lemons) and radii (50 vs. 20 pixels). The code employs the general update pattern with `selection.selectAll`, `enter`, `merge`, and `exit` to handle adding, removing, and updating fruits over time via `setTimeout`. The visualization renders inside an SVG container within a React scaffold, with a rounded rectangle representing a bowl.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

HTML Starter

A fruit bowl animation demonstrates data-binding and transitions with D3 v5 in a React framework. Circles represent apples and lemons, colored via `scaleOrdinal` with red and yellow ranges. The `fruitBowl` function uses `selection.data`, `enter.merge`, and `exit` to update SVG circles, animating radius and x-position with `.transition().duration(1000)`. Timeouts trigger removal and type changes, showing enter, update, and exit patterns.

Ggregosaure
89% match
Loading thumbnail…

HTML Starter

This example demonstrates the D3 general update pattern for animated transitions in an SVG scene. It renders a bowl of fruit where apples and lemons appear, change type, and disappear at timed intervals. The visualization uses React, D3 v5's `scaleOrdinal` for color and radius mapping, and the `select` API to manage enter, update, and exit states for circles and text labels.

EEmma
89% match
Loading thumbnail…

Bowl of Fruit - Click to select! with D3.js!

This example shows a bowl of fruit rendered as SVG circles and labels, where apples and lemons are distinguished by color and size. The visualization updates over time as fruits are removed or replaced, demonstrating how D3.js 5 with React-like merge and exit operations handles dynamic data changes. Using `scaleOrdinal` for color and radius mappings, the code appends groups with circles and text, adjusting their positions and attributes as the fruit array mutates.

Fforcox43
88% 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
87% match
Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl demonstrates a data join pattern in D3.js, rendering five apples as circles with red fills inside a rounded rect bowl on an SVG canvas. The example uses `d3.scaleOrdinal` to map fruit types to colors and radii, and `selection.merge()` to update circles and text labels in place. Over timed intervals, the code removes fruits, replaces one apple with a lemon, and filters out another, showing how enter, update, and exit selections handle changing data.

Eemntd
87% 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
87% match
Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates animated data joins with D3 using ordinal scales to map fruit types to colors and radii. Apples appear as red circles, lemons as yellow ones, with text labels below each shape. The visualization uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections as fruits are removed or changed over timed intervals. The code employs `scaleOrdinal`, `range`, and SVG rendering with `attr` and `merge` operations.

Jjlspangl
87% match