Giter VIP home page Giter VIP logo

dapl_streamlit's Introduction

Streamlit Demo App

drawing

This repository contains a Spotify + Streamlit dashboard built as an example of cloud data visualization for the Data Analytics Project Lab at Dartmouth College.

Feel free to check out the live dashboard here!

Author: Spencer Bertsch
Dartmouth College
Spring 2022

Big thanks to my pal Mike Koshakow for letting me share his music preferences with the world!

How to create a dashboard using your own spotify data (Simple)

  1. Clone this repository locally.
  2. Request your data from Spotify using this link. Be patient, this can take a few days.
  3. Once you receive your data from Spotify, place the important JSON files into the MyData directory. Spotify will give you lots of data including billing information, but you only need the following files:
  • SearchQueries.json
  • YourLibrary.json
  • StreamingHistory.json
    Note you might have more than one StreamingHistory.json file. That's okay, just copy all the streaming history files into the MyData directory.
  1. Set the DASHBOARD_SIMPLE variable to True at the top of the streamlit_main.py script (line 29).
  2. Once that's done you will have all the data you need! Last step is to run the dashboard using the following command:
  • $ streamlit run streamlit_main.py After that the dashboard should open in your default web browser.

How to create a dashboard using your own spotify data (Advanced)

If you want to see this spotify dashboard reflect your own music taste, you will need to follow these steps:

  1. Clone this repository locally.
  2. Request your data from Spotify using this link. Be patient, this can take a few days.
  3. Once you receive your data from Spotify, place the important JSON files into the MyData directory. Spotify will give you lots of data including billing information, but you only need the following files:
  • SearchQueries.json
  • YourLibrary.json
  • StreamingHistory.json
    Note you might have more than one StreamingHistory.json file. That's okay, just copy all the streaming history files into the MyData directory.
  1. Next you will need to create a spotify developer account using this link, and create a new project. After you create the project, you will need to copy the Client-ID and the Client-Secret into a new .json file called spotify_app_credentials.json.
  2. Your spotify_app_credentials.json file should contain a single line in the following format: {"Client-ID": "XXXX", "Client-Secret": "XXXX"}. Place your new json file into the directory one level above the working directory of this project alongside DAPL_Streamlit.
  3. Just a few more steps! Now run the get_audio_features.py script by running the following command:
  • $ python3 get_audio_features.py
    This script can take a while to run depending on how many songs you've listened to in the past year. For a listener with 24k songs streamed it took about an hour. The limiting factor here is not the machine running the script, but the response time for the APIs returning all the data we need to collect.
  1. Once that's done you will have all the data you need! Last step is to run the dashboard using the following command:
  • $ streamlit run streamlit_main.py After that the dashboard should open in your default web browser.

How to run this code

If you want to run this dashboard locally, simply follow these steps:

  1. Clone this repository locally.
  2. Create a new Conda environment by running the following command:
    1. $ conda create -n streamlit-demo python=3.8
  3. Activate the new environment by running the following command:
    1. $ conda activate streamlit-demo
  4. Install the necessary dependencies by navigating to the working directory and pip installing the required libraries by running the following commands:
    1. $ cd ~/DAPL_Streamlit
    2. $ pip install -r requirements.txt
  5. Run the streamlit_main.py file to create a local server and see the dashboard running on your computer.
    1. $ streamlit run streamlit_main.py
  6. That's it! After that the dashboard should open in your default web browser.

Resources

As mentioned at the bottom of the dashboard itself, I was inspired to make this dashboard by my friend Anne Bode who did a similar project using Tableau, outlined here.

Like Anne, I also found this article by Steven Morse very helpful when learning how to use Spotify's many APIs to get the information I wanted.

Thanks for viewing this dashboard! If you enjoy it, please give the repository a star โญ and feel free to build upon the code in this project to make a fun, music-inspired dashboard of your own!

Image Sources

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.