Who's Featured Who?

In hip-hop music, there are many collaborations between artists, and I decided to undertake this project with the idea that visualizing the relationships among them would provide insights that could not be obtained simply by looking at their discographies.

Here, I decided to focus on the front-end side of the application and narrowed down the project scope to "Converting the minimum necessary data (artist name, who has been guest artists in the past for them, ID associated with the artist) to a graph model and layouting the relationships as nodes and edges in a diagram."

After some research, I chose React.js for the base UI, React Flow for a graph diagram UI, Dagre for layouting, and Vite for building.

At first, I was trying to show the relationships between 100 artists at the same time in a diagram, yet there was not such a graph model that can visualize and layout that many nodes in a graph for sure.

After some try and error, I created a recurring function that gets an artist ID as its argument and fabricate a list of artists that both includes the artist associated with the id passed as an argument and all artists that the artist has featured before. The recurring is limited to occur only two times so that the final diagram does not get too hard to see.