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

Team Members

Name	Student ID	GitHub
朱驛庭	111550093	@ChuEating1005
鄭睿宏	111550012	@Ray-Cheng-11
陳燁	111550124	@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

• 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:

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

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Build for production:

   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 file for details.