10 ms·
Airline flights of the world visualized with WebGL
- abest 12y agoOn my end, it runs great in Firefox but runs at 3 fps in Chrome
- MichaelApproved 12y agoWith my FF Win7, I can't change the speed.
- nness 12y agoRuns 15~ fps (estimation) on Chrome on my Android HTC One M8, which is impressive
- callumprentice 12y agoAmazing 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.
- callumprentice 12y agoThanks 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.
- gchokov 12y agoBeautiful! (~36fps on Safari, Mid 2012 Retina MBP, 2.3GHz)
- jvermillard 12y ago~20fps on my nexus 9 (chrome)
- runeks 12y agoFWIW: >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.
- callumprentice 12y agoThanks 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.
- qubitcoder 12y agoAlso 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.
- nodesocket 12y agoIs the world visualization available on GitHub? Is a framework where you could pass arbitrary lat/longs?
- st0p 12y agohttp://www.webglearth.org/ http://www.webglearth.org/
- akosednar 12y agoThe author's specific code can be found here: https://github.com/callumprentice/callumprentice.github.io/tree/master/apps/flight_stream https://github.com/callumprentice/callumprentice.github.io/t... Where he loads the flights in can be found in js/flights_one.js
- callumprentice 12y agoThere are a bunch of off the shelf solutions like st0p pointed out. Otherwise, all the code is available at my site (http://callum.com http://callum.com) along with a bunch of other globe based samples. Let me know if I can help.
- gghh 12y agoRemarkable! Where is the flight data from?
- onion2k 12y agohttp://openflights.org/data.html http://openflights.org/data.html
- callumprentice 12y agoYep, from the Open Flights web site (some munging to combine datasets).
- nvk 12y agoThis 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 12y agoNorth 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 12y agoSAS was the first airline to fly over the North Pole.[0] [0] https://en.wikipedia.org/wiki/Scandinavian_Airlines#Trans_polar_route https://en.wikipedia.org/wiki/Scandinavian_Airlines#Trans_po...
- zurn 12y agoThe "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.
- callumprentice 12y agoI 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.
- zobzu 12y agoThis is really nicely done! High in FPS too :)
- tedajax 12y agoHey Callum! -ajax
- callumprentice 12y agoHey Ted :)
- timmipetit 12y agoThat'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 12y agoVery 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 12y agoYeah, 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.png http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_1.pn... and http://www.cs.rug.nl/svcg/uploads/SoftVis/trails_length_4.png 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 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
- deleted 12y ago[deleted]
- z3t4 12y agoIf this was in real time, it would be even cooler!
- z3t4 12y agoThe polar regions seems a bit stretched out. Is the earth in perspective? Making the flight paths accurate!?
- phreeza 12y agoProbably 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/earth_airports.png http://callumprentice.github.io/apps/flight_stream/images/ea...
- callumprentice 12y agoYep, 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.
- Kiro 12y agoOT but what's up with all the double exclamation marks in the code? https://github.com/callumprentice/callumprentice.github.io/blob/master/apps/flight_stream/js/Detector.js https://github.com/callumprentice/callumprentice.github.io/b...
- masklinn 12y agoConverts 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.
- film42 12y agoDouble exclamation marks force a true value, as opposed to a truthy one. For example: SomethingTruthy => TruthyThing !SomethingTruthy => False !!SomethingTruthy => True
- benihana 12y agoEssentially, it returns whether a value exists or not
- callumprentice 12y agoThanks 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.
- adaml_623 12y agoGorgeous 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.
- huuu 12y agoIn Alaska planes fly like rockets ;)
- callumprentice 12y agoThanks. 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.
- JohnDoe365 12y agoWhere is the data coming from? API? If not, in what file is it stored on the source code?
- callumprentice 12y agohttps://raw.githubusercontent.com/callumprentice/callumprentice.github.io/master/apps/flight_stream/js/flights_one.js https://raw.githubusercontent.com/callumprentice/callumprent... It's munged data from the Open Flights web site.
- pjmlp 12y agoInteresting, on a desktop browser. On mobiles, 100% probability to kill Chrome on Android.
- Cthulhu_ 12y agoBecause 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 12y agoIt 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 12y agoFor 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.
- callumprentice 12y agoYeah, 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.
- pjmlp 12y agoAs I mentioned in another thread, on my mobile Chrome just dies, it is not even sluggish.
- shahocean 12y agoAmazing work! Great!
- bechampion 12y agomind blowing!
- lgp171188 12y agoWow, 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 12y agoThanks. 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.
- callumprentice 12y agoAuthor 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.
- sizzzzlerz 12y agoAn 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 12y agoGood ideas. I'll add them to the list for V2. :)
- RankingMember 12y agoIf 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 12y agoHa! 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.
- pb4 12y agoCool! We did something similar for worldwide public transport: http://tracker.geops.de/?z=8&s=1&x=1124703.9687&y=6845547.3769&l=transport http://tracker.geops.de/?z=8&s=1&x=1124703.9687&y=6845547.37...
- mrfusion 12y agoWhat does the speed setting do? Over what time frame is this showing?
- callumprentice 12y agoThe 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.
- gknoy 12y agoThis 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 12y agoThanks for the feedback - that's a good point. The sensitivity should reduce the closer you are. I'll add it to the list.
- kaib 12y agoMore 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 12y agoThank you - I'll look that up.
- squeaky-clean 12y agoIncredible! 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 12y agoPut it on a TV screen somewhere with a cheap computer running it, I bet people would love that.
- callumprentice 12y agoThanks both - maybe I should make it into a screen saver (not that it'd save much :))
- rkangel 12y agoNot 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 12y agoStrange - as far as I know, that version of Chrome supports WebGL. Do other WebGL apps work ok?
- joeblau 12y agoThe first thing I noticed is that there isn't much happening below the equator.
- callumprentice 12y agoGood observation. Nothing goes over the South Pole either (it does over the North)
- rdtsc 12y agoWow great work callumprentice! All this stuff is cool: http://callumprentice.github.io/ http://callumprentice.github.io/
- callumprentice 12y agoThank 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 :)
- jjwiseman 12y agoThese are great circle representations of routes, not flights, right?
- callumprentice 12y agoExactly. A lot of discussion about a version that tracked flights in real time - hopefully for a V2 sometime.
- stewdio 12y agoTo 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