How to Use

This application let’s compare similarity or differences in taste of music between two users. 2 users can individually select artists and genres to add it to a common area where the users can similarity or the differences in their music taste.


1. The user can select the color he wants to display on the panel.

2. The user can type his name at the top of the page for reference.

3. The user can choose to see the top 10 by decade or select an artist or genre individually as well.

4. If the above selection made is top 10, the user can see a list of artists and genres by the decade he selects or by all.

5. If the above selection made is individually, then the user will be able to select a particular artist or a genre.

6. Once the user selects to choose an artist/genre individually, the user can select to see results by genre or by artist.

7. Once the user starts to type, there will be suggestions based on what the user types.

8. Once he selects a option in the list and selects on "Add to my Mix", the selected item gets added to the mix.

9. The user can also to choose to see the artists related to the genre or the genres of that artist in the search box.

10. The my mix contains the list of genres or artists selected by the user.

11. The user can select an artist on the list to view more information about the user in the information bar.

12. The user can also remove the item by clicking on the cancel button in the left corner.

13. The information bar provides information about the selected artist.

14. Expanding the bar opens a pop up which will give more information about the user.


1. The markers on the map represent the artists in the list as per their location.

2. The markers on clicking, will open a pop up giving more information about the user.

3. The color code for the markers represent the user who selected the arist.


1. The nodes on the force directed graph represents artists, link between two or more artists indicates that the artists are related by their genre or simply similar artists.

2. The clusters formed are basically artists belonging to same genres

3. The clusters as well as the individual nodes can be clicked and dragged to reposition, this way the comparision gets easier.


1. The genre timeline is a streamgraph that shows the popularity of the genre from year 1900 to date, the thickness of the stream is a measure of the popularity of a particular genre.

2. The genres can be selected by decade to appear on the timeline, which allows for comparision of the top genres in a particular decade.


1. The artist timeline is also a streamgraph that shows the hottness of the artist in his entire music career, 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.

2. The artists can be added and removed from the timeline as per the user's choice.


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.

Softwares/libraries used:

1. D3.js - A Javascript library to visualize data.
2. Leaflet - A Javascript library for building interactive maps.
3. Mapbox - A Javascript library that provides layers that can be used on the map.
4. LESS CSS - A Javascript library to write efficient CSS.
5. XAMPP - A free, easy to install Apache distribution containing MariaDB, PHP, and Perl.


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

2. The Spotify API was also used to fetch images for artists for representing them on our visualizations.

3. The first process relating to data was to study how the data is structured and what API calls were defined for us to make and fetch data.


1. The data was split into Artist, Genres, Song and Playlist methods.

2. So to use the data initially, we had to decide upon what data points we need for the interactions and various methods used in the application.


1. To avoid redundant calls to the API, analysis was done as to what data is static throughout the visualization and for these data points static data was created.

2. A single script was run and data was fetched. The data was stored locally to be used in the visualization.

3. Some such data points were :

  • The top 10 Artists for each decade.

  • The top 10 Genres for each decade.

  • The artist images for the top 10 in each decade.

  • The genre scores for genres in the top 10 of each decade.

  • The genre list.

4. Such static data points decision was essential to reduce the number of calls made to the API and also to reduce the eventual latency that may be involved with each call.


1. The next set of data needed was a set of data that is fetched based on a particular choice made by the user.

2. So for such data points, static storage will not be efficient as the data to be pre fetched might be more than what we really are going to utilize.

3. Identifying such data points and querying the API to fetch appropriate data made it efficient because the query will be very specific to the user’s choice.

4. Some such dynamic data points are :

  • To get a range of artist data for the map and pop ups.

  • To see the performance of a selected genre over the years.

  • To identify the relation between artists on a Force Directed Graph.


  • FOR MAP:

    • 1. The data that is handled on the map is mainly for artists.

    • 2. The data required for that was about all details for the artists.

    • 3. This data was limited to essential data that can be viewed on a small pop up.


    • 1. The data needed for FDG was also mainly in the artist level but it also involved the genre as it groups artists by genre.

    • 2. The data was fetched for artists and computations were done on this data to come up with the visualization.

    • 3. The data needed for the timeline spread from 1900 to 2014.

    • 4. So the genre or artist to be represented was run on computation ranging between these years studying the performance in each well-defined intervals.



    • 1. The data for FDG is taken for each artist on the basis of similarity.

    • 2. The artist that is added is checked with the already existing artists.

    • 3. A computation is done to return the similarity status.

    • 4. Depending on the similarity status, links are established between the artists.

    • 5. The artists are linked by genres.

    • 6. The artist nodes are given the image of the artist.

    • 7. In the initial phase, there were multiple links and some artists who belonged to the same genre were not close to each other. All that is taken care by keeping the genre as the center point of connection for the FDG.



      • 1. The data fetched for representing the artist over a timeline is the name of the artist, the career span of the artist and the hotttnesss and familiarity ratings and scores.

      • 2. The computation is done on hotttnesss to receive a score for the artist to be represented on the timeline.


      • 1. The data for the genre is fetched dynamically. The genre name and a score for the genre is fetched for every decade.

      • 2. The score was fetched on a series of computations done on the following parameters :

        • Hitpoint – Number of times the genre appeared in the top 100 artists list.

        • Average of the hitpoint.

        • Hotttnesss.

        • Aggregate of hotttnesss.

      • 3. The other computation that is performed is by fetching top artists of that genre in a given year and comparing where they stand in the overall view.

      • 4. All these computations is used to give a rating to the genre.

    • For designing the graphs, we came up with 3 designs :

      • 1. Swim lane : This type of graph had a drawback in not showing the actual data on the familiarity of an artist/genre over years..

      • 2. Line graphs : This type of graph was not efficient with lines over lapping and only one angle to view the data represented.

      • 3. Stream graph : This was the design adopted as it showed the year wise data for each genre/artist and the familiarity of the artist/genre over years.

Key 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. Rock was a kind of dominating and most popular genre from the 1950’s within a short span.
3. Recent artists like Justin Beiber have the highest hottness.
4. Older genres which made to the top were popular by just one artist where as more popular genres had more number of artists.
5. Comparatively very less musicians that made to the top 10 from India were in the mid 1960’s and 1970’s , in the recent decades it is the artists from the US and UK hitting the top charts.
6. Two users who are teens have more connections on the force directed graph, they are likely to pick artists from genres like pop, teen pop and edm etc.



  • Gautam Krishnan
  • Srivatsan Murali
  • Sumanth Pandugula
  • Vivek Krishnakumar