Song's Note: Start & End

100%

Song's Note: Start & End - With choice

✓ Published1🌍 Public

Last edited Nov 22, 2018

Created on Sep 29, 2018

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.

AI-generated description

The data comes from the Million Song Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

88% match

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

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

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

Untitled

This interactive parallel coordinates chart visualizes audio features of songs by selected artists, including energy, liveness, valence, speechiness, and danceability. Users click buttons to load CSV data for different artists, which triggers a D3 v6 animation that redraws the plot lines. The SVG rendering uses d3.scaleLinear for axes, d3.scalePoint for positioning, and d3.scaleOrdinal to color lines by playlist genre, with a legend displayed on the right. The data is sourced from GitHub-hosted CSV files.

Vvedant74

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

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

music2

This interactive bar chart explores a dataset of music tracks, showing the average popularity of songs grouped by a selected attribute. Users can switch the grouping variable via dropdown menus, and a scrollable overview bar allows panning through many categories. Built with D3.js and Vue, the visualization uses `scaleBand` and `scaleLinear` for positioning and `axisBottom`/`axisLeft` for axes, with drag handling to update the visible range. Data is loaded from a CSV file.

Aa15923647

71% match