Sine wave with line

100%

Sine wave with line

✓ Published0🌍 Public

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.

Similar vizzes

Loading thumbnail…

Sine Wave

This visualization displays a sine wave rendered as an SVG path. The wave is generated using D3.js version 5, with the `d3.line` generator and `d3.scaleLinear` for mapping data points to screen coordinates. The animation updates the wave’s phase over time using `d3.interval`. The example demonstrates how to build interactive, time-based data visualizations with D3’s core modules, including axis creation via `d3.axisBottom` and `d3.axisLeft` for reference lines.

AAndy Zhang

84% match

Loading thumbnail…

Fork of Bouncy Wave

A smoothly animated sine wave bounces across the full screen, drawn as a single curved line whose height oscillates continuously. The wave is generated from 100 data points calculated per frame, with each point’s y-coordinate and circle radius varying by a time increment. Using D3’s `line` generator with `curveNatural` interpolation, the SVG path is updated every 16 milliseconds via `setInterval`. The visualization relies on D3 selections and the `visData` module, though React is included as a dependency but not actively used.

LLewis Ward

83% match

Loading thumbnail…

LineWave

LineWave renders a stationary sine wave composed of 1,000 white circles connected by a black line, with the animation loop commented out. Using React and D3 v6, the `makeData` function generates points via `Math.sin`, while `visData` employs D3's `line` generator and data joins to create the SVG circles and path. The visualization demonstrates a hybrid approach where D3 handles DOM rendering within a React project, producing a clean, minimal aesthetic against a full-viewport white background.

GGregorZiegler

80% match

Loading thumbnail…

D3 Selection

This example demonstrates animated sine-wave motion in an SVG scene using D3. A line generator creates a path from 15 points, with each point’s y-coordinate oscillating based on a sine function of its index and a time variable. Circles are bound to the same data, updating their position each frame via D3’s data join. The code uses `d3.select`, `d3.range`, `d3.line`, `selectAll`, and the `join` method, refreshing every 100 milliseconds. The animation runs indefinitely, shifting the wave pattern across the viewport.

KKhanAzmat

79% match

Loading thumbnail…

sin wave and move

This example animates a set of 15 circles that move along a sine wave across the screen, with the wave’s phase shifting over time. Each circle’s y-position is computed from the sine of its index plus a time variable, updated every second using a `setInterval`. The visualization uses D3’s `select`, `range`, and data-join with `.join('circle')` to create and update SVG circles, while styling is handled by inline CSS attributes. The animation runs on an SVG canvas sized to the full browser window.

JJetlinZ

78% match

Loading thumbnail…

sine-line

A full-screen SVG animation renders a horizontal line of 30 white circles that undulate vertically in a sine wave pattern. The circles’ y-positions are computed with `Math.sin`, incorporating the animation time from `d3.timer`. The code uses d3 selections, `d3.scaleLinear` for spacing, and lodash-style helpers, remaking a p5.js example in D3.

11wheel

77% match

Loading thumbnail…

Sine Wave Circles

A row of white circles animates vertically to form a flowing sine wave. The visualization uses D3 v4 to bind an array of 40 numbers to SVG circle elements, positioning each along the x-axis. A `d3.timer` continuously updates each circle’s y-coordinate based on the sine of its index plus elapsed time, creating the wave effect. The circles are evenly spaced with a fixed radius, rendered on a black background.

CCurran Kelleher

77% match

Loading thumbnail…

HTML Canvas Wave Line

This example demonstrates a sine wave pattern drawn on an HTML canvas element, showing how mathematical functions can generate visual curves. The wave oscillates vertically across the 800-pixel-wide canvas, centered vertically with an amplitude of 50 pixels and a frequency controlled by dividing the x-coordinate by 50. The visualization uses the Canvas API's `getContext('2d')` method and `lineTo()` function to plot each point incrementally, advancing horizontally by 2 pixels per iteration. A goldenrod border frames the canvas, while the wave itself is rendered with the default black stroke. No external libraries are used; the implementation relies purely on native JavaScript and the HTML5 Canvas API.

JJack Lyons

77% match