Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

need some fruit - General Update Patterns

Public visualization

need some fruit - General Update Patterns

0 stars2🌍 Public
CCalvin.
Last edited Mar 17, 2022
Created on Mar 16, 2022

This example demonstrates D3.js general update patterns by rendering a bowl of fruit as colored circles that change over time. The visualization shows apples and lemons entering, exiting, and updating their position, size, and color through staggered transitions. Using the `data` join with key functions and `merge`, the code animates SVG circles via `transition().duration()`, applying `scaleOrdinal` color and radius scales based on fruit type. The data source is a JavaScript array modified with `setTimeout` calls to simulate eating and replacing fruit.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

Comments

Sign in to join the discussion.

MIT Licensed