“Hello Dev Community!
I’m excited to share my recent project, the Smart City Pulse Dashboard, which I built as a submission for the Summer of Scribbling 2025 Hackathon hosted by @ScribblerApp.
The Problem I Aimed to Solve
In rapidly growing urban areas, access to real-time, actionable environmental data is crucial but often fragmented. Citizens and city officials need a unified view of air quality, weather, and potential hazards to make informed decisions about public health, urban planning, and daily activities.
My Solution: The Smart City Pulse Dashboard
The Smart City Pulse Dashboard is a centralized, interactive web application designed to provide immediate, insightful environmental data for different city locations. It transforms raw numbers into easily digestible information, empowering users to understand their local environment at a glance.
Key Features:
Real-time Environmental Monitoring: Visualizes Air Quality Index (AQI) trends over time and current weather conditions (temperature, humidity, wind speed).
Location-Based Insights: A simple dropdown allows users to switch between different simulated city zones (e.g., Central Park, Hi-Tech City, Old City) to get tailored environmental data for their specific area.
🧠 Smart Summary: This is a core innovation! Instead of just numbers, the dashboard generates a human-readable summary that interprets the data and provides actionable advice. For example: “Air quality is moderate. Generally acceptable, but sensitive individuals should be cautious.”
🚨 Proactive Alerts: It automatically identifies critical environmental events (like high AQI or extreme temperatures) and displays clear, urgent alerts, helping users to take proactive measures for their health and safety.
Interactive Visualizations: Powered by Chart.js, the dashboard offers engaging and responsive line and bar charts that update dynamically.
How It’s Built (Tech Stack):
HTML & CSS: For the dashboard’s structure and sleek, dark-themed UI.
JavaScript: The core logic, handling data manipulation, UI updates, and intelligent summaries/alerts.
Chart.js: A powerful JavaScript charting library used for creating interactive air quality and weather visualizations.
Scribbler. live: The entire project is hosted and runs within a Scribbler notebook. A key learning experience was utilizing scrib.loadScript() to correctly load external libraries like Chart.js, ensuring robust performance within the Scribbler environment. (This was a good challenge to overcome!)
What’s Next? (Future Scope)
While currently using dummy data, the dashboard is designed for easy integration with real IoT sensors and environmental APIs. Future enhancements could include:
Predictive analytics for upcoming weather and AQI trends.
Integration of other urban data, like noise levels or traffic density.
User accounts with personalized alert preferences.
Try it out!
I encourage you to explore the dashboard yourself. It’s live on Scribbler:
https://app.scribbler.live?jsnb=github:sujankowshik/Smart-City-Pulse-Dashboard/SmartCityPulseDashboard-Sujan_br_.jsnb
Feel free to share your thoughts and feedback! #Hackathon #SmartCity #DataVisualization #JavaScript #WebDev #ScribblerApp”