Mapbox GL JS now supports data-driven styling for line-color, making it even easier to create stunning data visualizations. I decided to explore the capabilities of data-driven line styles by making a map that tracks jetlag on international flights.

The colors of flight paths are based on the time difference between your flight’s origin and destination: blue if you’re traveling “forward” in time; orange if you’re traveling “back” in time; white if you’re traveling within the same timezone. The brighter the color, the worse the jetlag.

Here are some of my favorite airports on the map:

Flights from Dublin Airport (DUB)

Dublin Airport, an international airport located just east of the North Atlantic Ocean, shows a contrast between long flights to the United States and shorter flights across Europe.

Flights from Beijing Capital International Airport (PEK)

Did you know that there’s only one timezone in China? Domestic flights from PEK won’t jetlag you at all, but long international flights will set you a few hours back, never forward.

Flights from Dubai International Airport (DXB)

Dubai’s well-connected airport is a central hub for international travel. I was blown away to learn that flights from Dubai to the US West Coast arc around the North Pole— while this seems unusual on a flat map, this is actually the route that these long flights will take!

Building the map

Openflights.org provides a dataset of airport and flight route information across the globe. This dataset includes timezone information, which I used to calculate the number of hours displaced from local time at point A to point B on any route. Mapbox GL JS then sets the appropriate line color based on the time delta property for each flight path. The colors are calculated based on stops:

map.addLayer({
    'id': 'routes',
    'source': 'routes',
    'type': 'line',
    'paint': {
        'line-color': {
            'property': 'time-delta',
            'type': 'exponential',
            'stops': [
                ['-24', '#ff4e00'], // if flight is 24 hours 'backward', line will be orange
                ['-3', '#eace28'],
                ['0', '#ffffff'],
                ['3', '#43aaf7'],
                ['24', '#1129d3'] // if flight is 24 hours 'forward', line will be blue
            ]
        }
    }
});


See how jetlagged you’ll be on flights from your nearest airport by entering an airport code:

Have your own idea for a cool data-driven visualization? Learn how to style lines, fills, and extrusions based on data properties using Mapbox GL JS.