Lissajous

100%

✓ Published0🌍 Public

Last edited Feb 14, 2017

Created on Feb 4, 2017

This example animates Lissajous curves, parametric figures formed by sine waves on perpendicular axes, with interactive text inputs for amplitude, frequency, and phase values. The curve continuously evolves as the phase offset (δ) increments automatically, while the other parameters remain adjustable by the user. The SVG path is redrawn on each frame using a d3.timer, computing points with a custom lissajous function and d3.range over a fixed precision interval. The code relies on d3.v4 selection and attribute methods, with a centered group transform positioning the rendering.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Select D3 L4

A set of circles animates in a sine-wave pattern across the screen, with each circle’s vertical position and radius fluctuating over time. The visualization uses D3’s `select` and `range` functions to generate data and bind it to SVG circle elements via `join`. A `setInterval` loop updates the data every 60th of a second, recalculating each circle’s `cx`, `cy`, and `r` attributes based on a changing time variable. The animation runs continuously, creating an organic, flowing motion.

Mmaciekawsq@gmail.com

70% 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

70% match

Loading thumbnail…

d3 selection exploration

Animated green circles move horizontally across an SVG canvas while their vertical position and radius fluctuate according to a sine wave. The visualization demonstrates D3’s `selectAll().data().join()` pattern, handling dynamic array sizes by entering and exiting circles as the count oscillates. Using `d3.range` to generate data points and a `setInterval` timer at 60 frames per second, it updates attributes like `cx`, `cy`, and `r` in place. The code renders with SVG and leverages D3 version 7.8.5, showing a smooth, continuous wave-like pattern.

NNeeraj Kumar

70% match

Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais

70% match

Loading thumbnail…

animating data cleaner code

This example uses D3 v7 to create an animated, generative visualization of circles. It displays a dynamic sine-wave pattern where 10 to 15 circles move vertically and change radius over time, rendered as SVG elements on a full-window canvas. The animation runs at a 60 FPS interval, with each frame updating the `cx`, `cy`, and `r` attributes of the circles via `selectAll` and `.join`. The periodic motion is computed using `Math.sin` for both position and size, creating a smooth, evolving sine-wave composition.

KKerim

70% match

Loading thumbnail…

Jam session

A dynamic SVG animation renders a row of circles that slide vertically in a wave-like pattern. The number of circles oscillates between 5 and 15 over time, driven by a sine function. Using D3 v6, the code generates data with `range` and applies a data join with `selectAll` and `join('circle')` to update positions each animation frame. The `setInterval` callback updates the scene at 60 frames per second, shifting each circle's `cy` attribute based on its index and the current time.

Iibaird6@gatech.edu

70% match

Loading thumbnail…

Circles Sine Wave Animation D3

Animated circles glide across the screen in a sine wave pattern, with each circle's position, size, and color shifting over time. The visualization uses D3 v7's `select`, `selectAll`, `range`, and `line` APIs to generate and update SVG elements on a 60fps interval. Circle color is derived from a dynamic HSL value based on the animation tick, while the number of circles oscillates between 1 and 35. The line generator draws a smooth path connecting the circles, creating a flowing sinusoidal curve.

Eelisabet@pitch.io

70% match

Loading thumbnail…

slinky

A single white line repeatedly traces the outline of a circle, but its shape is continuously warped by a sinusoidal modulation that scales and rotates each point’s radial position. The animation cycles through several periods of this distortion, making the circle appear to coil and uncoil like a slinky. The code uses D3’s `d3.timer` to update a `path` element, computing new coordinates for 1,000 sample points via a transformation that multiplies the base circle’s x- and y-coordinates by cosine and sine of the angle multiplied by a time-varying factor. The rendering relies on an SVG `path` with a thick white stroke over a dark background, leveraging the lodash and d3-jetpack helper libraries for utilities and concise syntax.

11wheel

70% match