sine wave Generator

100%

sine wave Generator

✓ Published1🌍 Public

Last edited Jul 1, 2024

Created on Jun 28, 2024

This visualization demonstrates the summation of three independently generated sine waves, combining them into a single composite signal. The line chart plots signal amplitude against sequential data points, with the combined waveform rendered as a continuous black line over a gray background. Built with D3.js, the example uses `scaleLinear` for both axes, a D3 `line` generator for the path, and custom `sineGenerator` functions that compute waveforms using the formula sin(2π·frequency·t). The code also leverages `observeResize` from `@drbagwell/responsive-viz-axes` for responsive sizing and displays axis labels for data points and amplitude.

AI-generated description

Overview Time to dabble with the infamous FFT in javascript. Starting with a simple script to generate sine waves for testing.

export const sineGenerator = (freq, dInSeconds, sRate) => { // Parameters for the sine wave const frequency = freq; const durationInSeconds = dInSeconds; const sampleRate = sRate;

Discrete Fourier Transform - Simple Step by Step https://www.youtube.com/watch?v=mkGsMWi_j4Q

Understanding the Discrete Fourier Transform and the FFT https://www.youtube.com/watch?v=QmgJmh2I3Fw&t=3s

MIT Licensed

Similar vizzes

Loading thumbnail…

sine wave for FFT

This example demonstrates how to combine multiple sine waves into a single signal and visualize the result. It generates three distinct sine waves at frequencies of 8, 15, and 5 Hz using a custom `sineGenerator` function, then sums them into a combined amplitude signal that is plotted as a line chart using D3's `scaleLinear` and `line` methods. The visualization includes labeled axes for data points and signal amplitude, with the chart rendered inside a gray rectangular region. While the code includes FFT utilities from the included `fft.js` and `fftutil.js` modules, the current view only displays the raw combined waveform rather than the frequency-domain analysis.

DDonald Bagwell

83% match

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

79% match

Loading thumbnail…

FFT of sine waves

This example visualizes the discrete Fourier transform (FFT) of combined sine waves, showing the magnitude spectrum of three superimposed signals at frequencies 5, 8, and 15 Hz sampled at 120 Hz. Three sine waves are generated with a custom `sineGenerator` function, summed, and processed through a radix-4 FFT implementation. The resulting magnitude values are plotted as a line chart using D3.js, with scales and axes handled via `scaleLinear` and the `@drbagwell/responsive-viz-axes` library, alongside a custom `viz` function that renders the plot within an SVG container.

DDonald Bagwell

79% match

Loading thumbnail…

Sine wave with line

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`.

LLewis Ward

75% match

Loading thumbnail…

dspFFT

This visualization demonstrates the Fast Fourier Transform (FFT) applied to a composite signal of three sine waves at 40, 15, and 25 Hz. It displays the frequency spectrum as a line chart, showing amplitude peaks at the corresponding frequencies, alongside axes labeled "Frequency Peaks of Sine Waves" and "Signal Amplitude." The code generates test data using a custom `sineGenerator`, computes the FFT with algorithms from `DSP.js` and `fourier.js`, and renders the result via D3 scales, line generator, and axes within an SVG canvas.

DDonald Bagwell

73% match

Loading thumbnail…

classFFT of sine waves

This visualization demonstrates the Fast Fourier Transform by combining three sine waves (at 5, 8, and 15 Hz) into a single signal and computing its frequency spectrum. The code generates the composite waveform using `sineGenerator`, then applies the `FFT` class from `@drbagwell/dft_fft_classes` to transform 1024 sampled points, logging the resulting spectrum to the console. Built with D3.js and `observeResize` for responsive axes, the example focuses on the algorithmic FFT computation rather than rendering a visual plot.

DDonald Bagwell

72% match

Loading thumbnail…

test

This example demonstrates an interactive line chart of a sine wave, plotting y = sin(x) for x values from 0 to 100. A brushable range slider allows users to zoom into a specific x-domain interval, dynamically updating the x-axis scale and the plotted line to show only the selected portion. The visualization is built with D3.js, using `d3.scaleLinear` for axes, `d3.line` for the path, and the `d3-simple-slider` library's `sliderBottom` component for the range selection. The SVG rendering is generated programmatically from random-like data computed in the code.

11807589994@qq.com

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

71% match