HappiScope: Interactive Visualization of Global Happiness Metrics (COM-480 Data Visualization)

Student's name	SCIPER
Chang Jin	403930
Rizhong Lin	366842
Anlan Wang	403909

This repository contains the work for the COM-480 Data Visualization project, HappiScope - an interactive web-based platform for visualizing the World Happiness Report data (2015-2024) alongside related socioeconomic indicators.

Quick Links:

• Live Website
• Screencast Demonstration
• Process Book
• Milestone 1 Details
• Milestone 2 Details
  • Milestone 2 Report
• Milestone 3 Details
• Data Folder
• Website Source Code (Docs)

Project Overview

HappiScope visualizes the World Happiness Report data (2015-2024) alongside related socioeconomic indicators like HDI and population. The goal is to provide an intuitive interface for users to explore global happiness trends, understand contributing factors, analyze correlations, and discover geographic or temporal patterns.

Key Features

• Interactive World Map - Explore happiness metrics across countries and years
• Country Comparison Tool - Compare happiness metrics between countries over time
• Factor Analysis Dashboard - Analyze correlations between happiness and various socioeconomic factors
• About & Methodology - Detailed information about the project approach and data sources

Technical Setup & Installation

Prerequisites

• Node.js (v18 or later)
• npm (v9 or later)

Installation

1. Clone the repository:

git clone https://github.com/com-480-data-visualization/HappiScope.git
cd HappiScope/docs

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Project Structure

• /data - Raw datasets and data processing scripts
  • /happiness_score_data - World Happiness Report data (2015-2024)
  • /hdi_data - Human Development Index data
  • /population_data - Population data by country
• /docs - Website source code (React/Vite)
  • /src - Main source code
    • /assets - Static assets and images
    • /components - React components
    • /data - Processed JSON data files
• /Milestone1, /Milestone2, /Milestone3 - Project documentation

Technologies Used

• React - Frontend library
• Vite - Build tool and development server
• Tailwind CSS - Utility-first CSS framework
• D3.js - Data visualization library
• React Simple Maps - React components for geographical maps
• Recharts & Nivo - React charting libraries

Project Milestones

Milestone 1 (21st March, 5pm) - 10% of the final grade

Details regarding the project introduction, dataset description, problematic, exploratory data analysis, related work, and initial planning.

Milestone 2 (18th April, 5pm) - 10% of the final grade

Progress update, core component descriptions, and planned enhancements. The full report is available as COM_480_Milestone_2.pdf.

Milestone 3 (30th May, 5pm) - 80% of the final grade

Our final project submission includes:

• Live website - https://com-480-data-visualization.github.io/HappiScope/
• Screencast - 2-minute demonstration video
• Process book - Documentation of our development journey

Team Contributions

Our team worked collaboratively on all aspects of the project, with each member focusing on specific areas:

Chang Jin (403930)

Rizhong Lin (366842)

Anlan Wang (403909)

All team members contributed equally to the conceptualization, planning, and refinement of the project.