Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Selection Exploration

Public visualization

Viewing a saved revision (read-only)

f4167d28f1de4132a0d85e0e67b5d93c

D3 Selection Exploration

0 stars0🌍 Public
KKyuhyun
Last edited Jun 2, 2022
Created on Jun 2, 2022
Forked from HTML Starter

This example demonstrates animated SVG circles in a wave-like pattern, updating every five seconds. It uses D3’s `select` and `range` to generate data and the `data().join()` pattern to handle circle enter and update states. The code appends circles to the body, setting their `cx` and `cy` attributes based on a sine function, with the animation driven by a JavaScript `setInterval` that increments time and re-renders the positions. The visualization shows how D3’s selection and data-binding APIs work with React-style vanilla JavaScript, rendering in full-screen SVG.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.