Skip to content

Commit dd42b2b

Browse files
author
Lysandre Costes
committed
Add GitHub Pages deployment workflow
1 parent 93782a8 commit dd42b2b

3 files changed

Lines changed: 79 additions & 84 deletions

File tree

‎.github/workflows/deploy-pages.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Deploy website to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
deploy:
19+
runs-on: ubuntu-latest
20+
environment:
21+
name: github-pages
22+
url: ${{ steps.deployment.outputs.page_url }}
23+
steps:
24+
- uses: actions/checkout@v4
25+
26+
- uses: actions/configure-pages@v4
27+
28+
- uses: actions/upload-pages-artifact@v3
29+
with:
30+
path: website
31+
32+
- id: deployment
33+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 46 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,44 @@ Interactive data-visualization project for **COM-480 (EPFL)** exploring how NBA
88

99
## Quick start — run the website
1010

11-
The site is a **static** front end (`website/`). It loads JSON from `website/data/` and must be served over HTTP (opening `index.html` directly will block `fetch` / `d3.json`).
12-
13-
1. Clone the repository and go to the project root:
11+
The site is a **static** front end in `website/`. It loads JSON via `fetch` / `d3.json`, so serve it over HTTP (a `file://` URL will not work).
1412

1513
```bash
1614
git clone https://github.com/com-480-data-visualization/com-480-project-pff.git
17-
cd com-480-project-pff
18-
```
19-
20-
2. Start a local server from the `website` folder:
21-
22-
```bash
23-
cd website
15+
cd com-480-project-pff/website
2416
python3 -m http.server 8000
2517
```
2618

