|
1 | | -# Project of Data Visualization (COM-480) |
| 1 | +# Special Operations (COM-480 project) |
2 | 2 |
|
3 | 3 | | Student's name | SCIPER | |
4 | 4 | | -------------- | ------ | |
5 | 5 | | Eliota Braha | 346212 | |
6 | 6 | | Botond Kovacs | 341415 | |
7 | 7 | | Sankalp Gambhir | 354377 | |
8 | 8 |
|
9 | | -[Milestone 1](./milestone1) • [Milestone 2](./milestone2) • [Milestone 3](#milestone-3) |
| 9 | +[Milestone 1](./milestone1) • [Milestone 2](./milestone2) • [Milestone 3](./milestone-3) |
10 | 10 |
|
11 | | -[Webpage (WIP)](https://com-480-data-visualization.github.io/special-operations/) |
| 11 | +[Webpage](https://com-480-data-visualization.github.io/special-operations/) |
12 | 12 |
|
13 | | -## Docker setup |
| 13 | +## Prerequisites |
14 | 14 |
|
15 | | -Use Docker Compose to run both the frontend and the Python project environment: |
| 15 | +You can run the project either locally or through Docker Compose. |
16 | 16 |
|
17 | | -```bash |
18 | | -docker compose up --build |
19 | | -``` |
| 17 | +Recommended local environment: |
20 | 18 |
|
21 | | -Services: |
| 19 | +- Node.js compatible with the project dependencies |
| 20 | +- `pip` and `venv` |
22 | 21 |
|
23 | | -- `web`: Vite dev server on `http://localhost:5173` |
24 | | -- `notebook`: JupyterLab on `http://localhost:8888` |
| 22 | +## Local setup |
25 | 23 |
|
26 | | -Useful commands: |
| 24 | +Install frontend dependencies: |
27 | 25 |
|
28 | 26 | ```bash |
29 | | -# Start only the frontend |
30 | | -docker compose up --build web |
31 | | - |
32 | | -# Start only JupyterLab / Python environment |
33 | | -docker compose up --build notebook |
34 | | - |
35 | | -# Run the preprocessing script inside Docker |
36 | | -docker compose run --rm notebook python milestone2/preprocess.py |
37 | | - |
38 | | -# Rebuild treemap data inside Docker |
39 | | -docker compose run --rm notebook python scripts/build_treemap_data.py |
| 27 | +npm install |
40 | 28 | ``` |
41 | 29 |
|
42 | | -## Milestone 1 (20th March, 5pm) |
43 | | - |
44 | | -**10% of the final grade** |
45 | | - |
46 | | -This is a preliminary milestone to let you set up goals for your final project and assess the feasibility of your ideas. |
47 | | -Please, fill the following sections about your project. |
48 | | - |
49 | | -*(max. 2000 characters per section)* |
50 | | - |
51 | | -### Dataset |
52 | | - |
53 | | -> Find a dataset (or multiple) that you will explore. Assess the quality of the data it contains and how much preprocessing / data-cleaning it will require before tackling visualization. We recommend using a standard dataset as this course is not about scraping nor data processing. |
54 | | -> |
55 | | -> Hint: some good pointers for finding quality publicly available datasets ([Google dataset search](https://datasetsearch.research.google.com/), [Kaggle](https://www.kaggle.com/datasets), [OpenSwissData](https://opendata.swiss/en/), [SNAP](https://snap.stanford.edu/data/) and [FiveThirtyEight](https://data.fivethirtyeight.com/)). |
| 30 | +Create and populate the Python virtual environment: |
56 | 31 |
|
57 | | -### Problematic |
58 | | - |
59 | | -> Frame the general topic of your visualization and the main axis that you want to develop. |
60 | | -> - What am I trying to show with my visualization? |
61 | | -> - Think of an overview for the project, your motivation, and the target audience. |
| 32 | +```bash |
| 33 | +source ./load_venv.sh |
| 34 | +``` |
62 | 35 |
|
63 | | -### Exploratory Data Analysis |
| 36 | +Start the frontend dev server: |
64 | 37 |
|
65 | | -> Pre-processing of the data set you chose |
66 | | -> - Show some basic statistics and get insights about the data |
| 38 | +```bash |
| 39 | +npm run dev |
| 40 | +``` |
67 | 41 |
|
68 | | -### Related work |
| 42 | +The app is then available at `http://localhost:5173`. |
69 | 43 |
|
| 44 | +If you want the notebook environment locally as well: |
70 | 45 |
|
71 | | -> - What others have already done with the data? |
72 | | -> - Why is your approach original? |
73 | | -> - What source of inspiration do you take? Visualizations that you found on other websites or magazines (might be unrelated to your data). |
74 | | -> - In case you are using a dataset that you have already explored in another context (ML or ADA course, semester project...), you are required to share the report of that work to outline the differences with the submission for this class. |
| 46 | +```bash |
| 47 | +source .venv/bin/activate |
| 48 | +jupyter lab |
| 49 | +``` |
75 | 50 |
|
76 | | -## Milestone 2 (17th April, 5pm) |
| 51 | +JupyterLab will start on `http://localhost:8888` by default. |
77 | 52 |
|
78 | | -**10% of the final grade** |
| 53 | +## Docker setup |
79 | 54 |
|
| 55 | +Run both the frontend and the Python/Jupyter environment: |
80 | 56 |
|
81 | | -## Milestone 3 (29th May, 5pm) |
| 57 | +```bash |
| 58 | +docker compose up --build |
| 59 | +``` |
82 | 60 |
|
83 | | -**80% of the final grade** |
| 61 | +## Repository layout |
84 | 62 |
|
| 63 | +- `src/`: frontend application code |
| 64 | +- `public/`: generated JSON assets consumed by the frontend |
| 65 | +- `scripts/`: data-fetching and data-building utilities |
| 66 | +- `data/`: raw and intermediate data files |
| 67 | +- `milestone1/`, `milestone2/`, `milestone3/`: milestone-specific notebooks, scripts, and deliverables |
85 | 68 |
|
86 | | -## Late policy |
| 69 | +## Notes |
87 | 70 |
|
88 | | -- < 24h: 80% of the grade for the milestone |
89 | | -- < 48h: 70% of the grade for the milestone |
| 71 | +- The frontend reads relative asset paths, so local dev, local preview, and static deployment use the same checked-in data files. |
| 72 | +- Derived JSON should be regenerated only when upstream data or preprocessing logic changes. |
0 commit comments