
Voronoi Airports: all 54,000+ of them rendered in WebGL - callumprentice
https://voronoi.surge.sh
======
BenoitP
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](https://threejs.org/examples/misc_controls_orbit.html)

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

~~~
BenoitP
Ah! 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....](http://callumprentice.github.io/apps/country_selector/index.html)

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

~~~
BenoitP
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!

~~~
callumprentice
Sure thing - always happy to help where I can.

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

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

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

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

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

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

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

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

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

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

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

------
simulate
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](https://news.ycombinator.com/item?id=17337600)

------
callumprentice
[https://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
Looks like that is at 0 latitude, 0 longitude, so that might be a result of
bad input data.

~~~
callumprentice
Oh yes of course. Nice find.

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

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

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

~~~
spirographer
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,

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

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

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

~~~
callumprentice
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!

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

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

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

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

~~~
greggman
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

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

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

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

~~~
callumprentice
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?

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

~~~
alexlrobertson
But not all recreational airports.

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

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

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

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

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

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

~~~
C7H8N4O2
_" 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
thanks!

------
chx
Laptop fans hate him!

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

~~~
callumprentice
Helpful - thanks.

------
aaaaaaass
Only negative comments in this thread...