27-
3. Open [http://localhost:8000](http://localhost:8000) in a browser.
19+
Then open [http://localhost:8000](http://localhost:8000).
2820

29-
**Alternatives**
21+
No build step. D3, Three.js, and fonts are loaded from CDNs in `index.html`.
3022

31-
```bash
32-
# Node (npx, no install)
33-
npx --yes serve website
23+
### GitHub Pages
3424

35-
# PHP built-in server
36-
cd website && php -S localhost:8000
37-
```
25+
The site is hosted on GitHub Pages.
3826

39-
No build step or package manager is required for the website. Dependencies (D3, Three.js, Google Fonts) are loaded from CDNs in `index.html`.
27+
1. Push to `main` (workflow in `.github/workflows/deploy-pages.yml` publishes the `website/` folder).
28+
2. On GitHub: **Settings → Pages → Build and deployment → Source** → choose **GitHub Actions**.
29+
3. After the workflow succeeds, open
30+
**[https://com-480-data-visualization.github.io/com-480-project-pff/](https://com-480-data-visualization.github.io/com-480-project-pff/)**
4031

4132
---
4233

4334
## Intended usage
4435

4536
The narrative scrolls through six analytical views:
4637

47-
| Section | What it shows |
48-
|--------|----------------|
49-
| **Hero** | 3D particle court — sample of shots over time |
50-
| **Expected value** | Court heatmap: points per attempt, FG%, or volume |
51-
| **League adaptation** | Season-by-season shot maps vs league average + trend lines |
52-
| **Team DNA** | Zone profiles: team vs league vs champion |
53-
| **Player fingerprint** | Radial chart of zone frequency and efficiency |
54-
| **Player movement** | Stacked zone shares across team stints |
55-
| **Clutch** | Last-5-seconds Q4 shot locations vs rest of game + player scatter |
38+
39+
| Section | What it shows |
40+
| ---------------------- | ----------------------------------------------------------------- |
41+
| **Hero** | 3D particle court — sample of shots over time |
42+
| **Expected value** | Court heatmap: points per attempt, FG%, or volume |
43+
| **League adaptation** | Season-by-season shot maps vs league average + trend lines |
44+
| **Team DNA** | Zone profiles: team vs league vs champion |
45+
| **Player fingerprint** | Radial chart of zone frequency and efficiency |
46+
| **Player movement** | Stacked zone shares across team stints |
47+
| **Clutch** | Last-5-seconds Q4 shot locations vs rest of game + player scatter |
48+
5649

5750
**Interaction tips**
5851

@@ -66,102 +59,71 @@ The narrative scrolls through six analytical views:
6659

6760
## Technical setup
6861

69-
### Requirements
62+
**Website**: static HTML/CSS/JS in `website/`. One shared module (`court.js`) plus one file per visualization. D3 v7 for charts; Three.js (ES module) for the hero section only.
7063

71-
| Component | Version / notes |
72-
|-----------|-----------------|
73-
| **Browser** | Modern evergreen browser (Chrome, Firefox, Safari, Edge) |
74-
| **Python** | 3.10+ — only needed to **regenerate** JSON from raw CSVs |
75-
| **Local HTTP server** | Any static file server (see Quick start) |
64+
**Data pipeline**: `preprocess.py` (Python 3.10+, `numpy`, `pandas` in `requirements.txt`) reads raw season CSVs and writes JSON to `website/data/`. Those JSON files are committed, so the site runs without reprocessing.
7665

77-
### Regenerating `website/data` (optional)
66+
To regenerate data:
7867

79-
Preprocessed JSON files are **committed** in `website/data/`, so you can run the site without raw CSVs. To rebuild them from source:
80-
81-
1. Download the raw shot data into `NBA_Shots_04_25/` (see [Data](#data)).
82-
83-
2. Install Python dependencies:
68+
1. Clone [NBA_Shots_04_25](https://github.com/DomSamangy/NBA_Shots_04_25) into `NBA_Shots_04_25/` at the repo root (`NBA_*_Shots.csv`).
69+
2. Install deps and run:
8470

8571
```bash
86-
python3 -m venv .venv
87-
source .venv/bin/activate # Windows: .venv\Scripts\activate
72+
python3 -m venv .venv && source .venv/bin/activate
8873
pip install -r requirements.txt
89-
```
90-
91-
3. Run preprocessing from the repository root:
92-
93-
```bash
9474
python preprocess.py
9575
```
9676

97-
This reads all `NBA_Shots_04_25/NBA_*_Shots.csv` files and writes aggregated JSON under `website/data/`. Expect several minutes and ~8 GB RAM for the full merge.
98-
99-
### Exploratory analysis
100-
101-
`eda.ipynb` documents early data exploration (pandas, matplotlib). Open with Jupyter:
102-
103-
```bash
104-
pip install jupyter matplotlib
105-
jupyter notebook eda.ipynb
106-
```
77+
Expect several minutes and ~8 GB RAM for the full merge.
10778

10879
---
10980

11081
## Repository structure
11182

11283
```
11384
com-480-project-pff/
114-
├── README.md # This file
115-
├── requirements.txt # Python deps for preprocess.py
116-
├── preprocess.py # CSV → website/data/*.json
117-
├── eda.ipynb # Exploratory analysis notebook
118-
├── NBA_Shots_04_25/ # Raw season CSVs (not in git — see Data)
119-
└── website/ # Static interactive site
85+
├── README.md
86+
├── requirements.txt
87+
├── preprocess.py
88+
├── eda.ipynb
89+
├── NBA_Shots_04_25/ # Raw CSVs (gitignored)
90+
└── website/
12091
├── index.html
12192
├── style.css
122-
├── js/ # One module per visualization
123-
│ ├── court.js # Shared court geometry & drawing
124-
│ ├── hero.js # Three.js hero (ES module)
93+
├── js/
94+
│ ├── court.js # Shared court geometry, pct(), shortTeam()
95+
│ ├── hero.js # Three.js (ES module)
12596
│ ├── value.js
12697
│ ├── revolution.js
12798
│ ├── team.js
12899
│ ├── fingerprint.js
129100
│ ├── player-evolution.js
130101
│ ├── clutch.js
131-
│ └── main.js # Scroll / nav behavior
102+
│ └── main.js
132103
└── data/ # Preprocessed JSON (committed)
133104
```
134105

135-
### Front-end stack
136-
137-
- **HTML / CSS / vanilla JavaScript** — no bundler; each viz is an async IIFE in its own file.
138-
- **[D3.js v7](https://d3js.org/)** — charts, scales, axes, transitions.
139-
- **[Three.js r160](https://threejs.org/)** — hero court (ES modules via import map).
140-
- **ES modules** only in `hero.js`; other scripts are classic scripts with global `Court` from `court.js`.
141-
142106
---
143107

144108
## Data
145109

146110
### Source dataset
147111

148-
We use [NBA_Shots_04_25](https://github.com/DomSamangy/NBA_Shots_04_25): NBA regular-season shot data from **2003–04 to 2024–25** (~4.4M attempts). Each row is one field-goal attempt with player, team, outcome, shot type, court coordinates, zone, and game-clock context.
112+
[NBA_Shots_04_25](https://github.com/DomSamangy/NBA_Shots_04_25): NBA regular-season shot data from **2003–04 to 2024–25** (~4.4M attempts). Each row is one field-goal attempt with player, team, outcome, shot type, court coordinates, zone, and game-clock context.
149113

150114
### What is hosted on GitHub
151115

152-
| Path | In repository? | Description |
153-
|------|----------------|-------------|
154-
| `website/data/*.json` | Yes | Aggregated data used by the website |
155-
| `NBA_Shots_04_25/*.csv` | **No** (gitignored) | Full raw CSVs (~GB) — clone separately |
156116

157-
To obtain raw CSVs:
117+
| Path | In repository? | Description |
118+
| ----------------------- | --------------- | ----------------------------------- |
119+
| `website/data/*.json` | Yes | Aggregated data used by the website |
120+
| `NBA_Shots_04_25/*.csv` | No (gitignored) | Raw season CSVs — clone separately |
121+
158122

159123
```bash
160124
git clone https://github.com/DomSamangy/NBA_Shots_04_25.git NBA_Shots_04_25
161125
```
162126

163-
Place the folder at the repository root (next to `preprocess.py`). Season files must match `NBA_*_Shots.csv`.
164-
165-
### Preprocessing summary
127+
### Preprocessing
166128

167-
`preprocess.py` merges seasons, normalizes coordinates (including 2020–22 compressed coords), bins shots on a hex grid, and exports compact JSON for expected value, seasonal heatmaps, team/player profiles, clutch comparison, and hero samples.
129+
`preprocess.py` merges seasons, normalizes coordinates (including 2020-22 compressed coords), bins shots on a hex grid, and exports JSON for expected value, seasonal heatmaps, team/player profiles, clutch comparison, and hero samples.

‎website/.nojekyll‎

Whitespace-only changes.

0 commit comments

Comments
 (0)