Air-Data

Airlines Data Viewer with 800+ companies and 10,000+ routes

Summary

Description

Air-Data is a one-of-a-kind project.
By computing data from different databases accross OpenAPI and Open-Source data, it records more than 10,000 routes and 800 companies from 2015.
Air-Data is a convenient way to have a global look and understanding of worldwide air-related data, all along with every airport, airline, and operated flights for each airline.

Tags

MapAnalysisTile_Layers

Links

CodeSandboxGitHubLive versionDribbble Project

Technologies

Firebase Real-Time DatabaseVueJSLeafletQGis

Presentation

Air-Data

Airlines data viewer with 800+ companies and 10,000+ routes

Branding

Plane take-offFont-Awesome icon, slightly modified

Key Functionalities

The user can browse through airlines:
  • Each airline is presented at its headquarters location
  • When clicking an ariline, details and operating routes appear
  • The user can see all international airports

Wireframing

Colors

Orange: Transportation#FF4500
Gray: Neutral, Formal#2C3E50

Fonts

Website FontRaleway - Google Fonts
Font Awesome NPM Package

Final Logo

Screenshots

Map Layers

Base Map | Tile Layer

The Base Map is a layer from CartoDB called Voyager, one of the clearest tile layer of the market.

Airports | Tile Layer

Airports data, OpenFlights.org CSV files, need to be imported into QGIS. Using a custom style, it can be exported using QTiles and hosted via GitHub raw files.

Style depends on the zoom level:
  • 0 : no data
  • 1 to 8 : opaque style
  • 9 to 10 : transparent style
  • 10+ : zoom level 10 limited

Routes | Overlay

Routes, which are DAT files from SKYbrary, need to be first inserted into a relational database to verify their integrity, then inserted into a Firebase Real-Time database, from which they are fetched when needed.

Routes | Clustered Markers Layer

Airlines, which are DAT files from SKYbrary, need to be inserted into a Firebase Real-Time database, from which they can be fetched when needed.

Map Custom Control

A custom control, that permits to reset the position and zoom of the map, needs to be added using JavaScript.

Technologies

VueJSA versatile Front-End Framework
Code SandboxAn online IDE and runtime for web development
Firebase Real-Time databaseAn online and optimized document-based database
Font Awesome ProHigh-quality icons
Leaflet + Leaflet Marker ClusterLeaflet is a JS library for interactive maps
Leaflet Marker Cluster is an official addin to Leaflet and permits to group airlines into the same marker on lower zoom levels.

Airline Logos

1. Image PickPick the right image to start with
2. Image ConversionConvert to an alpha and rectangle-shaped image
3. ColourizingBuild a color map to save weight
4. ContrastRemove or replace low-contrast colours

Database

This database uses prefixes to know where the data comes from:
  • AL : Airlines data comes from DAT files from SKYbrary
  • AP : Airports data comes from CSV files from OpenFlights
  • SRC and DEST : Routes data comes from DAT files from SKYbrary

Airlines

An airline is identified by its id and contains following information:
  • al_id : unique identifier
  • al_name : airline's name
  • al_icao : 3-letter identifier for an airline
    This can't be used as unique identifier as some airlines share their ICAO
  • al_country : country of airline's headquarters
  • ap_icao : unique identifier of airline's base airport
  • ap_name : name of airline's base airport
  • ap_latitude and ap_longitude : coordinates of airline's base airport
  • ap_altitude : altitude (in feets) of airline's base airport
    As only a very small amount of airlines share the same airport as their base airport, It was chosen to not store airports into a separated root. It permits also a better load of airlines data.

Routes

A route is not identified directly. It is attached to its airline's id (al_id). A rule was created to index routes on their al_id field, which permits a better load time (routes are only fetch via their al_id). A route document contains:
  • al_id : airline's id that operates this route
  • src_lat and src_long : Coordinates of first point of the route
  • dest_lat and dest_long : Coordinates of second point of the route
    src and dest terms are here to distinguish first point from second point, but it has not a real meaning, as a route is almost always operated in both ways.
Important notice : as Leaflet does not allow to draw lines outside of the map, a route that would go from Seattle to Tokyo will be drawn above Europe, even if that's not the case in real life!