Music Visualizer

What: Interactive JavaScript-driven music visualizer

Background: In 2011, Rolling Stone Magazine published an article called “500 Greatest Songs of All Time”. This project is an interactive visualization of the top 50. It uses D3.js, which is a JavaScript library developed primarily for the creation of data visualizations.

Strategy: 5 buttons were created. The “songs” button displays the songs by ranking. Each vertical bar is a song. The taller the bar, the longer the song. The bar’s color indicates what genre the songs is in. Album art is displayed when song bar is hovered.

The “sort” button orders the songs from shortest to longest.

The “visualizer” button has the bars dance along with the current song.

The “genre” button displays a donut chart showing the ratios of genres.

The “map” button displays where the top 10 songs were recorded on an interactive map.

The bar next to the album art displays how much of the song has played.