Web app for visualizing the network graph of Spotify related artists. Try it out at vibe-graph.com
Enter the name of an artist into the text box at the top (e.g. "The Beatles") and click the search button. The first artist found in the search result and their related artists (i.e. similar artists) will appear as nodes and edges. Clicking on a node expands the graph by generating that artist's related artists. If a related artist's node is already generated, then just the connecting edge will be generated.
You can search for multiple artists and reset the graph to a blank slate at any time. Nodes can be dragged around to shift the graph.
You'll need Node and Git installed on your machine. Optionally, install and run a Redis instance to use as a cache.
To use the app locally, first clone the repo
git clone https://github.com/cjdellomes/vibe-graph/
Next, you'll need to create an app from your Spotify dashboard in order to get the necessary credentials to use the Spotify API.
Once the app is created in the Spotify dashboard, create a config.js
file in the /vibe-graph/
directory. Place the client ID and client secret provided by Spotify in a module exported object. The config.js
file should be exactly as below, but with the Xs replaced with your credentials.
const config = {
development: {
clientID: 'XXXXXXXXXX',
clientSecret: 'XXXXXXXXXXXX',
},
};
module.exports = config;
Now, use node to install the necessary packages and build the app.
npm install
npm run build
Either start the app and navigate to localhost:3001
npm run start
or run it in development mode (refreshes on changes to the code) and navigate to localhost:3000
npm run dev
Run tests and generate code coverage reports
npm run test
npm run coverage
All the artist and related artist data comes from the Spotify Web API.
The frontend was built using React while the backend was created with Express.
The graph is rendered using vis.js and, more sepcifically, the react-graph-vis npm package.
Partially inspired by the Wikipedia Map project by Luke Deen Taylor.