Spotify Graph Dashboard (Part II): Creating an Interactive Python Dashboard with Streamlit using TigerGraph Spotify Data

Creating a Python Dashboard of Spotify Data using Streamlit, pyTigerGraph, and TigerGraph CLI

Image from Pixabay

Note: This is part of a series on visualizations of Spotify Data. Check out the data used here: https://shreya-chaudhary.medium.com/spotify-graph-dashboard-part-i-creating-a-spotify-graph-with-tigergraph-af97c436e538

Overview

Objective

This blog will walk you through how to create a simple dashboard in Streamlit using TigerGraph data. You’ll learn how to use Streamlit charts and widgets to activate queries pulling TigerGraph data. We’ll create this fully in Python, so no experience in HTML or JS will be needed!

Tools

• TigerGraph Cloud: TigerGraph Cloud is a way to host your TigerGraph graph for free. It also offers GraphStudio where we can see and create our graph without code!
• pyTigerGraph: This is a Python library which we can use to interact with our graph via Python.
• TigerGraph CLI: This tool allows you to manage your graph from the command line. We’ll use this to start our graph!

Part I: Prepare your Graph

In the past blog, we set up our graph and added all the queries. We’re going to use that data and those queries now

Step I: Start your Graph

First, let’s make sure that our graph is ready to be queried. One way to do this is by using a new tool, TigerGraph CLI, created by Mohamed Zrouga.

Note: We’ll install it via Homebrew, so it only will run for Mac and Linux. Find other installation details in the docs: https://developers.tigergraph.com/integration/tigergraph-cli

If you want to start your graph via TigerGraph Cloud, go to https://tgcloud.io/, click the “Solutions” tab, then click “Application Operations” and press “Start” from the dropdown.

First, make sure you have tgcli installed and up to date. To install it, type this into the terminal:

brew install tgcli

And if you already have it installed, ensure you have the latest addition by typing:

brew upgrade tgcli

Then, if you type in tg -v, your current version and the most recent version should be the same.

Make sure the version install and the available version are the same!

Next, you’ll need to connect to your account. To do so, type this into the terminal:

tg conf tgcloud

It will then prompt you for your username and password. After you enter it, it will log you in.

Note: For this, you must have signed up using an email and password.

Logging in via the terminal

Great! Now let’s look at our solutions.

tg cloud list

Solution Ready

My solution is currently ready, but if yours is stopped, you’ll need to start it. To do this, type the following, replacing ID_OF_SOLUTION with the id you have above.

tg cloud start -id="ID_OF_SOLUTION"

And, after letting it process, your solution will be ready! Now you’re ready to get started!

Step II: Install Libraries

Next, create a directory and file on your computer.

mkdir SpotifyStreamlitDash
cd SpotifyStreamlitDash
touch spotify_streamlit.py

You’ll then need to install all of the libraries used. This will include pyTigerGraph, Streamlit, flat_table, and pandas.

pip install pyTigerGraph
pip install streamlit
pip install flat_table
pip install pandas

Perfect! Now, open the file you just created and import the libraries at the top.

import streamlit as st
import pyTigerGraph as tg
import flat_table
import pandas as pd

Step III: Create a TigerGraphConnection

Fantastic! Finally, you’ll need to create your TigerGraphConnection.

conn = tg.TigerGraphConnection(host="https://spotifygraph.i.tgcloud.io/", password="tigergraph", graphname="SpotifyGraph")
conn.apiToken = conn.getToken(conn.createSecret())

Here, make sure to replace your spotifygraph with your subdomain and tigergraph with your password.

Now we’re ready to go! Let’s start visualising!

Part II: Create the Streamlit Dashboard

Section I: General Information

Let’s start off by creating a title. In streamlit, just write st.title to create this!

st.title('TG + Streamlit Spotify Dash')

Great! Now, let’s create the first section: General Information. Here, we’ll start off by creating a header.

st.header('General Song Details')

Next, we’ll run the getSongs query. We’ll format the query results into a dataframe then normalise it using flat_table.

results = conn.runInstalledQuery("getSongs") # Grab songs
df = pd.DataFrame(results[0]["Seed"]) # Into DF
df = flat_table.normalize(df) # Cleaning up the data

Finally, let’s create our first graph! We’ll be using the Altair chart to create this.

c = alt.Chart(df).mark_circle().encode(x='attributes.instrumentalness', y='attributes.liveness') 
st.write(c)

Then we’ll add the resulting dataframe to the visualisation.

st.write(df)

Section II: Song Information

Perfect! Now let’s create another section. Here, we’ll create our next header for selecting song.

st.header('Select Songs by Range')

Let’s next add a slider which we can use to select songs by their id. We’ll use this to visualise songs in a range.

min_id, max_id = st.slider("Select IDs", 0, 20000, [500, 1000]) # ID Input

We’ll be able to filter our data based on the values of the slider.

data = df[df['index'].between(left=min_id, right=max_id)] # Filtering the data based on age input

Finally, we can create a few visualisations with the resulting data. Let’s add a bar chart and an area chart.

st.bar_chart(data['attributes.loudness']) # Bar chart
st.area_chart(data['attributes.popularity']) # Area chart

Lastly, we’ll add the data itself to be shown.

st.write(data)

Section III: Artist Search

The last section we’ll create will show songs created by a searched artist. Let’s create the heading first.

st.header('Search by Artist')

Next, let’s take in a text input.

user_input = st.text_input("Artist", "BTS")

We’ll now run the getSongsByArtist query and once again format it to a clean DataFrame.

results2 = conn.runInstalledQuery("getSongsByArtist", {"artist": user_input})
df2 = pd.DataFrame(results2[0]["@@songs"])
data2 = flat_table.normalize(df2)

Finally, let’s create a table. We can also add in a bar chart with popularity.

st.table(data2)
st.bar_chart(data2['popularity'])

Run your Dashboard

Finally, let’s run the file to create the dashboard! In your terminal, type:

streamlit run spotify_stream.py

In your terminal, you’ll get the links to your app both locally and in your browser. Click the local option.

Then, you’ll be able to see your dashboard!

Select Songs Section

Search by Artist Section

Part III: Congrat and Next Steps

Congrats! If you made it this far, you’ve learned about how to create a dashboard in Streamlit using TigerGraph data!

If you have any questions or run into any errors, feel free to ask in either the TigerGraph Discord or community page.

Join the TigerGraph Discord Server!

TigerGraph

Finally, if you want to create your own TigerGraph and Streamlit project, create it and share it! You can then get rewards from the Community Contribution Program.

Good luck!