Airline flights of the world visualized with WebGL | Hacker News Reader

Airline flights of the world visualized with WebGL

callumprentice.github.io

197 pointscallumprentice77 comments

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.

That's really cool! I did something similar for my thesis. We used flight information from 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 More info here: http://www.cs.rug.nl/svcg/SoftVis/FlightVis

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?

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... and http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_4.pn... ). 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 (short pulse-trails with background context, colored by altitude, above France)

* 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

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

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.

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.

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

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.

Thank you - I'll look that up.

Remarkable! Where is the flight data from?

http://openflights.org/data.html

Yep, from the Open Flights web site (some munging to combine datasets).

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]

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.

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

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

The "about" text says they're geographically correct routes, but direct great circle paths between departure/destination airports of flights. Not to say there aren't any, see sibling comment.

I may have misused the term geographically - it's just the shortest, great circle route between 2 airports in the data. As the informed comments say though, there are flights that go over the poles - I think the longest commercial flight for a while was a Singapore Airlines NYC to SIN over the pole.

Wow great work callumprentice!

All this stuff is cool:

http://callumprentice.github.io/

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 :)

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.

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

Cool! We did something similar for worldwide public transport:

http://tracker.geops.de/?z=8&s=1&x=1124703.9687&y=6845547.37...

To make better sense of what was going on I gave it a go myself: 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

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.

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.

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

https://github.com/callumprentice/callumprentice.github.io/b...

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.

Double exclamation marks force a true value, as opposed to a truthy one. For example:

    SomethingTruthy => TruthyThing
    !SomethingTruthy => False
    !!SomethingTruthy => True

Essentially, it returns whether a value exists or not

Thanks for explanations. Also worth pointing out that that code is part of Three.js - an amazing library that makes it very straightforward to do things like this.

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

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

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.

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

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

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!

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

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

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

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

~20fps on my nexus 9 (chrome)

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.

Thanks for the feedback in this thread. It is CPU bound with the calculations to move the points around - I wonder if I could push that off to the GPU - it's all really just simple trig.

Also have the Mid 2012 Retina MBP at 2.3GHz.

Rendering at ~60fps in Chrome 42.0.2307.0 canary (64-bit).

Interestingly, when switching to Safari 8, performance drops to ~36fps as well.

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.

In Alaska planes fly like rockets ;)

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.

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

http://www.webglearth.org/

The author's specific code can be found here: https://github.com/callumprentice/callumprentice.github.io/t...

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

There are a bunch of off the shelf solutions like st0p pointed out. Otherwise, all the code is available at my site (http://callum.com) along with a bunch of other globe based samples. Let me know if I can help.

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

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...

Yep, exactly as phreeza pointed out. I've seen ways of fixing it to make it more accurate but as far as I know, the extra effort and time to render isn't worth the cost.

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

https://raw.githubusercontent.com/callumprentice/callumprent...

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

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

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.

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

With my FF Win7, I can't change the speed.

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

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.

Thanks for the feedback - I developed it on OS X Chrome and it runs well (60 FPS) there for me. Which version of Chrome? Surprised there is such a difference.

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

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

Amazing work! Great!

mind blowing!

Hey Callum!

-ajax

Hey Ted :)

Interesting, on a desktop browser.

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

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.

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.

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.

Yeah, it's really targeted at desktop because of the volume of data but I expect I have missed a bunch of optimization tricks. It's simple enough that I should be able to iterate on it.

As I mentioned in another thread, on my mobile Chrome just dies, it is not even sluggish.

Maybe a shader issue then - WebGL is still fairly new on mobile devices.

Reply on news.ycombinator.com