
Rotate the world - pjan
http://www.jasondavies.com/maps/rotate/
======
BitMastro
This is just my personal preference, but I believe the naive implementation is
miles ahead of the improved ones.

The improved version needs at least two movements to go to the other side of
the world, doesn't follow the rotation if the cursor is too fast and worse
than all, performs a gamma rotation for each non-equatorial point of the
sphere.

Since we have two degrees of freedom on the screen, I expect to use them to
drive the two most used rotations, and maybe have another control for the
roll. In addition, we are used to have maps with North pointing up (and
sometimes pointing South), so the roll is almost never used.

~~~
jasondavies
Thanks for the feedback!

I agree it’s not the most intuitive approach for all situations, particularly
when you’re used to a North-South orientation for maps. The rolling is perhaps
made more obvious with my use of a graticule. For this reason, I’d be
interested in optionally restricting to two degrees of freedom when dragging
on the globe, and the third angle could be modified when dragging outside the
globe only. So the point being dragged on the globe could still remain under
the cursor where possible using this approach.

Interestingly, Google Earth uses the same approach as I do, though perhaps it
seems less obvious without a graticule.

~~~
BitMastro
I don't like Google Earth's approach too much either, I always have to correct
back the roll..

I can understand it when you reach the zoom level of a city, at that point you
correlate the data on the map with actual visual memories at the street level,
where Up does not correspond to North anymore, but instead is related to
Forward. Maybe an exponential transition between the two systems as you zoom
in?

Interestingly, on a phone it is also trickier because there is not "grab"
equivalent and the y axis also makes the page scroll.

Sorry, I don't want to sound overly critic :)

