Music Viz

Song's Note Zoom Scatter Plot

This zoomable scatter plot visualizes the individual music notes from a MIDI song track, plotting each note’s start time in Midi ticks along the x-axis against its pitch class and octave on the y-axis. The data, sourced from the Million Song Dataset, is rendered as semi-transparent circles using SVG. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and a `zoom` behavior to enable panning and scaling. Notes are ordered using a custom helper function that sorts by octave and chromatic pitch.

70% match

Gist 7942740a263d3aa26e8c77adad206372

This visualization is an interactive canvas-based musical instrument that maps a two-dimensional grid of colored, circular nodes to specific musical notes. It shows how different spatial regions correspond to different tones, with the size and color of each node likely encoding additional sonic parameters such as pitch or octave. The application uses a custom `PitchDetector` algorithm and a `Player` class to translate node interactions into audio output, while the rendering relies on Canvas drawing operations. The code references the `notes_midi_freq.csv` dataset to map note names and MIDI numbers to their corresponding frequencies, enabling the generation of accurate musical tones.

MMAKIO135

68% match

Song's Note: Start & End - With choice

This interactive D3 visualization explores a MIDI song by displaying each track's notes as horizontal bars, with x-position indicating start time and bar width representing duration. A color legend for MIDI files lets viewers select which song to examine, while a second legend filters individual tracks. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.interpolateViridis` for note colors, with `transition.duration` and `.delay` animating the bars. Data comes from the Million Song Dataset, rendered as SVG.

Circle Piano

A circular piano keyboard displays seven musical notes repeated across a ring, with black keys for sharps and white keys for naturals. Hovering or touching a key expands its arc outward while simultaneously playing a square-wave tone via the Web Audio API. Built with D3 v4, the visualization uses `d3.pie` and `d3.arc` for geometry, `transition.attrTween` for smooth animation, and SVG for rendering.

Mmbostock

circular-synth

This interactive visualization builds a circular synthesizer where each of the 16 beats is a rotating segment containing concentric pitch arcs. Users click or hover over arcs to toggle notes on and off, with four states cycling through white, blue, red, and green. The visualization uses D3’s `d3.svg.arc` and linear scales to map pitch frequencies to radii, while an audio context schedules oscillators for each active note. A `setInterval` loop advances the beat, highlighting the current segment in purple and triggering sounds through the Web Audio API’s `createOscillator` and `createGainNode`.

11wheel

Hello Sound!

This example uses the Web Audio API to play two sawtooth tones a major third apart, each triggered sequentially after a one-second pause. The code converts MIDI note numbers to frequencies using a mathematical formula, then creates and starts an oscillator through an AudioContext. Oscillator lifecycle events schedule the second note, while a biquad filter is instantiated but not connected. The page itself displays only a static message, with styling handled by CSS and no D3 visualization logic present despite the D3 library being loaded.

Untitled

An interactive sound visualization displays a scatterplot of audio samples, each represented by a draggable circle colored by sound category (Clap, Whoosh, Punch, etc.) using d3.scaleLinear and d3.schemeCategory10. Clicking a circle plays the corresponding audio file via the Web Audio API and WebAudiox library, while a color legend filters highlights by category. Hovering shows tooltips, and the view supports zooming and panning through d3.zoom. The project uses D3 v3 with SVG rendering and imports from d3 modules for scales, axes, drag behavior, and data binding.

Oocean1225

66% match

Song's Note Scatter Plot

A scatter plot maps MIDI tick time along the x-axis against musical note pitch on the y-axis, visualizing the note sequence of track #12 from the Million Song Dataset's "Poor Little Fool." Each circle represents a note event, with opacity creating density effects. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft/axisBottom with tick lines for grid rendering. Note ordering is computed via a custom helper that sorts notes by octave and pitch class.