https://github.com/chueating1005/vizgdp

Final Project of NYCU 113-1 Course: Data Visualization and Visual Analytics
https://github.com/chueating1005/vizgdp

Last synced: 2 months ago
JSON representation

Final Project of NYCU 113-1 Course: Data Visualization and Visual Analytics

• Host: GitHub
• URL: https://github.com/chueating1005/vizgdp
• Owner: ChuEating1005
• License: mit
• Created: 2024-11-05T15:20:45.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-12-22T18:42:23.000Z (6 months ago)
• Last Synced: 2025-02-14T18:49:36.296Z (4 months ago)
• Language: Vue
• Homepage: https://chueating1005.github.io/VizGDP/index
• Size: 12.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
VizGDP



  
NYCU Data Visualization Final Project





  Features  • 

  Tech Stack  • 

  Prerequisites  • 

  Installation  • 

  Usage  • 

  License



> [!NOTE]

> 
Interactive Visualization Platform for Global Development Indicators

> 

> This project aims to visualize global development trends through interactive visualizations, including key indicators such as GDP, population, happiness index, and life expectancy. Through multi-dimensional data presentation, it helps users better understand the dynamic changes in global development.  

> 

> [Demo Website Link](https://chueating1005.github.io/VizGDP/index.html)  


## Team Members

| Name | Student ID | GitHub |

| --- | --- | --- |

| 朱驛庭 | 111550093 | [@ChuEating1005](https://github.com/ChuEating1005) |

| 鄭睿宏 | 111550012 | [@Ray-Cheng-11](https://github.com/Ray-Cheng-11) |

| 陳燁 | 111550124 | [@Henry7090](https://github.com/Henry7090) |

### Contributors



  



## Features

The project offers the following visualization features:

- **Bar Chart Race**

  - Dynamic ranking visualization

  - Real-time GDP changes over time

  - Smooth transitions between years

  - Top 10 countries highlight

- **Scatter Plot**

  - GDP vs Happiness Index relationship

  - Time axis animation support

  - Bubble size represents population

  - Region-based color coding

- **Choropleth Map**

  - Global GDP distribution

  - Population density distribution

  - Happiness index distribution

  - Life expectancy distribution

- **Timeline**

  - Historical Economic Events

## Tech Stack

[![My Skills](https://skillicons.dev/icons?i=vue,vite,d3,tailwind,html,css,js,echarts)](https://skillicons.dev)

- **Frontend Framework**: Vue 3 + Vite

- **Visualization Library**: D3.js

- **Styling Framework**: Tailwind CSS

## Prerequisites

> [!Caution]

> **Please ensure your environment meets the following requirements:**

> - Node.js 16.0 or above

> - npm 7.0 or above

> - Modern browser (ES6+ support)

## Installation

1. **Clone the repository:**

   ```bash

   git clone https://github.com/ChuEating1005/VizGDP.git

   cd VizGDP

   ```

2. **Install dependencies:**

   ```bash

   npm install

   ```

3. **Start development server:**

   ```bash

   npm run dev

   ```

4. **Build for production:**

   ```bash

   npm run build

   ```

## Usage

### Bar Chart Race

- Watch the dynamic GDP per capita ranking changes

- Use play/pause button to control animation

- Adjust animation speed with the slider

### Scatter Plot

- Use timeline to control the year

- Click play button to watch dynamic changes

- Hover over data points for detailed information

- Filter data by regions using the legend

### Choropleth Map

- Select different indicators to view global distribution

- Use region selector to zoom into specific areas

- Observe historical changes through timeline

- Hover over countries for detailed statistics

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.