Voronoi Airports: all 54,000+ of them rendered in WebGL(voronoi.surge.sh)

105 pointsby callumprenticevor 8 Jahren57 comments

voronoi.surge.sh

Voronoi Airports: all 54,000+ of them rendered in WebGL

https://voronoi.surge.sh

57 comments

Make the rotation speed zoom dependent. Zooming in far shouldn’t increase the distance/sensitivity of rotation movements or velocity. Especially awkward on touch.

callumprenticevor 8 Jahren

Thanks and yep - noted a few times and definitely important to make right.

spirographervor 8 Jahren

List 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

callumprenticevor 8 Jahren

Helpful - thanks.

superdimwitvor 8 Jahren

Cool, but mouse sensitivity is too high / doesn't scale with zoom

callumprenticevor 8 Jahren

Noted and agreed - I added to the list of things to work on. Thank you!

maartnvor 8 Jahren

Cool, but so dark? And where are the airports? I only see lined globe in very dark environment...

hughesvor 8 Jahren

Adjust the Earth opacity level at the bottom of the page.

majewskyvor 8 Jahren

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

callumprenticevor 8 Jahren

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

callumprenticevor 8 Jahren

I added a slider for the voronoi cell line opacity. Thanks for the feedback.

aaaaaaassvor 8 Jahren

Only negative comments in this thread...

chxvor 8 Jahren

Laptop fans hate him!

Huprienevor 8 Jahren

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

palotasbvor 8 Jahren

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

callumprenticevor 8 Jahren

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

BenoitPvor 8 Jahren

Nice!

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

callumprenticevor 8 Jahren

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

BenoitPvor 8 Jahren

Ah! I didn't get the opportunity to look up you other projects from

http://callumprentice.github.io/

before commenting. These are quite impressive.

How much work did this one

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

callumprenticevor 8 Jahren

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

BenoitPvor 8 Jahren

Thanks a lot for this reply!

> the bit I'm most concern about is the transition from one data set to the next.

Yep. I have dabbled a tiny amount with three.js; my understanding is that there would be at least some kind of lag, as a new geometry is inserted into the pipeline. I don't know about trying to transition a mesh into another one.

> I don't have spare time to do it but am happy to help if you get stuck.

Damn, I was not expecting that you would even ponder doing it. You seem like such a nice person.

The context of my asking is a for professional project where some visualization could help in selling it. Customers love the shiny. If I go on doing it, I'll let you know!

callumprenticevor 8 Jahren

Sure thing - always happy to help where I can.

lakechfomavor 8 Jahren

I had fun using this with an actual trackball. The physical to digital match is satisfying.

TOGoSvor 8 Jahren

I'm the opposite of OP. I hate it when people choose an arbitrary axis. Let me rotate the ball however I want.

phyzomevor 8 Jahren

Is there a way to turn down/off the momentum? I can't get it positioned properly, since it keeps spinning for a while after I let go.

callumprenticevor 8 Jahren

I didn't add that but it could be an option in the URL perhaps if it was bothersome.

callumprenticevor 8 Jahren

I made the change and pushed it out - much better I think. Thank you.

specialistvor 8 Jahren

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

ajucvor 8 Jahren

Seems to show recreational and military airports as well as regular passenger ones.

alexlrobertsonvor 8 Jahren

But not all recreational airports.

callumprenticevor 8 Jahren

Surprised there are any missing - the source list seems complete. Which one is not there?

callumprenticevor 8 Jahren

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

MereInterestvor 8 Jahren

Looks like that is at 0 latitude, 0 longitude, so that might be a result of bad input data.

callumprenticevor 8 Jahren

Oh yes of course. Nice find.

mserivor 8 Jahren

It would be nice to be able to select or deselect different kind of airports and see how the map changes

spirographervor 8 Jahren

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

callumprenticevor 8 Jahren

Great suggestions - thank you. Added both to the list.

Excited to work on that tonight when my daughter goes to sleep :)

spirographervor 8 Jahren

I'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,

callumprenticevor 8 Jahren

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

spirographervor 8 Jahren

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

zentiggrvor 8 Jahren

When 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

callumprenticevor 8 Jahren

I 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!

jffryvor 8 Jahren

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

callumprenticevor 8 Jahren

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

CharlesDodgsonvor 8 Jahren

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

brianoconnorvor 8 Jahren

Nice, 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?

callumprenticevor 8 Jahren

They 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?

carlobvor 8 Jahren

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

callumprenticevor 8 Jahren

Yep - i really need to stencil the cells onto the map vs try to make them co-exist - I'll add it to the list.

carlobvor 8 Jahren

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

callumprenticevor 8 Jahren

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

bgormanvor 8 Jahren

It is really a shame Apple has decieded to kill WebGL2.

greggmanvor 8 Jahren

yea 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

Twirrimvor 8 Jahren

Forgive me if I'm asking a dumb quesiton, but what are "Voronoi Airports"?

C7H8N4O2vor 8 Jahren

"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

[1] https://news.ycombinator.com/item?id=17337600

Twirrimvor 8 Jahren

thanks!

simulatevor 8 Jahren

There 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