https://github.com/ejw-data/plotly-dashboard-nba-championship
Simple dashboard utilizing the NBA api to obtain play-by-play data that is filtered and aggregated for several plotly charts. The dashboard uses several controls on the page for filtering.
https://github.com/ejw-data/plotly-dashboard-nba-championship
bootstrap5 flask-application html-css-javascript plotly proxy-server
Last synced: about 1 year ago
JSON representation
Simple dashboard utilizing the NBA api to obtain play-by-play data that is filtered and aggregated for several plotly charts. The dashboard uses several controls on the page for filtering.
- Host: GitHub
- URL: https://github.com/ejw-data/plotly-dashboard-nba-championship
- Owner: ejw-data
- Created: 2022-06-29T14:26:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-18T16:52:05.000Z (almost 3 years ago)
- Last Synced: 2025-01-22T06:47:20.700Z (over 1 year ago)
- Topics: bootstrap5, flask-application, html-css-javascript, plotly, proxy-server
- Language: JavaScript
- Homepage:
- Size: 829 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# plotly-dashboard-nba-championship
Author: Erin James Wills, ejw.data@gmail.com
Photo by [Kenny Eliason](https://unsplash.com/@neonbrand?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/nba?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
## Overview
Simple dashboard utilizing the NBA api to obtain play-by-play data that is filtered and aggregated for several plotly charts. The dashboard uses several controls on the page for filtering.
## Github Pages
Note: Proxy server needs to be running for the page to be viewable
https://ejw-data.github.io/plotly-dashboard-nba-championship/
## Technologies
* HTML/CSS/JS
* Plotly.js
* Flask Proxy Server
## Data Source
Below is an example of how to form the api endpoint. The information is specific to a particular game and the game id comes from https://www.nba.com/. This information is often found in the url of the box score page.
`date` = '20220602'
`game_id` = '0042100401'
`quarter` = 1
url = `https://data.nba.net/prod/v1/`< date >`/`< game_id >`_pbp_`< quarter >`.json`;
**Update**
The api was replaced with another api but the new api does not work unless a proxy server modifies the headers. The new url information is as follows:
`game_id` = '0042100401'
`proxyServer` = 'http://localhost:5000/'
url = < proxyServer >`https://cdn.nba.com/static/json/liveData/playbyplay/playbyplay_`< game_id >`.json`
Note: The proxy server is a flask app run locally.
## Setup and Installation
1. Clone the repo to your local machine
1. Open repo folder in an IDE like VSCode
1. Using a virtual server like the VSCode extention LiveServer
1. Run `index.html`
1. Due CORS block, you may need to apply a method to insert the correct headers so the api will load.
* Option 1: Run a browser extension to bypass these restrictions. I have been using the Chrome extension called "Moesif Origin & CORS Changer". This extension has a toggle button to turn it on and off easily. The page should display at this point assuming you have changed the `proxyserver` variable in `app.js` to "".
* Option 2: This is how the repo is currently setup to run - First run the flask proxy server by navigating to the proxy folder in the repo in a terminal and running the flask server by typing `python proxy.py`. Now when you open the index.html, it should load the data and graphics.
## Example