------
Trufa
Slightly off topic, but I was so surprised how steep the Axial tilt is
([http://en.wikipedia.org/wiki/Axial_tilt](http://en.wikipedia.org/wiki/Axial_tilt))
I had always known that it was 23º but never actually visualized it.

Try putting γ=23º in the Euler angles and rotate the earth with λ.

------
djrobstep
Firefox you're breaking my heart. This performs terribly in FF, fine in
Chrome.

~~~
dclowd9901
It could be that his logic optimizes for chrome. I'm sure with a bit more
time, he could make it work smoothly in FF... Or fuck it, just write it in
ASM, which would be insanely faster.

~~~
1wheel
The issue isn't any sort of optimization for chrome, FF just chokes when it
tries to render SVGs quickly. See also:
[http://roadtolarissa.com/twisters/](http://roadtolarissa.com/twisters/)

------
0x0
Isn't this also called "Arcball rotation"? The biggest advantage over the
naïve implementation is no un-intuitive "sideways" rotation after a few
sequences of rotation.

~~~
cscheid
The important thing in this demo is that his code reduces to arcball-like
rotation in the globe projection, but works on arbitrary map projections.
Notice how the interaction works for Eisenlohr's projection in the same way as
the globe, but the behavior must be different, of course, since the
projections are so unlike each other.

------
Aardwolf
This is like 100 times faster in Chromium than in Firefox (on Linux). Any idea
why? Is JS in FF really that much slower?

------
dalyons
As an experiment I used this D3 geo stuff to visualize my last year or so
across the globe:

[http://dalyons.github.io/where-is-
dave/index.html?use_cached...](http://dalyons.github.io/where-is-
dave/index.html?use_cached=true&ga=true)

Works much better on chrome than FF unfortunately.

I thought it turned out pretty cool, as a practical example of what you can
use this stuff for. It was super fun to build, D3 is pretty awesome.

You can also load your own photos from FB if you want to see your own track,
its just static html/js, i dont store anything anywhere.

~~~
wingerlang
Cool. This is pretty much exactly what I've been thinking of doing. The path,
pictures and map - more or less spot on.

------
valtron
Another way of doing this (without versors):

Let u and v be the unit vectors of the initial and final click location. We
want an R s.t. Ru = v. Create an orthonormal basis ON(u) and ON(v) (you can
use the QR decomposition for the vector concatenated with I).

R = ON(v) ON(u)^-1 = ON(v) ON(u)^T

------
kosma
I've been writing accelerometer coordinate system rotation code for the whole
day. Almost melted my brain; trying to imagine 3D rotation is hard, especially
when you lack the proper tools and have very little experience with it.
Finally got the thing working; decided to have one last look at HN before
going to bed. It was then when I saw "Rotate the world" and thought to myself:
"well this better not be about Euler angles!"

Yup. Thanks pjan, you made my day brighter :)

------
sddhrthrt
India is distorted - Kashmir and all. You better be careful about the borders
that are under dispute. I took into consideration that it's a low-res border,
even then it's way off.

I dont know if the details of map itself are important or not, because I
understand it's an exhibition of the interface itself. Just my opinion.

------
edoloughlin
Anyone else tried this on Linux? On Mint 15 and Ubuntu 13.04 FF25 is has >1
second lag. Chrome 30 is fine.

~~~
Trufa
I think it's firefox not linux.

~~~
bzbarsky
Firefox on Mac is fine (well, more or less; I just filed
[https://bugzilla.mozilla.org/show_bug.cgi?id=936472](https://bugzilla.mozilla.org/show_bug.cgi?id=936472)
on the slight lag I see there), which suggests the actual issue is cairo's
path drawing code, which is not used by Firefox on Mac, but is used on Windows
and Linux.

~~~
Touche
Definitely laggier on FF on Mac than Chrome.

~~~
bzbarsky
Right, but not 1s+ lag like people are seeing on Windows/Linux.

------
TipiPerka
Very nice. Makes me think of
[http://aladin.u-strasbg.fr/AladinLite/app/?survey=P/Mellinge...](http://aladin.u-strasbg.fr/AladinLite/app/?survey=P/Mellinger/color&zoom=160&cooFrame=gal&target=sgr+a*)

------
fijal
Please Please Please include "show the shortest path between points A and B".

------
SeanDav
Unless I missed it, where does one get the continent shapes and country
outlines?

~~~
jasondavies
The files used are from Mike Bostock’s World Atlas TopoJSON project:
[https://github.com/mbostock/world-atlas](https://github.com/mbostock/world-
atlas)

They are in turn derived from Natural Earth data:
[http://www.naturalearthdata.com/downloads/110m-cultural-
vect...](http://www.naturalearthdata.com/downloads/110m-cultural-vectors/)

------
willvarfar
I have a couple of questions, and I'm unfamiliar with the Javascript
frameworks so I struggle a bit to find the answers in the source:

Are the globes drawn with perspective?

And can it suffer from gimbal lock?

~~~
seabee
Since it's based around quaternions it shouldn't suffer from gimbal lock.

As for perspective, what do you mean by that? Aren't globes always in
perspective?

~~~
willvarfar
You can draw orthogonally too. I've messed around with globes and had problems
spinning them, hence my curiosity.

[http://www.ludumdare.com/compo/minild-40/?action=preview&uid...](http://www.ludumdare.com/compo/minild-40/?action=preview&uid=10313)

------
sz4kerto
Wow, that's _exactly_ what I needed yesterday. Thanks a lot.

.. however, some more explanation for how the improved rotation works would
have been useful.

------
cLeEOGPw
Are the scale of continents right? Because Australia looks almost bigger than
Europe, and Africa looks many times bigger than Europe.

~~~
jboynyc
The true size of Africa: [http://flowingdata.com/2010/10/18/true-size-of-
africa/](http://flowingdata.com/2010/10/18/true-size-of-africa/)

The historian Marshall Hodgson referred to the Mercator projection as the "Jim
Crow projection." This is why.

~~~
cLeEOGPw
I found my mistake. When looking at Europe for some reason I mentally
subtracted first the Scandinavia and then Russia, that's why it seemed so
tiny. Looking at wiki I can see Africa is only 3 times larger than Europe,
which is what I would have expected.

~~~
mxfh
Try rotating this :)
[http://mxfh.github.io/d3canvasglobes/#GRL](http://mxfh.github.io/d3canvasglobes/#GRL)

------
ananth99
Brilliant stuff! Would've been better if it had the names of the places. Kinda
like a virtual globe. ;)

------
deletes
Rotating maxed out my cpu in both chrome and firefox but only chrome didn't
stutter.

------
bebop
Great work! This is a really nice use of d3 and a great visualization tool.

------
hcarvalhoalves
It's more useful when you keep the north at north.

------
dllthomas
Man oh man, do I hate Euler angles...

