

Airline flights of the world visualized with WebGL - callumprentice
http://callumprentice.github.io/apps/flight_stream/index.html

======
callumprentice
Author here. Went to bed early with a nasty cold last night and woke up this
morning to all these lovely comments - thank you for all the great feedback.

I'll try to answer any questions inline.

------
timmipetit
That's really cool! I did something similar for my thesis. We used flight
information from [http://planefinder.net/](http://planefinder.net/) as our
data set. Unfortunately no WebGL, but you can see an impression in this
Youtube video:
[https://www.youtube.com/watch?v=XvrdxLymMv0](https://www.youtube.com/watch?v=XvrdxLymMv0)
More info here:
[http://www.cs.rug.nl/svcg/SoftVis/FlightVis](http://www.cs.rug.nl/svcg/SoftVis/FlightVis)

~~~
callumprentice
Very nice Tim - I love the way you smear out the data.

I found plotting the data over Europe and the US to be a difficult
visualization problem - there is just so much data in a small space. Perhaps
changing the size of each point depending on your distance would work?

~~~
timmipetit
Yeah, especially Europe is really hard. We haven't found a solution yet for
visualizing detailed information above very dense and scarce areas at the same
time. Showing the data above a single country in Europe works a lot better
(for example:
[http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_1.pn...](http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_1.png)
and
[http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_4.pn...](http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_4.png)
). We use an option to reduce the point size based on the zoom-level.

If someone is interested, here are 2 more videos of our visualization

* [https://www.youtube.com/watch?v=GYfBvQGKE9Y](https://www.youtube.com/watch?v=GYfBvQGKE9Y) (short pulse-trails with background context, colored by altitude, above France)

* [https://www.youtube.com/watch?v=0oqxIhO69tU](https://www.youtube.com/watch?v=0oqxIhO69tU) (medium pulse-trails, no background trails, colored by direction).

For more information and pictures:
[http://www.cs.rug.nl/~alext/PAPERS/MSc/klein14.pdf](http://www.cs.rug.nl/~alext/PAPERS/MSc/klein14.pdf)

------
lgp171188
Wow, a mindblowing visualization which presents the reality to the minds of
people like me who often imagine the world is flat like on the map and connect
places by straight lines

~~~
callumprentice
Thanks. Routing over Canada & Alaska on flights from from the UK to the West
Coast isn't obvious (to me) until you see it in 3D.

------
gknoy
This is beautiful! Great job!

I have a minor complaint. When I zoom in, the rate at which the globe is
rotated does not seem to scale down adequately -- a few pixels, and what I was
trying to zoom in on (e.g., Hawaii) zips off the screen. It feels like my
mouse dragging is setting a wheel spinning, and it doesn't stop when I let go.

~~~
callumprentice
Thanks for the feedback - that's a good point. The sensitivity should reduce
the closer you are. I'll add it to the list.

~~~
kaib
More specifically when the user clicks on a specific point on the planet and
moves the mouse cursor you want that point to still be under the cursor when
the mouse button is released. You can extend this construct outside the
central sphere into a camera control that works across the screen and feels
very intuitive at any zoom level.

Google "sgi trackball" for some interesting code to point the way.

~~~
callumprentice
Thank you - I'll look that up.

------
gghh
Remarkable! Where is the flight data from?

~~~
onion2k
[http://openflights.org/data.html](http://openflights.org/data.html)

------
nvk
This is beautiful, It's amazing to see how humanity goes over every part of
the planet.

Which flights are those few going over the north pole??

[~30fps/OSX-Chrome]

~~~
dingaling
North Pole flights are North America and mid-Europe to Japan / China / Korea.

Pioneered by Finnair and KLM.

One of the ETOPS certification criteria for modern airliners is demonstrable
navigation stability and accuracy over the Pole. Navstar GPS is not so useful
there; GLONASS is better but inertial platforms still the best at those
latitudes.

~~~
Svip
SAS was the first airline to fly over the North Pole.[0]

[0]
[https://en.wikipedia.org/wiki/Scandinavian_Airlines#Trans_po...](https://en.wikipedia.org/wiki/Scandinavian_Airlines#Trans_polar_route)

------
rdtsc
Wow great work callumprentice!

All this stuff is cool:

[http://callumprentice.github.io/](http://callumprentice.github.io/)

~~~
callumprentice
Thank you! Lots of fun and very easy to dive into with a browser and an editor
- keeps me busy after my daughter goes to sleep :)

------
sizzzzlerz
An ability to zoom into a smaller region would be nice. Also, hovering the
mouse over an airport would pop up a tooltip with the airport's name and/or
code. In any case, this is amazing! Oh, and displaying country borders and/or
lat/lon lines would be great as well.

~~~
callumprentice
Good ideas. I'll add them to the list for V2. :)

------
pb4
Cool! We did something similar for worldwide public transport:

[http://tracker.geops.de/?z=8&s=1&x=1124703.9687&y=6845547.37...](http://tracker.geops.de/?z=8&s=1&x=1124703.9687&y=6845547.3769&l=transport)

------
stewdio
To make better sense of what was going on I gave it a go myself:
[http://stewd.io/airborne](http://stewd.io/airborne)

I left a lot of code commentary for anyone else trying to wrap their heads
around this stuff:
[https://github.com/stewdio/airborne](https://github.com/stewdio/airborne)

------
RankingMember
If the source data will allow it, it'd be awesome to see the different speeds
reflected in the color of the path (with white outline so it still stands
out).

Awesome visualization, great job.

Edit: Really wanted to zoom in and find an outlier plane meandering around
aimlessly, but evidently they're all professionals.

~~~
callumprentice
Ha! Look over the Bermuda Triangle :) Colors is a really good idea and I
experimented a bit with changing colors based on direction E/W and N/S - I
like the idea of using velocity though and since it's not scientifically
accurate, estimating based on position within the arc is probably good enough.

------
Kiro
OT but what's up with all the double exclamation marks in the code?

[https://github.com/callumprentice/callumprentice.github.io/b...](https://github.com/callumprentice/callumprentice.github.io/blob/master/apps/flight_stream/js/Detector.js)

~~~
masklinn
Converts a value to a true boolean: if `a` is truthy (is assimilated to `true`
in boolean contexts), `!!a` will be `true` rather than the original value.
It's equivalent to but much shorter than `Boolean(a)`, and just as readable if
you know the idiom.

------
joeblau
The first thing I noticed is that there isn't much happening below the
equator.

~~~
callumprentice
Good observation. Nothing goes over the South Pole either (it does over the
North)

------
squeaky-clean
Incredible! I could leave this open and stare at it, if it didn't make my
laptop scream like a banshee. My office deals with primarily with airlines,
and everyone found this really cool.

~~~
mahyarm
Put it on a TV screen somewhere with a cheap computer running it, I bet people
would love that.

~~~
callumprentice
Thanks both - maybe I should make it into a screen saver (not that it'd save
much :))

------
rkangel
Not working for me on Chrome Version 40.0.2214.111 (64-bit), running on Ubuntu
14.04 (just get Flight Stream and a black background). Works beautifuly on
Firefox on the same machine though!

~~~
callumprentice
Strange - as far as I know, that version of Chrome supports WebGL. Do other
WebGL apps work ok?

------
jjwiseman
These are great circle representations of routes, not flights, right?

~~~
callumprentice
Exactly. A lot of discussion about a version that tracked flights in real time
- hopefully for a V2 sometime.

------
gchokov
Beautiful! (~36fps on Safari, Mid 2012 Retina MBP, 2.3GHz)

~~~
runeks
FWIW: >60fps (hits vsync limit) in 1080p full screen, Chrome 41.0.2267.0,
Ubuntu 14.04, Radeon HD 5770

But it increases CPU usage (by Chrome) to 100% on one of my cores, so it
definitely seems CPU bound, on my system at least.

------
adaml_623
Gorgeous but those planes are flying in space thousands of kilometers above
the surface :-)

A clock and animating sunlight/rotation of the earth would be fantastic.

~~~
callumprentice
Thanks. Just before I pushed it out to my site, I worked out the real values
based on commercial flights and was horrified by how far out the altitudes
were. I tried it with correct values and it just didn't look as good so I'll
put it down to creative license :)

Great idea for a clock and sunlight map - I'll add those to the list for v2.

------
nodesocket
Is the world visualization available on GitHub? Is a framework where you could
pass arbitrary lat/longs?

~~~
akosednar
The author's specific code can be found here:
[https://github.com/callumprentice/callumprentice.github.io/t...](https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/flight_stream)

Where he loads the flights in can be found in js/flights_one.js

------
z3t4
The polar regions seems a bit stretched out. Is the earth in perspective?
Making the flight paths accurate!?

~~~
phreeza
Probably an artifact of the texture being in a cylindrical projection, mapped
back onto a shpere. Here is the texture image
[http://callumprentice.github.io/apps/flight_stream/images/ea...](http://callumprentice.github.io/apps/flight_stream/images/earth_airports.png)

------
JohnDoe365
Where is the data coming from? API? If not, in what file is it stored on the
source code?

~~~
callumprentice
[https://raw.githubusercontent.com/callumprentice/callumprent...](https://raw.githubusercontent.com/callumprentice/callumprentice.github.io/master/apps/flight_stream/js/flights_one.js)

It's munged data from the Open Flights web site.

------
mrfusion
What does the speed setting do? Over what time frame is this showing?

~~~
callumprentice
The travel time between any 2 airports is random and increasing the speed
value just makes that random value smaller in general. I liked the way it
looked at fast and slow speeds so I figured it was worth adding an option.

------
abest
On my end, it runs great in Firefox but runs at 3 fps in Chrome

~~~
nness
Runs 15~ fps (estimation) on Chrome on my Android HTC One M8, which is
impressive

~~~
callumprentice
Amazing and thanks for letting me know. Its push around a lot of data so I
didn't even try to make it work on mobile. Maybe I should take another look.

------
z3t4
If this was in real time, it would be even cooler!

------
zobzu
This is really nicely done! High in FPS too :)

------
shahocean
Amazing work! Great!

------
bechampion
mind blowing!

------
tedajax
Hey Callum!

-ajax

~~~
callumprentice
Hey Ted :)

------
pjmlp
Interesting, on a desktop browser.

On mobiles, 100% probability to kill Chrome on Android.

~~~
Cthulhu_
Because there might be some optimization tricks the author missed, or because
the canvas implementation on mobile is bad/unoptimized/doesn't use hardware
accelleration? Also, "probability" indicates you didn't even try it.

I did (both Safari and Chrome, iPhone 6), the framerate is definitely low (~10
frames per second?) but it didn't kill it so your statement might be a bit
exaggerated. Framerate is a bit lower on Chrome, too.

~~~
pjmlp
It did kill it, Chrome just terminates.

Samsung S3, running Android 4.3 with Chrome 40.0.2214.109.

The 100% probability is that it terminates the Chrome process every time I
access the page.

But I guess down voting my original post makes people feel better about WebGL
support on the platforms that are getting the desktop back.

~~~
dagw
For what it's worth it doesn't crash for me (Android 4.4, same version of
Chrome). However I just get random flashing glitches and no actual graphics.

