https://github.com/darshangaikwad4114/india_gdp_visualisation_chart
India's GDP Visualisation Chart ⚡
https://github.com/darshangaikwad4114/india_gdp_visualisation_chart
axios bootstrap css html javascript reactjs
Last synced: about 2 months ago
JSON representation
India's GDP Visualisation Chart ⚡
- Host: GitHub
- URL: https://github.com/darshangaikwad4114/india_gdp_visualisation_chart
- Owner: darshangaikwad4114
- License: mit
- Created: 2024-03-02T09:11:47.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-16T18:28:41.000Z (2 months ago)
- Last Synced: 2025-03-16T19:39:24.417Z (2 months ago)
- Topics: axios, bootstrap, css, html, javascript, reactjs
- Language: JavaScript
- Homepage: https://india-gdp-visualisation-chart.netlify.app/
- Size: 1.02 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📊 India GDP Visualization Dashboard
## 🛠️ Tech Stack
- **Frontend Framework:** React.js
- **Data Visualization:** Recharts
- **Styling:** CSS, Bootstrap 5
- **HTTP Client:** Axios
- **Icon Library:** Bootstrap Icons
- **Data Source:** World Bank API
- **Package Manager:** npm/yarn
- **Build Tool:** Create React App
## 📝 Description
The India GDP Visualization Dashboard is an interactive web application that provides comprehensive visualizations of India's GDP growth trends over time. The project fetches economic data from the World Bank API and presents it through intuitive, responsive charts and data cards, allowing users to explore India's economic performance metrics. The dashboard includes features for analyzing annual GDP growth rates, comparing trends, and identifying key economic milestones, making complex economic data accessible and insightful.
## ✨ Key Features
- **📈 Interactive Time-Series Visualizations:** Explore India's GDP growth trajectory through dynamic bar charts, line graphs, and area charts that clearly illustrate economic trends over multiple decades.
- **🔄 Real-Time Data Integration:** Fetch the latest GDP data directly from the World Bank API to ensure visualizations reflect the most current economic information available.
- **🌓 Dark/Light Mode Toggle:** Seamlessly switch between color themes with a sophisticated theme system that also respects user system preferences.
- **📱 Responsive Design:** Fully responsive interface that adapts perfectly to different screen sizes and devices, from desktop monitors to mobile phones.
- **📤 Data Export Capability:** Export the visualization data in CSV format for further analysis or inclusion in reports and presentations.
## 🚀 Installation
### Prerequisites
- Node.js (v14.0 or higher)
- npm or yarn package manager
- Git
### Steps
1. Clone the repository:
```bash
git clone https://github.com/yourusername/india_gdp_visualisation.git
cd india_gdp_visualisation
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Create a `.env` file in the root directory if you need to configure environment variables (optional).
4. Start the development server:
```bash
npm start
# or
yarn start
```
5. The application will open in your default browser at `http://localhost:3000`.
## 💡 Usage
1. **🔍 Exploring GDP Data:**
- The main dashboard displays key GDP metrics and visualizations immediately upon loading.
- Examine the GDP growth over time through the interactive charts.
- Hover over data points to see detailed information for specific years.
2. **📊 Analyzing Trends:**
- Review the "Key Insights" section for automated analysis of growth patterns.
- Compare current GDP figures with historical averages and extremes.
- Observe trend lines and reference indicators to understand economic cycles.
3. **🎨 Customizing Your View:**
- Toggle between dark and light modes using the theme button in the bottom-right corner.
- Show or hide the insights panel using the "Show/Hide Insights" button.
4. **💾 Exporting Data:**
- Click the "Export" button to download the GDP data as a CSV file.
- Use the exported data for your own analysis or reports.
## 🤝 Contributing
Contributions to improve the India GDP Visualization Dashboard are welcome. Please follow these steps:
1. Fork the repository on GitHub.
2. Clone your forked repository:
```bash
git clone https://github.com/your-username/india_gdp_visualisation.git
```
3. Create a new branch for your feature or bugfix:
```bash
git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bugfix-name
```
4. Make your changes and commit them with descriptive commit messages:
```bash
git commit -m "Add feature: brief description of your changes"
```
5. Push your changes to your fork:
```bash
git push origin feature/your-feature-name
```
6. Open a pull request on the original repository and provide a clear description of your changes.
7. Wait for the maintainers to review your pull request and address any feedback.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](./Licence) file for details.
## 🙏 Acknowledgments
- Data provided by the World Bank Open Data API
- Project created by Darshan Gaikwad