8 ms·
Voronoi Airports: all 54,000+ of them rendered in WebGL
- superdimwit 8y agoCool, but mouse sensitivity is too high / doesn't scale with zoom
- callumprentice 8y agoNoted and agreed - I added to the list of things to work on. Thank you!
- maartn 8y agoCool, but so dark? And where are the airports? I only see lined globe in very dark environment...
- hughes 8y agoAdjust the Earth opacity level at the bottom of the page.
- majewsky 8y agoNice! Two things: 1. Can you put two separate opacity controls for the base map and the Voronoi regions? I like the appearance of the original better than anything I could configure with this single opacity slider. 2. A lot of regions meet at the north and south poles. That's something that the original doesn't have, so I'd guess that's an artifact of numerical errors.
- callumprentice 8y agoGood idea re: point 1. Point 2 is the main thing to fix. I think it's because I don't have a concept of wrapping when I generate the cells initially. Thanks for the feedback.
- callumprentice 8y agoI added a slider for the voronoi cell line opacity. Thanks for the feedback.
- aaaaaaass 8y agoOnly negative comments in this thread...
- chx 8y agoLaptop fans hate him!
- Hupriene 8y agoOne usability issue I noticed with both this and the original inspiration is that it's hard to keep the globe in the usual north-south orientation. I feel the map would be easier to stay oriented in if the the north-south axis were restricted to the YZ plane (i.e. on screen vertical/directly toward the user normal to the screen).
- palotasb 8y agoOne way to solve this is to at least treat dragging near the center of the screen as a simple rotation around the axis perpendicular to mouse motion. When dragging the mouse by the side of the screen (up-down near the side or left-right near the top/bottom), do the same but also gently rotate the previous rotation axis itself too. I've also noticed that the rotation does not exactly follow the mouse when the globe is zoomed in to show all the small airports in Europe.
- callumprentice 8y agoThanks both - zoomed in controls definitely need some work. I changed the controls to a new model after another comment here which I think is better.
- BenoitP 8y agoNice! But it'd be nicer with earth's rotational axis staying in the same place. In app.js, switching from THREE.TrackballControls to THREE.OrbitControls will make it behave like this: https://threejs.org/examples/misc_controls_orbit.html https://threejs.org/examples/misc_controls_orbit.html
- callumprentice 8y agoYou're right and I often go back and forth on both controls when making experiments like this. I like the freedom to explore the scene with TrackballControls but I think you're right and the OrbitControls makes it easier to use. Thank you.
- lakechfoma 8y agoI had fun using this with an actual trackball. The physical to digital match is satisfying.
- TOGoS 8y agoI'm the opposite of OP. I hate it when people choose an arbitrary axis. Let me rotate the ball however I want.
- BenoitP 8y agoAh! I didn't get the opportunity to look up you other projects from http://callumprentice.github.io/ http://callumprentice.github.io/ before commenting. These are quite impressive. How much work did this one http://callumprentice.github.io/apps/country_selector/index.html http://callumprentice.github.io/apps/country_selector/index.... take? How would you rate the difficulty of doing something similar with: * clicking areas brings a popover for more info * from PostGIS latlong polygons for, say, France's regions (and maybe hierarchical subdivisions) * replacing polygons by ones with finer details as a region is being zoomed on * coloring the regions according to a choosable statistic
- callumprentice 8y agoThanks. * Clicking areas is straightforward. * Not familiar with the data set you mention but so long as it's mostly documented it should be okay. * I've never tackled the idea of a hierarchal map even with vectors so I don't know - with the right data, the bit I'm most concern about is the transition from one data set to the next. * Coloring regions is straightforward I don't have spare time to do it but am happy to help if you get stuck.
- specialist 8y agoVery nice. Curious: Most web browser maps translate my Mac's trackpad scroll events to zoom actions. Infuriating. Only Apple's new MapKitJS does not do this. I thought to make workaround using GreaseMonkey overrides, or whatever people do these days, but I don't do frontend stuff so would have start from scratch. Maybe someone else has a better idea.
- ajuc 8y agoSeems to show recreational and military airports as well as regular passenger ones.
- alexlrobertson 8y agoBut not all recreational airports.
- callumprentice 8y agoSurprised there are any missing - the source list seems complete. Which one is not there?
- callumprentice 8y agohttps://i.imgur.com/izznX19.png https://i.imgur.com/izznX19.png Is this just an artifact of how the cells are rendered or some strange collection of airports off the coast of Africa. Thinking it must be the former..
- MereInterest 8y agoLooks like that is at 0 latitude, 0 longitude, so that might be a result of bad input data.
- callumprentice 8y agoOh yes of course. Nice find.
- mseri 8y agoIt would be nice to be able to select or deselect different kind of airports and see how the map changes
- spirographer 8y agoGorgeous! I did notice that the international date line is marked as a voronoi border from north to south pole. If you can do some modulo math trickery you should be able to fix this. You can find all of the cells/airports forming the border to the east of the date line and add fake airports to your data set with longitude 360 larger than the original cells. These will be used to create the correct voronoi border with the cells just to the east. Everything else will stay the same. Thanks to the transparency of the globe I noticed this when @MereInterest pointed out the 0 0 coordinates of several airports. By the way if you can find a way to add the airport call letters to the cell when clicked that would be amazing.
- callumprentice 8y agoGreat suggestions - thank you. Added both to the list. Excited to work on that tonight when my daughter goes to sleep :)
- spirographer 8y agoI'm looking forward to every update that pops up. Really inspiring! I made a small error in my explanation for the date line: I meant to say "voronoi border with the cells just to the west" (instead of east) By the way if you have a list of the 0 0 coordinate airports, I can do a best effort search for their correct location. Let me know,
- callumprentice 8y agoThank you - I don't see any 0,0s in the source so I think it's something I need to take account for in the voronoi package - I'll add it to the list :)
- spirographer 8y agoif there aren't any 0 0 coordinate airports in the data set, maybe there are some strings that are not parsed as numbers and thus coerced to 0, a space or a non printing character (like a carriage return) can make something that looks like a number, not parse properly.
- zentiggr 8y agoWhen I raise the Earth opacity to try and hide the opposite-side-of-the-globe cells, all the cells are hidden by the Earth layer, just purple dots left. FF 60.0.2 on Win7
- callumprentice 8y agoI haven't had chance to try it on FF yet - I'll switch my box over to Windows later, install FF and see if I can figure out why. Thank you!
- jffry 8y agoThis is really awesome, thanks for sharing! FWIW I see the same issue on the latest Chrome on MacOS. Maybe the cell boundary lines are ending up _just_ inside the globe's surface, and it's close enough that it ends up looking a little different on everybody's machine? If that is the case, maybe a simple "tweak the radius of the Earth" dial might do the job :-)
- callumprentice 8y agoThanks and yep - I need to fix this. Tweaking works but introduces some other issues depending on the hardware - I have some ideas that I'll look at tonight. Thanks for the feedback.
- CharlesDodgson 8y agoNice stuff, As a geographer who does things with spatial data I have a love/hate relationship with Voronoi maps. although they are an easy way to create territories they often look too mathematical for most people to use. Geography often matters. Although they can be useful for some purposes. Nice fast webmap though :)
- brianoconnor 8y agoNice, spherical geometry is sth. I always wanted to get into. Q: Shouldn't the lines be curved, i.e. the shortest path on a sphere is a minor arc of a great circle so shouldn't the lines in the voronoi be that as well?
- callumprentice 8y agoThey are curved hopefully. Most of them at least - when the line of a cell is longer than a certain amount, I interpolate the lat/lngs across the line and make more segments. Maybe it's not working?
- carlob 8y agoThere is something weird I've noticed: the map appears to be above the Voronoi graph, so when you set its opacity to 1 it's impossible to see the graph. I was playing with that because I was annoyed by the graph at the antipodes and I wanted to get rid of it.
- callumprentice 8y agoYep - i really need to stencil the cells onto the map vs try to make them co-exist - I'll add it to the list.
- carlob 8y agoCan't you do something with some kind of generalized z occlusion? (I guess that would be r). However it doesn't seem that your cells are using geodesics, so it's probably not on the surface.
- callumprentice 8y agoYep, yep. I tried to create a great circle routes between the cell vertices if the line is longer than a threshold value. I might also see about filling each cell with triangles which I'll also need to make work with geodesics.
- bgorman 8y agoIt is really a shame Apple has decieded to kill WebGL2.
- greggman 8y agoyea that sucks. Chrome and Firefox say they expect have webgpu behind a flag by end of year and if lucky shipping in stable by end of next. Apple is heavily involved but of course Apple never announces shipping plans
- Twirrim 8y agoForgive me if I'm asking a dumb quesiton, but what are "Voronoi Airports"?
- C7H8N4O2 8y ago"In mathematics, a Voronoi diagram is a partitioning of a plane into regions based on distance to points in a specific subset of the plane." [0] Here, the points are airports. There was a related discussion yesterday about a similar project. [1] [0] https://en.wikipedia.org/wiki/Voronoi_diagram https://en.wikipedia.org/wiki/Voronoi_diagram [1] https://news.ycombinator.com/item?id=17337600 https://news.ycombinator.com/item?id=17337600
- Twirrim 8y agothanks!
- simulate 8y agoThere was a popular discussion about Voronoi Airports on the front-page of HN yesterday referencing a different project: https://news.ycombinator.com/item?id=17337600 https://news.ycombinator.com/item?id=17337600
- iamleppert 8y agoMake the rotation speed zoom dependent. Zooming in far shouldn’t increase the distance/sensitivity of rotation movements or velocity. Especially awkward on touch.
- callumprentice 8y agoThanks and yep - noted a few times and definitely important to make right.
- spirographer 8y agoList of 57 airports with lat/long between -1 and 1 from ourairports.com data set: id,ident,name,latitude_deg,longitude_deg 18539,K22W,[Duplicate] Transylvania County Airport,-0.7,0 324674,PL-0142,Erase Me 11,-0.3,0 324675,PL-0143,Erase Me 12,0,-0.3 324678,US-0610,Erase Me 13,0.4,0 323989,AU-0112,Erase Me 26,0.6,0 324033,CA-0571,Erase Me 23,0,0.6 324533,SG-0004,Erase Me 20,0.5,0 324609,LU-0007,Erase Me 2,0,0.1 324610,GB-0518,Erase Me 3,-0.1,0 324611,GB-0519,Erase Me 4,0,-0.1 324612,IM-0004,Erase Me 7,-0.2,0 324613,GB-0520,Erase Me 8,0,-0.2 324614,GB-0521,Erase Me 9,0.3,0 324673,PL-0141,Erase Me 6,0,0.2 325010,IN-0102,Erase Me 16,-0.5,0 325026,US-0667,Erase Me 17,0,-0.5 325027,PHL,Erase Me 19,0,-0.4 325053,CA-0687,Erase Me 22,-0.6,0 325235,US-0692,Erase Me 14,0,0.4 325236,US-0693,Erase Me 15,0,0.5 325303,AE-0026,Erase Me 21,0,-0.6 325311,FR-0362,Erase Me 25,0,-0.7 325333,LGW,Erase Me 24,0,0.7 325399,GB-0530,Erase Me 10,0,0.3 325562,SA-0009,Erase Me 18,-0.4,0 325563,PK-0021,Erase Me 1,0.1,0 325721,AF-0005,F@# Off Spammer!,0.7,0.7 325899,US-0792,Not anywhere near Oklahoma city,0.5,0.7 325935,US-0794,"Not Allentown unless they moved it to the middle of the Atlantic Ocean, which I doubt",0.7,0.8 325957,JNB,NOT OR Tambo International Airport,0.7,0.9 325966,US-0796,Not DTW although Detroit can be just as isolated,0.6,0.8 326149,CA-0707,yyz,0,0 326150,GB-0536,LHR,0,0 326151,GB-0537,heathrow,0,0 326153,AU-0116,SYD,0,0 326154,AU-0117,MEL,0,0 326155,AU-0118,LST,0,0 326345,MA-0002,cmn,0,0 326346,CMN,CMN,0,0 326611,NO-0074,Mike Tom,0,0 328135,EG-0005,Cairo,0,0 326459,CDG,ஜWAZIFA ღ//ღDUAღ//ღAMALஜpasand Ki Shadi Ka Wazifa +91- 9784839439,0,0 327169,AU-0122,Frank,0,0 326654,IT-0530,Libr,0,0 328069,ZA-0159,FACN,0,0 326166,RO-0029,Popasul Zburatorilor Airfield,0,0 326167,RO-0030,Popasul Zburatorilor Airfield,0,0 324828,GB-0523,Erase Me 5,0.2,0 325970,AE-0027,F*#$ Off @james_Andrew!!!,0.6,0.7 328056,HLA,Lanseria,0,0 326274,US-0813,(Duplicate)Grandpa's Farm Mendota Airport,0.000001,0.000001 326290,YMX,International Airport of Mirabel - Academy of Aeronautics of Canada Flying School training,0,0 328024,US-0883,JFK,0,0 326886,PH-0165,clark international airport,0,0 326164,US-0805,Twin Cities,0,0 326437,NL-0049,Airport Teuge,0,0 327147,AU-0120,Wbl,0,0
- callumprentice 8y agoHelpful - thanks.