Rave On
Meet your taste for music!

Overview

Rave On enables two users to compare similarity or differences in taste of music between them. Two users can individually select artists and genres and add them their "My Mix". This also adds their selections to a common area where the users are presented with a visualized version of their taste in music, that allows for comparision.

This application was built to be used on a mega touchscreen display of 8196px x 2188px resolution at the Electronic Visualization Laboratory at the University of Illinois at Chicago.

The two user panels on the sides, and a shared common area in the center.

Softwares/libraries used:

  • 1. HTML, CSS and Javascript - The regular stuff we use to build awesome web applications.
  • 2. D3.js - A Javascript library to visualize data.
  • 3. Leaflet.js - A Javascript library for building interactive maps.
  • 4. Mapbox.js - A Javascript library that provides layers that can be used on the map.
  • 5. LESS CSS - A Javascript library to write efficient CSS.
  • 6. XAMPP - A free, easy to install Apache distribution containing MariaDB, PHP, and Perl.
  • 7. PHP, MySQL, PHPMyAdmin
  • 8. Sketch - The #1 tool for UI and Wireframing.
  • 9. Brackets - Code editor.

How to Use

Common Area:

  • The common area contains the Map, Force Directed Graph (FDG) and the Timeline sections.
  • 1. Map:
  • a) The markers on the map represent where the artists are from.
  • b) The markers on clicking, will open a pop up giving more information about the artist.
  • c) The color code around the markers correspond to which of the two users added the arist to their mix.
  • 2. Force Directed Graph (FDG):
  • a) The nodes on the FDG represents artists. A link between two or more artists indicates that the artists are related by their genre or simply similar artists.
  • b) The clusters seen on the FDG are artists belonging to same genres.
  • c) The clusters as well as the individual nodes can be clicked and dragged to reposition, which facilitates easier comparision.
  • 3. Timeline:
  • a) The Timeline has two tabs: Artists and Genres.
  • b) The genre timeline is a streamgraph that shows the popularity of the genre from year 1900 to date, and the thickness of the stream is a measure of the popularity of a particular genre.
  • c) The artist timeline is also a streamgraph that shows the 'hottness' of the artist in their entire music career, and the thickness of a stream is a measure of the 'hottness' for the particular artist. The stream starts and ends according to the artist's career in music, this gives more insight into artists from different decades.
Top: Timeline shown via Steamgraph; Bottom-Left: Map with artists; Bottom-Right: Force Directed Graph

Panels:

  • The two users get one panel each, with one at the left extreme and one at the right.
  • 1. Each of the two individuals can pick from one of the 10 available colors they want and all their contribution to the shared space change to that color.
  • 2. Users can type their name at the top of their panel for reference; This also helps in taking screenshots and saving for future.
  • 3. Artist or genres can be added individually. If one cannot remember arists/genres right away, they can choose to see the top 10 by decade.
  • 4. One can drill down further by searching for an artist, looking at their generes, and selecting one of those generes to view other artists in them.
  • 5. Once an artist/genre selection has been made, the user can select to see results by genre or by artist.
  • 6. Autocomplete suggestions are offered as one starts to type into the text box.
  • 7. When an item is selected and "Add to my Mix" is clicked, the selected item gets added to the "My Mix" section below.

Source Code, Installation and Data

1. Setting up the server:

  • 1. Download the source code which contains the .js, html and the image data for the artists and genres.
  • 2. Install WAMP to use as the local server for running the application in the local system.
  • 3. Copy the source code folder into C:\wamp\www folder which makes the application accessible from the local server setup by wamp.
  • 4. The source code folder pasted can be tested by opening localhost in your browser.

2. Data

  • The main data source for this application is The Echonest API. All data was fetched using the authorization provided by the API to use their database.
  • We also used the Spotify API was also used to fetch images for artists for representing them on our visualizations.

3. Understanding the Data

  • 1. The data was split into Artist, Genres, Song and Playlist methods. To use the data initially, we had to decide upon what data points we needed for the interactions and various features used in the application.
  • 2. To avoid redundant calls to the API, we analyzed what data is static throughout, and we created static data points for this.
The Echonest API.
  • 3. Some such data points were: Top 10 artists for each decade, top 10 genres for each decade, artist images for the top 10 in each decade, the genre list and their scores for the top 10 of each decade.
  • 4. Such static data points decision were essential to reduce the eventual latency that may be involved with each call.
  • 5. The next set of data needed was a set of data that is fetched based on a particular choice made by the user.
  • 6. Some such dynamic data points were: Getting a range of artist data for the map, performance of the selected genre over the years, identifying the relation between artists on the Force Directed Graph.
All the static data (from top): 1. Top 10 per decade, 2. Images for top 10 in each decade, 3. For the initial FDG.

Key Findings and Scope of the Application

Findings

  • 1. Most of the data is from the US and UK, there is little or no data from the continents like Africa, this can be seen in the top 10 artists in each decade representation on the map.
  • 2. From within a short span, Rock was dominating and was most popular genre from the 1950's.
  • 3. Recent artists like Justin Beiber have the highest "hottness".
  • 4. Older genres which made to the top were popular by just one artist. On the other hand, more popular genres had more number of artists.
  • 5. Many musicians made to the top 10 from India in the mid 1960s and 1970s, but in the recent decades it is the artists from the US and UK hitting the top of the charts.
  • 6. Users who were teens had more connections on the force directed graph, as they were likely to pick artists from genres like pop, teen pop and edm etc.

Team

Gautam Krishnan
Vivek Krishnakumar
Sumanth Reddy Pandugula
Srivatsan Murali

Demo:

Made with loads of ♥ and sweat for CS424 - Visualization and Visual Analytics, at University of Illinois at Chicago. Thanks to Prof. Andrew Johnson.