Interactive 3D exploration of environmental pollution data. Explore Live Demo • Contribution Guide • Documentation
EcoPulse transforms complex datasets into immersive 3D stories.
- 🌬️ Air Pollution: Particle-based smog simulation in a 3D city skyline.
- 💧 Water Pollution: Clickable hotspots and contamination flow analysis.
- 💡 Light Pollution: Night sky intensity controls with real-time toggles.
- 📊 Analytics: Dynamic Chart.js integration for regional comparisons (2018-2024).
- Students learning Three.js and WebGL
- Hackathon participants building climate-tech apps
- Beginners in open-source contribution
- Developers interested in data visualization
| Category | Technology | Usage |
|---|---|---|
| 3D Graphics | Three.js (r128) | WebGL optimized particle systems and scenes. |
| Data Viz | Chart.js | Real-time bar, line, and radial gauges. |
| Styling | Tailwind CSS | Responsive, eco-minimalist UI design. |
| Core | Vanilla JS (ES6+) | Performance-focused logic without heavy frameworks. |
Get your local environment running in seconds:
git clone [https://github.com/vinaysingh282006/Hacknova.git](https://github.com/vinaysingh282006/Hacknova.git)
cd Hacknova
python3 -m http.server 8000
Navigate to http://localhost:8000 in your browser.
To keep the main page clean and maintain a professional appearance, all technical deep-dives have been moved to our dedicated Docs Hub:
| Module | Description |
|---|---|
| 🚀 Setup & Deployment | Comprehensive guide on hosting (Vercel/Netlify), Browser Support, and PWA configuration. |
| 🔧 Customization & API | Instructions for integrating real-time APIs (OpenAQ) and fine-tuning 3D shaders. |
| Rapid fixes for common WebGL errors and performance optimizations for mobile. |
📂 View Project Structure (Click to expand)
Hacknova/
├── index.html # Landing Page
├── air.html # 3D Air Scene (Environment Visualization)
├── water.html # 3D Water Scene (Environment Visualization)
├── light.html # 3D Light Scene (Environment Visualization)
├── js/
│ ├── main.js # Entry point & Navigation
│ ├── air-3d.js # Three.js Core Logic for Air
│ ├── charts.js # Chart.js Data Logic
│ └── shared.js # Utilities & Accessibility
├── data/
│ └── sample-data.json # Default Pollution Metrics
└── docs/ # Modular Technical Documentation
Participating in SWOC'26? We welcome your contributions! To ensure a smooth process, please follow these steps:
- 📖 Read the Docs: Check our Contributing Guide for coding standards and workflow.
- 🔍 Find a Task: Look for issues with the
good-first-issueorSWOC'26labels. - 🛠️ Build & Submit: Fork the repo, make your changes, and submit your PR to close the loop!
A huge thank you to these amazing individuals for helping EcoPulse grow!
Click to see the Contributor Graph
This project is licensed under the MIT License. Feel free to use, modify, and distribute it as per the license terms.