GSoC ’23: Artist similarity graph

Project Overview

What’s better than listening to your favourite music? Discovering new pieces to add to your personal collection and play on repeat. This very idea is at the heart of the artist similarity graph project. The project helps the users to uncover the connections between artists with similar genres and styles. It does so by providing a search interface to the users, where they can find their favourite artist and then generate a graph of similar artists. An artist panel featuring information about the artist is also presented, it showcases artist’s name, type, birth, area, wiki, top track and album. Users can also play the tracks right on the page itself using BrainzPlayer.

It is a part of the ever expanding explore section of ListenBrainz. Giving users more options to find new pieces of music which they will treasure. The initial approach was to use artist images for building the graph but due to the unavailability of the images a text based graph was decided upon. A network graph with a central node of the selected artist and the links to the related artists is displayed. The artists are arranged based on their similarity score. Artists with higher scores being closer and lower being further. To convey the strength of relationships between the artists a divergent colour scheme is used. The user also has the ability to travel across the graph by clicking thorough the artists (nodes). It creates a intuitive and rewarding process for the user. An initial mock up of the project is shown below.

Technologies used:

1. nivo: For artist graph generation
2. React with Typescript: For web pages
3. Figma: Building mock ups and prototypes
4. Docker: To Containerize applications

Project Milestones

Normalizing data

The first challenge was to normalize the data before using it could be used to generate a graph. Given the non linear nature of the data, a square root transformation was used to transform the data. The result is a linear set of data which can be appropriately used in a graph.

Generating graph using nivo

Now, that data has been processed a graph is generated using the nivo framework. The project utilizes the network chart component in the nivo collection. A few modifications have been made to the network chart to better suit the project. By default, the network chart does not have any labels highlighting info about the node. Therefore, a new custom component had to be made. It displays the name of the artist in the middle and also truncates the name in case it exceeds a certain length.

Picture of regular graph.

Picture of custom component.

API endpoints

The project makes use of multiple API endpoints to collect varied data. The complete list of these endpoints is shown below:

1. artist-similarity endpoint. Provides the data for the similar artists for a given artist.

https://labs.api.listenbrainz.org/similar-artists/json?artist_mbid={artist_mbid}&algorithm=session_based_days_7500_session_300_contribution_5_threshold_10_limit_100_filter_True_skip_30

2. artist lookup: To search the list of artists from the MusicBrainz database.

https://musicbrainz.org/ws/2/artist/?query=artist:{artist_name}&fmt=json`

3. Multiple endpoints are used in the artist info panel.

   i. Artist info from MusicBrainz lookup

   https://musicbrainz.org/ws/2/artist/{artist_mbid}?inc=aliases
   

   ii. Wikipedia-extract which is locally stored at MusicBrainz

   https://musicbrainz.org/artist/{artist_mbid}/wikipedia-extract
   

   iii. Artist-profile link at MusicBrainz.

   https://musicbrainz.org/artist/{artist_mbid}
   

   iv. ListenBrainz API for top recordings for a given artist

   https://test-api.listenbrainz.org/1/popularity/top-recordings-for-artist?artist_mbid={artist_mbid}
   

Search and Artist panel

The project also incorporates an artist search and an information panel to add to the utility of the project. The following image shows the final project.

The search features shows up as a drop down menu which can be used to search and select the desired artist. An additional option to modify the graph size also is also presented to set the number of similar artists to the user’s preference.

The information panel highlights important features about the artist like name, type, Wikipedia article, MusicBrainz profile link, top recording and album. The user can also use the BrainzPlayer to play the top recording or the track for the selected artist.

Current state

The project was able to achieve almost all of the requirements provided except a few. The BrainzPlayer can be a little tricky at times as some the tracks may be not show up and may require two tries from the user for the first time. In addition to this, the design of the website cannot perfectly match the mock ups due to different layout structure being used across the site and to keep the website consistent. Integration into the code base is good enough for the project to run smoothly but a few changes may be made to optimize it further. Top album feature may not be always accurate because of the lack of a dedicated endpoint for it and as a workaround the album of the top track is shown on the page. The PR for the project can be accessed here.

My learnings

It was my first project with react and learning typescript had a bit of a learning curve but it was a worthwhile experience. Working with nivo library was a bit difficult as well due to a lack of tutorials for it. However, I was able to get a lot of help from their documentation. I was also introduced to many new technologies as well, docker, figma and flask. All of which added to the quality of my experience.

The project also gave me an opportunity to apply a lot of the concepts I had learned in my coursework. I want to thank the amazing MetaBrainz community for always lending a helping hand during my time as a GSoC contributor. I feel I will be taking a lot of things forward with me in life and it was truly an enriching experience for me.