Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

General Update Pattern

Public visualization

Viewing a saved revision (read-only)

0361a91c25ed4f81a6cfe69c4f4077fe

General Update Pattern

0 stars1🌍 Public
Ooceanecharlery
Last edited Aug 5, 2019
Created on Aug 5, 2019

A smiling face rendered in SVG changes expression over time: apples shrink, a lemon appears, and eyebrows disappear as data updates. This example demonstrates the general update pattern with D3 v5, using `selection.data`, `enter`, `merge`, and `exit` to handle entering, updating, and removing circles. The code maps fruit types to colors and radii via `scaleOrdinal`, and `setTimeout` triggers three sequential re-renders to show state transitions.

AI-generated description

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