Skip to main content
SimilarExport ZIP
100%

sin_wave_circles

✓ Published0🌍 Public
TTanmay Bishnoi
Last edited Jan 16, 2022
Created on Jan 16, 2022

A radial burst of circles emanates from the center of an SVG canvas, with each circle positioned along a sine-wave path to create a rippling, wave-like pattern. The visualization uses React components to render the SVG elements, while D3.js utilities handle the underlying data manipulation and coordinate calculations. The code loads CSS named color data via D3's fetching methods, though the current implementation focuses on the geometric arrangement of circles rather than color mapping, with the static SVG output measuring 960 by 500 pixels.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

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
84% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG rendering with D3.js, creating 15 circles positioned across the screen using a sine wave pattern. The code imports `select` and `range` from d3, appends an SVG element to the body sized to the full window, and uses the data join pattern with `selectAll`, `data`, and `enter` to create circles. Each circle receives a fixed radius of 20 pixels, with horizontal positions computed as multiples of 50 and vertical positions determined by the sine function. The visualization serves as a minimal, self-contained introduction to creating SVG shapes with D3's data-binding approach.

Mmberger92@online.de
83% match
Loading thumbnail…

Sin graph

An animated sine wave is rendered as a series of circles that grow and shrink in radius as they move along the curve. The visualization updates every second, adding or removing circles based on the current sine value, creating a dynamic, pulsing pattern across the full browser viewport. The code uses React 18.2.0 and D3 v7.6.1, with D3’s `select`, `range`, and the `.join()` API to handle the SVG circle elements and their animated attributes. The graph is drawn in SVG, and the animation is driven by a `setInterval` loop that recalculates circle positions and radii.

Ddeebanks77
83% match
Loading thumbnail…

circle with Sine and cosine functions

This example displays a circular cluster of small, randomly sized and colored circles, positioned along the path of a sine and cosine wave. The visualization is generated using React and rendered as an SVG. The code maps an array of numbers to circle elements, calculating their x and y coordinates with the `Math.cos` and `Math.sin` functions. Each circle’s radius and fill color are also randomly determined using `Math.random`, producing a varied and organic visual pattern.

NNita
82% match
Loading thumbnail…

Sine Wave Circles

A grid of 30 circles animates in a sine wave pattern, with each circle’s vertical position oscillating over time to create a flowing, wavelike motion across the screen. The wave’s frequency and amplitude are driven by a time-based function, with circles shifting smoothly as the animation progresses. Built with D3 v7, the visualization uses an SVG container and selects all circles to update their `cy` attributes via D3’s `timer` and `range` APIs. The example is a direct port of a p5.js sine wave demonstration, rendered entirely with SVG elements.

HHeisenberg
82% match
Loading thumbnail…

refactoring the sin animation

Fifteen animated circles move in a sinusoidal wave across an SVG canvas, with each circle’s vertical position and radius oscillating over time. The animation runs on a 60 FPS interval, updating data from `makeData` and rendering via D3’s `selectAll().data().join()` pattern. D3 v7 and React manage the state and DOM updates, creating a rhythmic, pulsing visual pattern.

SSamuele Greco
82% 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
82% match
Loading thumbnail…

SVG Fundamentals SIN CIRCLE

This example shows a field of circles that continuously shift position and size based on a sine wave, animating at 60 frames per second. The code generates data points using JavaScript’s `Math.sin` to compute both the circle radius and its x-coordinate offset, creating a rhythmic, flowing motion. It uses D3 v6’s `select`, `data`, and `join` methods to bind the updated data to SVG `<circle>` elements, updating their `r`, `cx`, and `cy` attributes each frame. The rendering is pure SVG within a full-viewport canvas, with no external data source.

AAitorGD
81% match