ATS - D3 traversing a sine wave

100%

ATS - D3 traversing a sine wave

✓ Published1🌍 Public

Last edited Jul 22, 2024

Created on Jul 22, 2024

Forked from ATS - D3 Sol Lewitt with CSS animation

A set of black circles arranged in a sine wave pattern moves across the screen, with every sixth circle highlighted in red and enlarged. The wave animates continuously as the horizontal position of each circle remains fixed while its vertical position shifts over time. The code uses D3 v6 selections, `range`, and `scaleBand` to generate and update the SVG circle elements. A `setInterval` triggers a redraw every 100 milliseconds, and a direction variable reverses the highlighted index when it reaches the edges of the data array.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

81% match

Loading thumbnail…

D3 selection exploration

Ten animated circles form a sine wave pattern across the screen, with their vertical positions shifting continuously to create a smooth undulating motion. Using D3 v7's `select` and `range` functions, the code binds an array of ten data points to SVG circle elements via the `join` method, updating each circle's `cx` and `cy` attributes every frame at 60 frames per second. The example demonstrates both the data-join pattern and the newer `join` syntax as an alternative to the older `enter`/`merge` approach, with the animation driven by a `setInterval` timer that increments a time variable.

SSidney Oluoch

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

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

79% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates a dynamic animation of fifteen circles moving in a sinusoidal wave pattern across the screen, with each circle’s vertical position updated continuously. The visualization uses the D3.js library (version 6.6.2), specifically leveraging the `select`, `range`, and `join` APIs to manage the SVG elements. The code generates data points calculated from a time variable, then updates the circles’ `cx` and `cy` attributes at a fixed 60-frame-per-second interval using `setInterval`. The rendering is SVG-based, with a live animation that replays the wave motion indefinitely.

YYingkai Song

79% match

Loading thumbnail…

D3 3

Fifteen circles oscillate vertically along a sine-like wave, continuously animating across the screen. The visualization is rendered as SVG elements using the D3 library's selection API. It employs `selectAll`, `data`, and `join` to bind incoming data arrays to circle elements, updating their `cx` and `cy` attributes each frame. A JavaScript `setInterval` timer drives the animation at 60 frames per second, computing new y-positions from a tangent function of the current time step.

Rrespingu

79% match

Loading thumbnail…

ATS - Symbols, Lines, Layers

This example reproduces a Sol LeWitt-inspired generative drawing with animated D3 symbols, lines, and layers. It displays 70 circular symbols arranged in a row, with their vertical positions oscillating via a sine function, while three red Wye symbols highlight shifting indices over time. A semi-transparent black curve, computed with `d3.line()` and `d3.curveNatural`, connects all points. Using `d3.symbol` for shapes and `setInterval` for animation, the SVG updates every 100 milliseconds, incrementing a time variable to drive the motion.

Xxscotta@yahoo.com

79% match

Loading thumbnail…

D3 Selection Exploration

Fifteen circles animate vertically in a sine wave across the screen, their positions updating every frame in a loop. Using D3 v6, the code demonstrates the `.join()` method to bind new data arrays to existing SVG circle elements, updating their `cx` and `cy` attributes. The animation runs via `setInterval`, and the source includes commented-out alternative approaches using `.enter()`, `.merge()`, and `.exit()` for comparison.

AAndre J Denais

79% match