Song's Note: Start & End

100%

Song's Note: Start & End

✓ Published1🌍 Public

Last edited Nov 14, 2018

Created on Sep 22, 2018

Forked from Song's Note Zoom Scatter Plot

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.

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 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.

RRubens

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

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

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

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

71% match

Loading thumbnail…

Spotify_D3ScatterPlot

This animated scatter plot visualizes Spotify listening habits, showing the relationship between total songs played and several rotating attributes including average listening time, new artists discovered, skipped songs, and mood score. Built with D3.js 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a CSV file loaded via `csv()`. The visualization cycles through four x-axis variables every two seconds using `setInterval`, redrawing circles with updated `cx` positions as the x-axis changes.

Cchandanamahesh0215@gmail.com

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

66% match

Loading thumbnail…

SPOTIFY - Scatter Plot

This interactive scatter plot visualizes Spotify listening habits, mapping metrics like average listening time, total songs played, and mood score. Users switch X and Y axes via dropdown selectors, while circle color encodes Mood_Score through d3.interpolateTurbo, and size encodes New_Artists_Discovered via d3.scaleSqrt. Hovering reveals a tooltip and focus ring. The D3 v7 SVG chart includes gridlines, axes, transitions on points, and a custom CSV loader that flattens single-line data.

Cchandanamahesh0215@gmail.com

65% match