Scatter Plot

100%

✓ Published0🌍 Public

Last edited Sep 22, 2021

Created on Sep 9, 2021

This scatter plot demonstrates animated transitions of fruit-shaped circles, updating as fruits are added, removed, or change type. The visualization uses D3 v5’s data join pattern with key functions, merging enter and update selections, while applying ordinal color and radius scales. A 1000-millisecond transition animates circle positions and radii when the dataset changes. The code imports `scaleOrdinal`, `select`, and `range` from D3, rendering SVG circles inside a 960×500 viewport, with transitions triggered by timed `setTimeout` modifications to the fruit array.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Bowl of Fruit - Click to Select

A dynamic scatterplot uses SVG circles to represent a bowl of fruit that changes over time. Apples and lemons are distinguished by color and size, and clicking a fruit selects it with a black outline. The visualization animates data additions, removals, and type changes using D3’s transition API with a one-second duration. The code imports `scaleOrdinal` and `select` from D3 v5, and initial fruit data is generated with `range` and `Math.random`.

Rrdeichert

86% match

Loading thumbnail…

Let's make a face with D3.js

A short animated scatterplot demonstrates D3.js update patterns by rendering a bowl of fruit as colored circles that change radius and position over time. Using `d3.scaleOrdinal` for color and radius mapping, the example appends, transitions, and removes circles with `selection.merge` and `transition.duration`. The data array mutates through timed `setTimeout` calls, removing items, changing a fruit’s type from apple to lemon, and filtering out a selection, all while the SVG updates smoothly with enter, update, and exit selections.

GGeolffrey S Mena

86% match

Loading thumbnail…

Bawl of Fruit data update pattern

This example demonstrates a dynamic data update pattern for a simple scatterplot of fruit represented as colored circles. Using D3 v5’s data join, it animates the position and size of each fruit as items are added, removed, or changed in type, with transitions that smoothly adjust the `cx` and `r` attributes. The code uses `d3.range`, `selection.data`, `.enter()`, `.merge()`, and `.exit()` to manage changes, and `d3.scaleOrdinal` to map fruit types to sizes. The dataset is manually manipulated with `setTimeout` calls, simulating an eating and refilling sequence.

VVlad Bogo

86% match

Loading thumbnail…

Data join and Transition

This example demonstrates a data join and transition animation in D3 v5, where a set of circles representing fruits is dynamically updated. The visualization shows how the `selectAll` and `data` (with a custom key function) methods manage entering, updating, and exiting elements—new apples grow from a radius of zero, a lemon changes color and size, and a removed fruit shrinks away. The code uses D3's `scaleOrdinal` for color and radius mappings and leverages the `transition` API for smooth, 1000-millisecond animations.

JJenny

85% match

Loading thumbnail…

Data join and Transition

This example demonstrates the data join pattern with animated transitions in D3 v5, showing how circles representing fruit enter, update, and exit. Starting with five apples, the visualization removes a fruit after one second, changes the third fruit's type to lemon at two seconds, and filters out another item at three seconds. Each change triggers a smooth 1-second transition where new circles grow from radius zero, existing circles adjust their color, size, and position, and removed circles shrink away. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, and `selection.exit()` with `transition().duration()` for the animations, along with `scaleOrdinal` for color and radius mapping.

JJenny

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

85% match

Loading thumbnail…

Transition

The visualization demonstrates a multi-stage transition of fruit count data, first morphing circular bubbles into rectangular bars, then into a pie chart. It uses D3.js version 3.5.6 with SVG and animation via chained `transition()` calls, employing `d3.scale.ordinal` and `d3.scale.linear` for positioning. The data comes from `fruit.csv` with fruit names and counts. After five seconds, a `setTimeout` triggers a second transition where bars become pie slices using `d3.layout.pie` and `d3.svg.arc`, with y-axis removal and element replacement.

DDarienLiang

85% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A dynamic scatterplot-style visualization demonstrates D3's general update pattern with a bowl of fruit metaphor. Apples and lemons, rendered as colored circles with labels, shuffle positions as the dataset changes over time through a timed script. The example uses D3 v5's `selection.enter()`, `merge()`, `exit()`, and `.transition()` APIs to animate additions, removals, and type changes with 1000ms duration tweens. SVG elements update their `transform`, `fill`, `r`, and `text` attributes accordingly, while a random `id` key tracks each fruit through the data lifecycle.

Iip01

85% match