Radial Line - Bright

100%

Radial Line - Bright

✓ Published0🌍 Public

Last edited Jun 29, 2017

Created on Jun 29, 2017

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.

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 dark version: <a href='http://bl.ocks.org/alexmacy/0fb3b23fa38d1ffe0ae9aa270d750354'>Audio Radial Line - dark</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 - 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

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

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

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

72% match

Loading thumbnail…

My testbed for D3 - radials

An hypnotic radial animation renders thousands of thin lines emanating from a central point, creating a slowly rotating, pulsating circular pattern on a black background. The piece uses D3 v6 to generate SVG paths, with `d3.line()` and a custom `linepaths` function calculating line endpoints based on trigonometric functions and continuously changing time-dependent speeds. An interval triggers a 60fps redraw, updating each path’s stroke color via HSL hue cycling and applying an animated scale transform to the entire group for a subtle zooming effect.

OOysteinVeland

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

Compound Radial Waves v3 [WARNING: LOUD!]

This animated canvas visualization synthesizes and displays multiple radial sine waves radiating from a central point, with interactive sliders controlling each wave’s frequency and amplitude. The compound wave—the sum of all individual waves—is drawn in real time, and users can toggle visibility of individual waves, shuffle frequencies, or sweep one oscillator across a range. The code uses the Web Audio API’s built-in oscillators and gain nodes to produce corresponding sound, synchronizing audio and visual updates. Highlighting occurs on hover over controls, and the visualization is built entirely with vanilla JavaScript and Canvas 2D rendering.

TThanaporn-sk

70% match