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.
FORCE DIRECTED GRAPH
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.
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.
UNDERSTANDING THE 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.
STATIC DATA POINTS
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.
DYNAMIC DATA POINTS
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.
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.
FOR FDG AND TIMELINE:
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.