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.
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).
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.
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.
* 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.
> 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!
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.
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..
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.
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 :)
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.
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.
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 :-)
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.
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 :)
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?
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.
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.
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.
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
Make the rotation speed zoom dependent. Zooming in far shouldn’t increase the distance/sensitivity of rotation movements or velocity. Especially awkward on touch.
57 comments
[ 4.9 ms ] story [ 109 ms ] thread1. 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.
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.
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
Thank you.
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
* 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.
> 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!
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.
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.
Excited to work on that tonight when my daughter goes to sleep :)
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,
FF 60.0.2 on Win7
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 :-)
Thanks for the feedback.
Maybe it's not working?
However it doesn't seem that your cells are using geodesics, so it's probably not on the surface.
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
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