Spectrum - Dots

100%

Spectrum - Dots

✓ Published0🌍 Public

Last edited Jun 29, 2017

Created on Jun 29, 2017

This visualization presents a real-time audio spectrum analyzer that animates a canvas of colored dots. It uses the Web Audio API to capture microphone input, and then d3.js scales map frequency data to screen coordinates and color values. Each frame, the code reads frequency data using `analyser.getByteFrequencyData`, then draws fading circles to create a dynamic, trailing effect. The visualization displays the raw frequency amplitude, with low values shown in black and higher amplitudes in red, rendered as a continuously updating canvas animation.

AI-generated description

A relatively simple audio spectrum analyzer built using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" target="_blank">Web Audio API</a> and <a href="https://d3js.org/" target="_blank">d3.js</a> and rendered using canvas. Also made a bright version: <a href='http://bl.ocks.org/alexmacy/9914d59438c9fac7a50c7846378f204e'>Audio Spectrum Analyzer - bright</a>

This was made as part of a series exploring the visualization of audio that was presented at a d3.oakland. A big list of the demos from this series can be found <a href="https://alexmacy.github.io/d3.oakland" target="_blank">here</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Spectrum - Dots

A real-time audio spectrum analyzer renders live microphone input as a field of dots on a canvas. Each dot represents a frequency bin, with its vertical position mapped to amplitude via d3.scaleLinear and its color transitioning from white to red based on intensity. The visualization uses the Web Audio API’s AnalyserNode to capture frequency data, while d3.js scales the x and y coordinates. Animation runs continuously through requestAnimationFrame, drawing translucent overlays to create a fading trail effect.

Aalexmacy

97% match

Loading thumbnail…

SpectrogramJS

This interactive spectrogram visualizes audio frequencies in real time, displaying a scrolling heatmap of sound data across time. The project uses the Web Audio API to analyze audio buffers and D3.js (v5) for rendering the SVG axes and canvas-based spectrogram. Playback controls allow users to load and analyze sound files, with the frequency analysis performed via `AnalyserNode.getByteFrequencyData`. The visualization animates as audio plays, building up the spectrogram view.

JJoker-tr

77% match

Loading thumbnail…

SpectrogramJS

A spectrogram visualization displays the frequency spectrum of an audio file over time, rendered as a scrolling heatmap across a canvas. The example loads a duck sound effect, analyzes it with the Web Audio API’s `AnalyserNode`, and records frequency data during playback. D3.js draws the axes and scale grid as SVG overlays, while the spectrogram’s pixel data is painted onto the canvas. Playback and analysis run via `ScriptProcessorNode` and `requestAnimationFrame`, and the visualization updates in real time until the sound finishes.

JJoker-tr

75% match

Loading thumbnail…

Spectrogram Visualization

This spectrogram visualization renders audio frequency data as a series of colored rectangles across an SVG canvas. The code loads a CSV file containing 13 numeric columns representing frequency bins and maps each row to a rectangular band using D3’s data join. The example uses d3.csv for data loading, d3.scaleLinear for horizontal positioning, and d3.select to manipulate the SVG elements. The rectangles are appended with a fixed height, though the width calculation appears incomplete in the code.

NNeeraj Gopalakrishnan

74% match

Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel

73% match

Loading thumbnail…

Radial Line - Bright

The visualization displays the live audio input from the user’s microphone as a bright, red radial line that continuously rotates and pulses around a central point. It shows the real-time waveform of the audio buffer, with the line’s radius reflecting the amplitude of each sample. The code uses d3.radialLine with a curveBasis interpolation to draw the path on a Canvas element, while the Web Audio API’s AnalyserNode captures the time-domain data via getByteTimeDomainData. Animation is driven by requestAnimationFrame, and the canvas is cleared each frame with a white fill.

Aalexmacy

72% match

Loading thumbnail…

Sonagraph

This example shows a real-time waterfall spectrogram that maps audio frequency data from the user’s microphone into a scrolling visual of colored pixels. It uses the Web Audio API’s `AnalyserNode` to capture frequency amplitudes, then renders each frame onto an HTML5 Canvas. The code copies the canvas with `drawImage`, shifts it downward via `translate`, and colors each frequency bin using the chroma.js color scale, producing a continuously updating graph of sound over time.

Dd3noob

72% match

Loading thumbnail…

Radial Line - Dark

This example visualizes live microphone audio as a dark, glowing red radial line that pulses and distorts in response to the sound’s waveform. It listens to the user’s audio input and draws the time-domain buffer as a circular, smooth curve using d3.radialLine with a curveBasis interpolation. The visualization runs on a Canvas 2D context, updating each animation frame via requestAnimationFrame, and relies on the Web Audio API’s AnalyserNode to capture the audio data.

Aalexmacy

71% match