Skip to content

Urbanlytics: An interactive map used to analyze and visualize trends in communities located in Calgary.

Notifications You must be signed in to change notification settings

Anfaal25/Urbanlytics

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌆 Urbanlytics — Neighbourhood Analytics Platform

🌟 Inspiration

When some of our teammates had to relocate for internships, we realized how difficult it is to move to a new city without knowing what each neighbourhood is truly like.
Online research can only go so far — you often need local insights to understand if an area is safe at night, how good the air quality is, how expensive housing can get, or how accessible transit is.
We found no single platform that brought all this data together — that realization inspired Urbanlytics, a one-stop hub for neighbourhood analytics.


💡 What It Does

Urbanlytics is a data-driven neighbourhood analytics platform that helps people explore and compare communities within a city.
It provides a map-based dashboard where users can view:

  • Crime rates and safety scores
  • Air pollution and livability metrics
  • Average housing costs and transit accessibility
  • Overall community insights in one visual interface

Whether you’re moving, planning, or researching — Urbanlytics helps you make informed, data-backed decisions about where to live.


🚀 Overview

Urbanlytics provides a map-based visualization platform where users can:

  • Search for any city and view its neighbourhoods outlined on the map.
  • Select key urban indicators such as crime rate, housing prices & pollution.
  • Instantly view a heat map representation of the selected indicator.
  • Click on any neighbourhood to open a detailed analytics card with multiple statistics and trends.

Whether you’re finding a safe place to live, studying urban development, or planning inclusive city policies — Urbanlytics gives you the insights you need at a glance.


🗺️ Core Features

1. 🔍 Smart City Search

Enter the name of your city to load a map with all neighbourhood boundaries clearly marked.

2. 🌡️ Dynamic Heat Maps

Toggle between data layers (crime, price, pollution or population density). The map dynamically updates to visualize the chosen dataset using colour gradients.

3. 📊 Neighbourhood Analytics Panel

Click on a neighbourhood to view:

  • Average housing price
  • Crime index
  • Pollution levels (air quality)
  • Population density
  • Community demographics and growth trends

4. ⚡ Real-Time Data Integration

Our system can integrate open data APIs (e.g. Socrata) to fetch and visualize the latest statistics.


🧠 How It Works

  1. Frontend:
    Built using React (Next.js) with Mapbox for geospatial rendering.
    The interface uses a clean, minimal UI for accessibility and performance.

  2. Visualization Layer:
    Dynamic heat maps are generated using Leaflet, adapting color scales based on normalized indicator values.


🧩 Tech Stack

Component Technology
Frontend Next.js/TypeScript
Map Visualization Leaflet API
Styling Tailwind CSS
Deployment Netlify

🗂️ Data Sources

This project combines open and public datasets to provide community-level insights for Calgary, including safety, air quality, and housing metrics.


🧾 Crime Statistics

Source: Socrata Open Data API
Provider: City of Calgary Open Data Portal

  • Offers community-based crime and incident data.
  • Used to generate Crime Rate and Safety Score metrics.

🌫️ Air Pollution

Source: IQAir – Calgary Air Quality Map
Provider: IQAir / AirVisual

  • Provides real-time AQI and PM2.5 readings from Calgary monitoring stations.
  • Used to calculate the Air Quality and Environmental Health scores.

🏡 Housing Prices

Source: RentFaster.ca
Provider: RentFaster Canada

  • Aggregates rental and housing market data by community.
  • Used to estimate Cost of Living and Property Value indicators.

All datasets are aggregated for visualization and insight purposes under fair-use and open-data guidelines.


🖥️ Getting Started

Prerequisites

  • Node.js (v20+)
  • npm

Installation

# Clone the repository
git clone https://github.com/yourusername/urbanlytics.git
cd urbanlytics

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Add your API keys inside .env.local

# Run the development server
npm run dev

Visit http://localhost:3000 to explore Urbanlytics.


📈 Future Enhancements

  • Predictive analytics for real estate and safety trends
  • Integration with live sensor or city IoT data
  • Accessibility mode for visually impaired users
  • User accounts and saved neighbourhood dashboards
  • Comparison view for multiple neighbourhoods

🤝 Contributors

Name Role
Mehvish Shakeel Frontend & UI Development
Anfaal Mahbub Backend & API Integration
Al Farhana Siddique Data Processing & Visualization
Nimna Wijedasa UX Design & Analytics
Aly Mohammed Masani Project Coordination & Full Stack Development

💡 Vision

Urbanlytics envisions a world where urban data is transparent, accessible, and empowering.
By turning complex statistics into interactive visuals, we help build smarter, safer, and more inclusive cities — one neighbourhood at a time.

About

Urbanlytics: An interactive map used to analyze and visualize trends in communities located in Calgary.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 94.0%
  • Shell 4.1%
  • CSS 1.7%
  • JavaScript 0.2%