FFT of sine waves

100%

FFT of sine waves

✓ Published2🌍 Public

Last edited Jul 1, 2024

Created on Jul 1, 2024

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.

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

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

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

82% match

Loading thumbnail…

sine wave Generator

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.

DDonald Bagwell

79% match

Loading thumbnail…

Fast Fourier Transform Class

This example visualizes the frequency spectrum of a time-series signal, showing the amplitude of frequency peaks after a Fast Fourier Transform (FFT) is applied to a dataset of 16,384 samples. A line chart displays the frequency peaks of sine waves, with the x-axis representing frequency and the y-axis representing signal amplitude. The implementation uses D3.js for rendering and employs a custom `FourierTransform` function to compute frequency, amplitude, and phase from the data, which is sourced from a pre-loaded dataset. The visualization also includes axes and labels rendered via the `@drbagwell/responsive-viz-axes` library.

DDonald Bagwell

75% match

Loading thumbnail…

DFT and FFT Implementation

This visualization compares the Discrete Fourier Transform (DFT) and Fast Fourier Transform (FFT) algorithms for spectral analysis. It plots frequency peaks of sine wave data, showing signal amplitude against frequency to reveal the dominant frequencies in a combined test signal. The implementation includes custom JavaScript classes for both transforms, using typed arrays for performance, and renders the results as a line chart with D3.js scales and axes. The visualization also includes a basic Fourier transform implementation for calculating the power spectrum.

DDonald Bagwell

73% match

Loading thumbnail…

dataFFT

This visualization demonstrates the Fast Fourier Transform (FFT) by plotting the frequency spectrum of a signal, showing a scatter plot of frequency peaks against their amplitudes. A CSV file containing signal data is fetched and processed through a naive Fourier transform algorithm, which calculates the real and imaginary components, amplitude, and phase for each frequency bin. The resulting data is rendered as a line chart of amplitude versus frequency using D3's `scaleLinear`, `line`, and `extent` functions, with axes and labels configured via the `@drbagwell/responsive-viz-axes` library. The visualization includes a gray inner plotting area and a black line trace, illustrating the spectral content of the input signal.

DDonald Bagwell

73% match

Loading thumbnail…

double sided FFT

This visualization demonstrates the results of a Fast Fourier Transform (FFT) applied to real-world wind data from a CSAT3 sonic anemometer, specifically the vertical wind component (Uy_1). It plots signal amplitude against frequency, revealing the dominant frequency peaks of the underlying sine wave patterns. The example uses a custom `FourierTransform` function to decompose the time-series data, then renders the results as a line chart with D3.js (v7.9.0). The `viz.js` module uses `scaleLinear`, `line`, and `extent` from D3 to create a line path, with axes and labels handled by the `@drbagwell/responsive-viz-axes` library. The data is visualized through a simple line mark, with a grey inner plot area and circular data points.

DDonald Bagwell

72% match