The objective of this project is to create a full-stack application that visualizes flight data on an interactive map. Users can click on airports to see outgoing flights and their destinations.
- Frontend: React.js, Leaflet.js for map visualization
- Backend: Flask (Python) for API
- Database: Azure Cosmos DB (Emulator) for data storage
The frontend is a React application that utilizes the react-leaflet
library to render an interactive map. Users can view markers representing airports, click on these markers to see details, and visualize flight paths from the selected airport to various destinations.
- Interactive map with zoom and pan capabilities
- Custom markers for airport locations
- Dynamic polylines representing flight paths
To run the frontend on your local machine:
- Clone the repository.
- Navigate to the frontend directory.
- Run
npm install
to install dependencies. - Run
npm start
to start the React development server.
The backend is a Flask application responsible for interfacing with Azure Cosmos DB to fetch flight and airport data.
GET /airports
: Fetches a list of airports.GET /flights
: Fetches a list of flights.
To set up and run the backend:
- Ensure Python is installed on your system.
- Navigate to the backend directory.
- Create a virtual environment with
python -m venv venv
. - Activate the virtual environment.
- Install dependencies with
pip install -r requirements.txt
. - Start the server with
flask run
.
The graph database is structured to represent the relationships and data points relevant to air traffic and airport connections.
Vertices in the graph represent entities such as airports and airlines.
-
Airport: Represents an individual airport.
- Properties:
id
: A unique identifier for the airport.name
: The name of the airport.location
: The city or area where the airport is located.coordinates
: The geographical coordinates of the airport (latitude and longitude).
- Properties:
-
Airline: Represents an airline company.
- Properties:
id
: A unique identifier for the airline.name
: The name of the airline.
- Properties:
Edges in the graph represent the connections between entities, such as flights between airports and the operation of flights by airlines.
- Flight: Represents a flight from one airport to another.
- Properties:
id
: A unique identifier for the flight.flight_number
: The flight number.departure_time
: The scheduled departure time of the flight.arrival_time
: The scheduled arrival time of the flight.
- Properties:
The objective of defining edges and vertices in our graph database is to:
- Model the complex network of global air traffic.
- Allow efficient querying of flight connections between airports.
- Enable analysis of airline operations, including flight frequencies, routes, and timings.
- Provide a clear visualization of air traffic for users, aiding in understanding of global connectivity and travel options.
This graph model enables various analyses such as finding the shortest path between airports, determining the most connected airports, and understanding the network's robustness.
Azure Cosmos DB is used to store and manage the data, with the following containers:
AirportMaster
: Contains data about airports, including their names and locations.AirlineMaster
: Contains data about airlines, including their names and locations.FlightGraph
: Contains data about flights, including departure and arrival airports, times, and flight numbers.
Here are some screenshots of the Air Traffic Visualization App in action:
The main interface of the application showing the interactive map with airport markers.
Details view when an airport marker is clicked, showing the flight paths.
Popup showing the flight information after selecting a flight path.
Popup showing the flight information after selecting a flight path.
Contributions are welcome, and any contributors should adhere to the following steps:
- Fork the repository.
- Create a new branch for your feature.
- Add and commit your changes.
- Push to your fork and submit a pull request.