Skip to content
A data sonification of flight departures in real-time. Tune in to over 10,000 airports in 236 countries!
JavaScript Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
netlify.toml is a data visualisation and sonification of flight departures in real-time.


This project is built with React and Gatsby.


  • The flight callsign and departing airport are added to the departure board.
  • Audio is played spatially relative to the centre of the the map. So if a plane takes off from an airport on the right of the map, you will hear it in the right headphone/speaker. Zoom in and pan around for the full effect!
  • Text search


cd app
yarn develop

For this to work, you will need to add a .env.development file into the app folder and populate it with the following environment variables.

Variable Name Value Description
AIRCRAFT_CEILING 1000 Clamp departure height to 1000, helps scaling the note that's played.
API_REQUEST_CONCURRENCY 2 Number of API requests to request at once. Keep this below 3, as the API tends to return 503s after that.
API_RETRY_TIMEOUT 5000 If a 503 is received, the queue will wait this number of seconds before retrying.
API_URL_ARRIVALS Arrivals endpoint (currently not used)
API_URL_DEPARTURES Departures endpoint
BEAT_VALUE 4 Quarter note
BEATS_PER_BAR 4 4 beats per bar, ergo time signature is 4/4
REQUEST_INTERVAL 5000 The number of milliseconds to wait before refreshing the request queue.
TEMPO 120 Beats per minute
TIME_SINCE_LAST_FLIGHT 2 Number of minutes to query e.g. (now - 2)

Open graph images

I have included a script to generate open graph preview images from the local development version. This script uses puppeteer to take screenshots of each country and save it to the file system, which can then committed to the repo.

Colours and map styles

Colours for UI elements and the Google Map are kept in a map inside app/src/style/variables.js. Colours are based off this custom theme on

export const colours = {
  white: '#fff',
  heading: '#191512',
  subheading: '#241e19',
  copy: '#54473a',
  overlay: 'rgba(36, 30, 25, .4)',
  navigation: {
    background: '#f6f7f2',
    text: '#001921',
    background_hover: '#fffffb',
    shadow: '#ecede8'
  map: {
    water: '#f6f7f2',
    landscape: '#fffffb',
    road: '#f6f7f2'
  button: {
    background: '#3FB0A9',
    hover: '#42BAB3',
    text: '#fffffb'
  link: {
    default: '#544f4a',
    hover: '#bcb4ab'
You can’t perform that action at this time.