Skip to main content
100%

Radial Line - Dark

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 29, 2017
Created on Jun 29, 2017

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.

AI-generated description

This listens to your computer's microphone and draws the contents of the audio buffer as a radial line. Also made a bright version: <a href='http://bl.ocks.org/alexmacy/a39e1e54f68c45b5e1bb5b27c78908db'>Audio Radial Line - bright</a>

This is part of a series exploring the visualization of audio that was presented at a d3.oakland meetup. 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…

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

Rotating Ellipses v1

This visualization uses the computer’s microphone as its data source, drawing the live audio waveform as a series of concentric, rotating ellipses on a Canvas. Each ellipse corresponds to a sample in the audio buffer, with its size scaled logarithmically via `d3.scaleLog` and its rotation based on the sample’s position in the buffer. The code uses the Web Audio API’s `AnalyserNode` to capture time-domain data, then redraws the entire scene every animation frame with `requestAnimationFrame`. The result is a dynamic, red-on-black display that reacts in real time to sound volume and pitch.

Aalexmacy
74% match
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
72% match
Loading thumbnail…

Audio viz

This example visualizes a randomly generated audio buffer as a waveform on a Canvas. It creates an `AudioBuffer` with 10,000 samples of white noise, then draws the signal as a continuous line across the canvas width. The code uses the native Canvas 2D API (`getContext`, `moveTo`, `lineTo`, `stroke`) with D3 v7 available for potential enhancements, while the page itself is styled with minimal CSS and hosted in a plain HTML file.

GgwendalF
71% match
Loading thumbnail…

Spectrum - Dots

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.

Aalexmacy
71% match
Loading thumbnail…

radial-mask

The visualization generates eight panels of overlapping radial line paths, each pair rendered in cyan and magenta with a yellow overlay clipped by an SVG mask. It uses d3.lineRadial to create irregular, sine-modulated rings from random walk data. The masking technique isolates the intersection of two shapes, producing layered, hybrid forms. The animation is static but visually dynamic.

11wheel
70% match
Loading thumbnail…

Horizontal Ellipses

Microphone input drives a real-time canvas animation that renders the audio waveform as a cluster of overlapping red ellipses centered on screen. Each sample in the time-domain buffer becomes one ellipse, with its radii and rotation derived from the sample’s amplitude and position. The visualization continuously redraws using `requestAnimationFrame`, clearing the canvas with a black fill each frame. It uses the Web Audio API’s `AnalyserNode` and `getByteTimeDomainData` to capture live audio, then draws ellipses via Canvas 2D’s `ellipse` method.

Aalexmacy
70% match
Loading thumbnail…

Compound Radial Waves

Two adjustable sliders set the frequencies of two individual waves, which are drawn as thin white lines. A red line plots their compound sum along a horizontal axis, while a green radial line wraps the same compound wave around a circle. The visualization uses d3.line and d3.radialLine, with an animated transition between radial configurations as the compound wavelength changes, computed via the least common multiple of the two frequencies.

Aalexmacy
69% match