Song's Note Zoom Scatter Plot

100%

Song's Note Zoom Scatter Plot

✓ Published1🌍 Public

Last edited Nov 14, 2018

Created on Sep 22, 2018

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.

AI-generated description

This scatter plot shows the music notes from a MIDI song with filename <1a2d8218a9e42cb6b1cdabd5f54b5c56.mid>, track number #12. Also in Notes Frequency of a Song.

The data comes from the Million Song Dataset.

This song is 'Poor Little Fool'. More information: Wikipedia, the free encyclopedia.

MIT Licensed

Similar vizzes

Loading thumbnail…

Song's Note: Start & End

This scatter plot visualizes the start and end points of each music note in a MIDI track, using the note's name on the y-axis and MIDI tick time on the x-axis. Rectangles encode the duration of each note, while the SVG rendering is powered by D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The data comes from the Million Song Dataset and is loaded via `csv`, with labels ordered by a custom note–octave sorting function. The chart supports zooming through the d3 `zoom` event.

RRubens

89% match

Loading thumbnail…

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.

RRubens

85% match

Loading thumbnail…

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.

RRubens

83% match

Loading thumbnail…

Notes Frequency of a Song

This bar chart shows the frequency of each musical note in a MIDI song, "Poor Little Fool," from the Million Song Dataset, specifically track #12. The data is loaded via `d3.csv` and processed with a custom module that sorts notes by octave and pitch. The visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and renders SVG rectangles with a warm orange fill on a peach background. The chart includes axes generated with `d3.axisLeft` and `d3.axisBottom`.

RRubens

75% match

Loading thumbnail…

scatter plot

This scatter plot displays the duration of 100 popular songs on the y-axis against their titles on the x-axis, using a point scale for song names and a linear scale for duration. Each song is represented by a steel-blue circle with a radius of 10 pixels. The visualization loads data from a CSV file via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.scalePoint`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG output is generated through D3 v5, with margins applied to position the chart within a 960-by-1200 pixel canvas.

GGogineni44

68% match

Loading thumbnail…

music vis

This interactive scatterplot maps Spotify track attributes against one another, letting users select any two numeric columns from the dataset to compare on the x- and y-axes. The visualization updates dynamically through D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering circles positioned by the chosen metrics. The code assigns CSS classes to each point based on a track genre field, although the dataset’s example rows lack a genre column, so the legend and color-coding rely on that optional data. The SVG plot includes labeled axes and a title reflecting the current variable pair.

Aa15923647

68% match

Loading thumbnail…

Scatter Plot

A scatter plot displays metric1 against an index for each data point, with a circular tooltip revealing the ID on hover. Clicking a circle loads an audio file from a CSV of URLs and plays it through an HTML audio element. The visualization uses D3 v5's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` APIs, rendering two SVGs with mouse event handlers for interactive feedback.

KKan Kawabata

66% match

Loading thumbnail…

310553047-HW1

This interactive scatter plot visualizes a Spotify dataset, allowing users to compare any two musical attributes by selecting them from dropdown menus for the x- and y-axes. The visualization shows how the chosen variables correlate across tracks, with each data point represented as a semi-transparent blue circle. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` APIs to load data, render the SVG, and update the chart dynamically. Axis labels and gridlines are included, and the plot refreshes whenever the user changes the selected attributes.

Yyujun12689

66% match