Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sine wave with line

Public visualization

Viewing a saved revision (read-only)

a16c19b473e3415b9837b9d638cd0dd8

Sine wave with line

0 stars0🌍 Public
LLewis Ward
Last edited Jul 22, 2021
Created on Jul 22, 2021

This example animates a smooth, natural sine wave that undulates across the screen, with a line drawn through its points using a black stroke. The wave is generated from 100 data points, each positioned along the x-axis with a y-coordinate determined by a sine function that shifts over time. Built with D3 v6 in a React framework, the visualization updates every frame using `setInterval` and renders via SVG. The code employs D3’s `line` generator with a `curveNatural` interpolation and animates the wave by incrementing the phase offset `t`.

AI-generated description

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

See also React Starter.