Sine function with React

100%

Sine function with React

✓ Published1🌍 Public

Last edited Mar 10, 2020

Created on Mar 10, 2020

This example visualizes a sine wave using a series of circles plotted along the x-axis, with each circle’s vertical position computed as `Math.sin(a) * 200` and offset from the horizontal center. The chart is rendered as an SVG using React and ReactDOM, with 50 circles spaced 50 pixels apart across a 960×500 canvas. The code leverages React’s declarative component structure, mapping over an array of x-coordinates to generate circle elements, while the HTML loads React libraries and a separate `bundle.js` to run the visualization.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

circle with Sine and cosine functions

A circle of dots depicts sine and cosine functions through their parametric coordinates. React renders three concentric rings of circles, each using `Math.cos` and `Math.sin` to position elements around a shared center at varying radii. The `svg` output uses dynamic RGB fill colors based on array index and random values. The visualization demonstrates how trigonometric functions generate circular patterns through React's mapping of an array of 50 indices.

NNita

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

86% match

Loading thumbnail…

Sin and cos

This example plots points along sine and cosine curves using React and SVG. The code generates arrays of sine and cosine values, scales them by a constant pixel factor, and renders blue circles for each coordinate pair. It uses React’s `ReactDOM.render` to mount the SVG element, with props for width and height. The visualization shows the relationship between the two trigonometric functions, displaying a circular pattern of points based on the paired values.

NNita

85% match

Loading thumbnail…

circle with Sine and cosine functions

A circle composed of fifty small colored dots traces a parametric path defined by sine and cosine functions, with vertical black lines connecting each dot to the horizontal axis. The visualization uses React to render SVG elements, mapping array indices to `Math.cos` and `Math.sin` values for positioning. Each circle’s fill color varies with its index and a random factor, demonstrating periodic motion and trigonometric relationships.

NNita

85% match

Loading thumbnail…

circle with Sine and cosine functions

This example displays a circular arrangement of three nested rings of colored circles, with each ring formed by plotting points based on sine and cosine functions. The visualization demonstrates how varying the radius parameter in these trigonometric equations creates concentric orbital patterns. Built with React and rendered as SVG, the code uses ReactDOM to render 50 points per ring, with each circle's fill color derived from its index position and a random value. The `Math.cos` and `Math.sin` functions calculate x and y coordinates for the given index, producing the layered orbital structure.

NNita

84% match

Loading thumbnail…

circle with Sine and cosine functions

This example renders a set of 50 randomly positioned circles inside an SVG, with each circle’s x-coordinate derived from a random value and its y-coordinate spaced evenly by index. The fill color of each circle varies dynamically using `rgb()` values computed from the circle’s index and a random multiplier. Built with React and ReactDOM, it uses JSX to map over an array of random numbers and generate the SVG circle elements, demonstrating a simple, non-interactive scatter-like visualization of random data.

NNita

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

A circle of overlapping rings is generated from 40 mapped points, with each point plotted twice at different radii using sine and cosine calculations. The visualization uses React components to render SVG circles, with randomized sizes and color values based on array indices and Math.random(). The result is a layered, multicolored radial pattern formed by nested circles of varying opacity and scale.

NNita

82% match