Skip to content

[Feature Request] Add Pollution Source Breakdown Page (sources.html) #281

Description

@Riya-Kharade

💡 The Problem

Currently, EcoPulse focuses on pollution levels and comparisons, but it does not provide insights into the sources of pollution.

Users can see pollution data (AQI, levels, trends), but they cannot understand:

  • What contributes most to pollution?
  • Which sector is responsible?
  • How different sources impact overall pollution levels?

This limits analytical depth and educational value.


🚀 Proposed Solution

Create a new page called sources.html that visually presents pollution source distribution using an infographic-style layout.

The page should include:

  • 🥧 Pie chart showing pollution source breakdown
  • 📊 Percentage distribution of sources:
    • 🚗 Vehicles
    • 🏭 Industries
    • 🏗 Construction
    • 🌾 Agriculture
  • 🎨 Visual infographic design
  • 📍 Optional city-based source selection
  • 📅 Optional year filter

No backend required (static/mock dataset).


🎨 Visual Representation

The sources.html page should include:

1️⃣ Hero Section

  • Title: "Pollution Source Breakdown"
  • Subtitle explaining importance of identifying emission sources

2️⃣ Source Distribution Chart

  • Pie chart (Chart.js)
  • Color-coded segments
  • Hover tooltip showing percentage
  • Smooth animation on load

3️⃣ Infographic Cards

Each source should have:

  • Icon
  • Short explanation
  • Percentage contribution
  • Impact summary

Example:

Vehicles

  • Major contributor in urban areas
  • High PM2.5 emissions

Industries

  • Emissions from factories & power plants

Construction

  • Dust and particulate pollution

Agriculture

  • Crop burning & methane emissions

🛠️ Implementation Details

  • New File: sources.html
  • Use Tailwind CSS for infographic layout
  • Use Chart.js for pie chart visualization
  • Use Vanilla JavaScript for:
    • Dynamic dataset handling
    • Filter updates (optional)
  • Static JSON/JS object for pollution source data
  • Fully responsive layout

Optional enhancements:

  • Toggle between Pie and Doughnut chart
  • Animated percentage counters
  • Interactive legend click to hide/show segments

🎯 Impact

This feature will:

  • Add analytical depth to EcoPulse
  • Improve educational value
  • Enhance environmental storytelling
  • Strengthen research-oriented presentation
  • Make the platform look more data-science driven
  • Increase production-level feel

It transforms EcoPulse from a pollution monitoring tool into a pollution analysis platform.

Assign this issue to me under ECWOC'26

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions