{"id":49509295,"url":"https://github.com/com-480-data-visualization/betterlife","last_synced_at":"2026-05-01T18:34:03.989Z","repository":{"id":281275639,"uuid":"944609751","full_name":"com-480-data-visualization/betterlife","owner":"com-480-data-visualization","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-22T12:11:18.000Z","size":14237,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-22T13:59:06.919Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/com-480-data-visualization.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-07T16:46:32.000Z","updated_at":"2025-05-22T12:11:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"cd5f971d-e325-474b-9b90-a146d0d909ad","html_url":"https://github.com/com-480-data-visualization/betterlife","commit_stats":null,"previous_names":["larosafrancesco289/betterlife","com-480-data-visualization/betterlife"],"tags_count":0,"template":false,"template_full_name":"com-480-data-visualization/com-480-project-template","purl":"pkg:github/com-480-data-visualization/betterlife","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/com-480-data-visualization%2Fbetterlife","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/com-480-data-visualization%2Fbetterlife/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/com-480-data-visualization%2Fbetterlife/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/com-480-data-visualization%2Fbetterlife/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/com-480-data-visualization","download_url":"https://codeload.github.com/com-480-data-visualization/betterlife/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/com-480-data-visualization%2Fbetterlife/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32508903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-01T18:34:03.088Z","updated_at":"2026-05-01T18:34:03.913Z","avatar_url":"https://github.com/com-480-data-visualization.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project of Data Visualization (COM-480)\n\n| Student's name    | SCIPER |\n| ----------------- | ------ |\n| Francesco La Rosa | 396622 |\n| Nicholas Bunjamin | 396640 |\n| Corvin Laube      | 405240 |\n\n## 📋 Project Overview\n\nThis project presents an interactive visualization of the OECD Better Life Index, exploring various dimensions of well-being across different countries. The visualization allows users to discover patterns in quality of life indicators and understand how different factors contribute to overall well-being.\n\n**🌐 Live Website:** https://com-480-data-visualization.github.io/betterlife\n\n**📚 Project Documentation:**\n- [Milestone 1 Report](./Reports/Milestone%201.md)\n- [Milestone 2 Report](./Reports/Milestone%202%20Report.pdf)\n- [Milestone 3 Process Book (PDF)](./Reports/Milestone%203%20ProcessBook.pdf)\n- [Process Book (Web Version)](./process_book.html) - *Shorter interactive version available on the website*\n\n**🎥 Project Video:** (https://youtu.be/boQ2OgiwSJk)\n\n## 🚀 Technical Setup and Usage\n\nThis project is built using modern web technologies with Node.js for dependency management and Tailwind CSS for styling. The visualization is implemented in vanilla JavaScript with D3.js for data manipulation and interactive charts.\n\n### Prerequisites\n\n- **Node.js** (v14 or higher): Download from [nodejs.org](https://nodejs.org/)\n- **npm** (included with Node.js)\n- **Modern web browser** with JavaScript enabled\n\n### 📦 Installation\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/com-480-data-visualization/betterlife.git\n   cd betterlife\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n   This installs Tailwind CSS, PostCSS, and other development dependencies.\n\n### 🏃‍♂️ Running the Project\n\n#### Option 1: Quick Start (Recommended)\nFor the best experience, use a local HTTP server:\n\n```bash\n# Using Python 3 (recommended)\npython3 -m http.server 8000\n\n# Using Python 2 (if Python 3 is not available)\npython -m SimpleHTTPServer 8000\n\n# Using Node.js (if you have it installed globally)\nnpx http-server\n\n# Using PHP (if available)\nphp -S localhost:8000\n```\n\nThen open your browser and navigate to:\n- **Main visualization:** `http://localhost:8000/visualization.html`\n- **Landing page:** `http://localhost:8000/index.html`\n- **Process book:** `http://localhost:8000/process_book.html`\n\n#### Option 2: Development with CSS Building\nIf you plan to modify the styling:\n\n1. **Build and watch CSS:**\n   ```bash\n   npm run build-css\n   ```\n   This compiles Tailwind CSS and watches for changes.\n\n2. **Run local server** (in a separate terminal):\n   ```bash\n   python3 -m http.server 8000\n   ```\n\n### 📁 Project Structure\n\n```\nbetterlife/\n├── 📄 index.html              # Landing page\n├── 📄 visualization.html      # Main data visualization\n├── 📄 process_book.html       # Process book page\n├── 📁 Reports/                # Project milestone reports\n│   ├── 📄 Milestone 1.md\n│   ├── 📄 Milestone 2 Report.pdf\n│   └── 📄 Milestone 3 ProcessBook.pdf\n├── 📁 Dataset/                # Data files and preprocessing scripts\n│   ├── 📄 Better_Life_Unfiltered.csv\n│   ├── 📄 preprocess.py\n│   └── 📊 data_viz.ipynb\n├── 📄 Better_Life_Preprocessed.csv  # Main dataset for visualization\n├── 📁 dist/                   # Compiled CSS output\n│   └── 📄 output.css\n├── 📁 SVGs/                   # Vector graphics assets\n├── 📁 Sketches/               # Design sketches and wireframes\n├── 🎨 style.css              # Custom CSS for visualization\n├── 📜 script.js              # Main JavaScript functionality\n├── 📜 dropdown.js            # Dropdown menu functionality\n├── 📜 input.css              # Tailwind CSS source\n├── ⚙️ package.json           # Node.js dependencies and scripts\n├── ⚙️ tailwind.config.js     # Tailwind CSS configuration\n└── ⚙️ postcss.config.js      # PostCSS configuration\n```\n\n## 🗃️ Data\n\nThe project uses the OECD Better Life Index dataset, which measures well-being across multiple dimensions:\n\n- **Housing:** Affordability and overcrowding indicators\n- **Income:** Household earnings and wealth distribution\n- **Jobs:** Employment rates and job security\n- **Community:** Social networks and civic engagement\n- **Education:** Educational attainment and student skills\n- **Environment:** Air quality and water quality\n- **Safety:** Personal security and assault rates\n- **Life Satisfaction:** Self-reported life satisfaction\n- **Health:** Life expectancy and self-reported health\n- **Work-Life Balance:** Time for leisure and personal care\n\n### Data Processing\n\nRaw data files are located in the `Dataset/` directory. The preprocessing pipeline:\n1. **Raw data:** Multiple CSV files with different demographic breakdowns\n2. **Processing:** `preprocess.py` cleans and aggregates the data\n3. **Output:** `Better_Life_Preprocessed.csv` - the main dataset used by the visualization\n\n**Note:** Due to file size constraints, large raw datasets are stored locally. The preprocessed data file is included in the repository.\n\n## 🛠️ Technologies Used\n\n- **Frontend:** HTML5, CSS3, JavaScript (ES6+)\n- **Styling:** Tailwind CSS, Custom CSS\n- **Data Visualization:** D3.js\n- **Build Tools:** PostCSS, Autoprefixer\n- **Data Processing:** Python (pandas, numpy)\n- **Version Control:** Git, GitHub\n- **Deployment:** GitHub Pages\n\n## 🎯 Features\n\n- **Interactive World Map:** Explore countries and their Better Life Index scores\n- **Multi-dimensional Analysis:** Compare countries across different well-being indicators\n- **Dynamic Filtering:** Filter and sort countries by various criteria\n- **Story-driven Exploration:** Guided narratives through the data\n\n## 🤝 Contributing\n\nThis project was developed as part of the COM-480 Data Visualization course. For questions or suggestions, please contact the project team.\n\n## 📄 License\n\nThis project is for educational purposes as part of the COM-480 Data Visualization course at EPFL.\n\n---\n\n*Built with ❤️ for COM-480 Data Visualization*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcom-480-data-visualization%2Fbetterlife","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcom-480-data-visualization%2Fbetterlife","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcom-480-data-visualization%2Fbetterlife/lists"}