To help myself understand how the area of Web Mercator tiles varies across the globe, I extended my map visualization. I find it a helpful reminder of how, despite having equivalent sizes on the mercator map, the tiles are actually far from equally sized.
This has several implications in the realm of analytics. Web Mercator’s tiling scheme covers the majority of the globe in regular, power of 2 square tiles. It’s fantastically practical. It’s very tempting simply tile a bunch of data into WebMercator and then do analytics on it. If you do this, important not to forget that you’re failing to preserve area.
I created a blog post around a vizualization I created to communicate how map projections distort the true earth. Often, people are unaware of how a visualization presented as a map can distort the truth. I wanted to be able to quickly get a feel for a given projection. It’s also quite interesting and fun to play with the tool.
I wanted to ease people into the concepts and the different representations of the map. I did this by engaging in conversation with the reader. By slowly introducing more and more concepts, we explored the Mercator projection and used it as an example to explain the rationale behind the tool.
I created the vizualization as a web component. A web component is effectively a custom html tag that operates in isolation from the DOM. This made it easy to reproduce the maps several times across the blog post while keeping the DOM relatively clean.
The blog is in fact a Jekyll blog hosted on github pages. The source for the blog post and the web component is all available on my github account.
I spent some time improving the post based on feedback I received. Examples of the effect of the distortion in google maps. Simpler explanations. Improved layout and formatting. Even an AB test :D
The AB test was directed at these two different versions: Version A Version B
Despite getting about 5k views during the AB test, I was unable to get a clear result.
I was attempting to ‘give a man a net’ instead of ‘give a man a fish’. I want to arm people with some tools they can use to better understand how a map can distort shape and area. It is up to the reader to decide which map projection they want to use to visualise x,y or z. I hope, however, to enable them to make a more informed decision than they would otherwise.
| color | information |
|---|---|
| black | limit of the map |
| pale green | land |
| dark green | country borders |
| red | circles of constant area |
| blue | geodesic graticule |
3 Orthographic projection maps.
1 Orthographic projection map with rotation enabled and a ‘recenter’ button.
Here I start off slowly, reminding the reader of some of the basics and introducing them to the idea of interactivity. The limitations of the Orthographic projection are highlighted along with the limitations of an interactive Orthographic projection with rotation.
1 Mercator projection map.
1 Interactive Orthographic projection map alongside a static Mercator projection map.
The first ‘real’ projection that the user sees is the Mercator projections. We discuss some of the advantages and disadvantages of the Mercator projection. The reader is encouraged to use the side by side ‘globe’ and Mercator map to get an idea of the distortion.
Visual encodings in the form of the area of countries are less effective due to the reader’s familiarity with seeing the world in this way. The map of the right seems normal but is apparently wrong when compared to the one on the left.
1 rotateable Orthographic projection map with circles of constant area (NT Indicatrice) alongside 1 static Mercator projection map, with the same NT Indicatrice.
Here the reader is presented with the same two maps as in the previous section with the addition of a new, less familiar visual encoding. The reader is suddenly able to reason about the distortion in a different way when presented with a map covered with the familiar circle of equal area. On the left, the circles all appear to be the same size, on the right, they are distorted.
1 static Equirectangular projection map with NT Indicatrice
1 static Orthographic projection map, 1 static Equirectangular projection map, 1 Mercator projection map, all alongside one another.
2 Google Map views at the same zoom level of different latitudes of the earth. Automobiles in the frame. Additional visual encoding of scale via size comparison of everyday objects.
Here the reader gains some impression of how the Mercator projections came to be. The reader is also more generally familiarized with the concept that any 2D map of the globe is inherently distorted. Visual encodings in the form of circles of equal area accompany a progression of projections.
A new visual encoding is introduced in the form of familiar everyday objects. Cars. Two Google maps are presented that illustrate the distortion of the Mercator projection as the apparent size of cars at different latitudes on the earth.
A simple statement. Two dimensional World Maps are inherently distorted.
1 Orthographic projection map with NT Indicatrice alongside 1 Mercator projection map, with the same NT Indicatrice. This time, both have rotation enabled and the rotation of the two projections is bound together.
1 Orthographic projection map with Geodesic Graticules alongside 1 Mercator projection map, with the same Geodesic Graticules. Both have rotation enabled and the rotation of the two projections is bound together. New visual encoding in the form of straight lines enclosing areas of similar area being distorted by the projection. Straight lines -> curved lines as they are distorted.
1 Orthographic map with Geodesic Graticules above a Goode Homolosine map with the same Geodesic Graticules. Both have rotation enabled and bound.
Now that the reader is somewhat more familiar with the problem, the hand holding stops. They are introduced to two novel visual encodings that they can use to explore map distortion.
The first has already been seen. The circles illustrate preservation of area and independent scaling in the longitudinal and latitudinal directions. Good for evaluating whether a projection does a good job of preserving area.
The second encoding is made up of triangles of approximately equal area. These illustrate scaling but also the preservation of straight lines. Preservation of direction. Lines which are straight on the globe are no longer straight on the 2D map.
The first has already been seen. The circles illustrate preservation of area and independent scaling in the longitudinal and latitudinal directions. Good for evaluating whether a projection does a good job of preserving area.
Default projections in the form of Orthographic and Goode Homolosine. The user is able to change the properties of the NT Indicatrice and the Geodesic Graticules. The user is also able to select the projection type from a list of different projections.
The user can modify the nature of the visual encodings to allow them to explore the map projection they choose.
Finally, the reader is invited to play with the tool and adjust the settings to make his own evaluations of a selection of projections.
This comment led to the AB test. I tried to make the beginning of the post more exciting and to showcase some interactivity up front. In the end the test was pretty inconclusive. The null hypothesis was probably true.
I addressed much of the feedback but there are some things that I still feel could be improved.
The overall feeling that I got from the feedback was that the earlier versions weren’t interactive enough. I added interaction along the way but some users weren’t aware or didn’t get to the interactive bits before giving up.
I could improve the article by highlighting interactivity more obviously, encouraging more exploration of the projections and by engaging the user earlier with more exciting visuals.
As a learning tool, I think it’s pretty good, as a ‘viral blog post’, it needs some work :P.
See end of blog post for Sources.
]]>Mandatory Accompanying Playlist
Every map you see in 2D is some kind of tradeoff between different types of distortion. It’s not always immediately obvious what tradeoffs are being made because we have been conditioned to seeing the world as a 2D projection of a 3D object. i.e. A globe unrolled onto a piece of paper. This tool helps you explore the Mercator projection to better understand it’s distortion.
Try dragging either map to see how rotation changes the shape of the map.
For a larger version with more projections, and an explanation, read on.
The world is round. Google says so. The problem is, spheres can be hard to get your head around… Imagine we want to see a map of the whole world. We might try something like this.
I’m not sure about you but I’m feeling distinctly underwhelmed. Only the countries in the center are undistorted and I can’t see the whole map. People used to put this on spinning balls right? Let’s try that.
Fun! You can even spin it!
But what if we want to see two places at once? Two globes! I know what you’re thinking. You’re thinking “Genius! Who doesn’t want two hulking great spheres on their desk, or in in their pocket?! I do! While beautiful, they are a bit impractical. They’d have to be enormous to provide the accuracy we need for sailing the high seas or finding the way around the corner to buy some milk…
The pragmatist in me is thinking that it would be nice if I could put this on a piece of paper. Thin, light, you can roll it up, lay it out on a desk. Most practical!
Someone told me about a guy that came up with ‘a popular and good’ way of making a sphere flat was something called the Mercator Projection.
The whole world is visible 🤗. Wow, Greenland looks really big though, and what’s the gigantic land mass at the bottom? Let’s put a globe next to it and work out what is going wrong.
Right. See that really big land mass at the bottom? It’s not nearly as big on the globe as on the flat map. Maybe we can add some indication of scale better compare.
A Frenchman named Tissot came up with something fancy. The general idea was to characterize local distortions; To show you what a small circle would look like when moved from the globe to the map. I’m more interested in distortion at the scale of the map I’m looking at. To characterize this, I think we could draw circles on the globe and project them into our map.
Play around with the globe a bit and get a feel for how the Mercator projection distorts area. You might have noticed that the circles drawn on the poles of the globe do not appear on the Mercator map… Well, they are barely visible, as thin lines at the top and bottom of the map. Why aren’t they visible? Well, the Mercator projection preserves the angle of intersecting lines and preserves shapes at small scale. To do this it distorts the map.
To better understand the Mercator projection, we should first look at the Equirectangular projection.
And how it relates to the globe and the Mercator projection.
The Equirectangular projection is like dropping the spherical globe into a cylinder, making tiny holes at the poles and stretching the sphere out so the points at the poles wrap around the top and bottom of the cylinder. Then you just slice the cylinder at the antimeridian and unroll it into a rectangle.
Notice that on the Equirectangular map, the height of each circle is the same but the width changes as the map gets more stretched out near the poles. In fact, as you get to a pole, you have stretched a single point out into the entire width of the map!
To remedy the horizontal stretching, the Mercator Projection stretches the globe out in the vertical direction an equal amount. This is good because it helps preserve the shape of small objects. It’s also great if you’re a sailor as you can draw a straight line on a Merctor map and if you sail along it, you will maintain a constant heading. Really useful for navigating a ship in the 1600s. In fact, Mercator was in the business of selling maps. He described his map using this projection method as a “new and augmented description of Earth corrected for the use of sailors”. Today the Mercator projection is still used to navigate the high seas.
You can see the effect of this distortion when using Google Maps. If you move north or south from the equator and stay at the same zoom level, objects will become larger 😯…😮.
Below are embedded maps of Singapore and Anchorage, Alaska at the same zoom level. Notice how the cars in Alaska are bigger than the ones in Singapore because they’ve been stretched by the Mercator projection.
In fact, this effect leads to Infinite distortion. Yes, the reason you couldn’t see the circle on the poles before is that they are cut off! The infinite distortion means we have an infinitely large map. Existential questions aside, we can thus reason that all Mercator maps are trimmed.
To help my understanding of how projections distort the globe I came up with a little tool that allows you to rotate a globe and see how the rotated globe translates into a particular map. Here is that tool comparing the globe to the Mercator projection. You can drag either map to rotate the earth and recenter the rotation with the button in the top left.
This representation helps gain understanding of how projections distort area. Projections also distort shape. This view better illustrates the distortion of shape.
The idea here is to split the globe up into similarly shaped and sized tiles. Each tile has similar area and shape on the globe so it’s easy to see the distortion on the map. Traditional graticules are neither similar in size or shape on a globe and can be misleading.
In fact, both representations give you an idea of how a map projection distorts shape and area.
Armed with these weapons you can fight back against the tyrannical cartographers of times gone by. Turn your nose up in disgust at density metrics on Mercator maps, and make up your own mind as to which projection you like best.
My favorite is below, the Goode Homolosine.
It is indeed very Goode; as an equal-area projection, it preserves area across the map. This is good for showing distribution or density. It also, in my opinion, does a good job of minimising distortion thanks in part to it’s interruptions (cuts).
Now, feel free to use this tool to play around and get a better understanding of map projections and maybe the world we live on.
The source for this blog can be found in my blog repository, the spinny map thing is a polymer web component which you can reuse. It is also on GitHub in the polymer-globe repository.
Credit to Mike Bostock for d3. Specifically for the two blocks incorporating Versor Dragging for Orthographic and Mercator projections.
Credit to Jason Davies, specifically for his Versor Dragging example.
Thanks to Jörn Hees for reading this several times despite having a PhD to finish.
]]>Mandatory Accompanying Playlist
The world is round. Google says so. The problem is, spheres can be hard to get your head around… Imagine we want to see a map of the whole world. We might try something like this.
I’m not sure about you but I’m feeling distinctly underwhelmed. Only the countries in the center are undistorted and I can’t see the whole map. People used to put this on spinning balls right? Let’s try that.
Fun! You can even spin it!
But what if we want to see two places at once? Two globes! I know what you’re thinking. You’re thinking “Genius! Who doesn’t want two hulking great spheres on their desk, or in in their pocket?! I do! While beautiful, they are a bit impractical. They’d have to be enormous to provide the accuracy we need for sailing the high seas or finding the way around the corner to buy some milk…
The pragmatist in me is thinking that it would be nice if I could put this on a piece of paper. Thin, light, you can roll it up, lay it out on a desk. Most practical!
Someone told me about a guy that came up with ‘a popular and good’ way of making a sphere flat was something called the Mercator Projection.
The whole world is visible 🤗. Wow, Greenland looks really big though, and what’s the gigantic land mass at the bottom? Let’s put a globe next to it and work out what is going wrong.
Right. See that really big land mass at the bottom? It’s not nearly as big on the globe as on the flat map. Maybe we can add some indication of scale better compare.
A Frenchman named Tissot came up with something fancy. The general idea was to characterize local distortions; To show you what a small circle would look like when moved from the globe to the map. I’m more interested in distortion at the scale of the map I’m looking at. To characterize this, I think we could draw circles on the globe and project them into our map.
Play around with the globe a bit and get a feel for how the Mercator projection distorts area. You might have noticed that the circles drawn on the poles of the globe do not appear on the Mercator map… Well, they are barely visible, as thin lines at the top and bottom of the map. Why aren’t they visible? Well, the Mercator projection preserves the angle of intersecting lines and preserves shapes at small scale. To do this it distorts the map.
To better understand the Mercator projection, we should first look at the Equirectangular projection.
And how it relates to the globe and the Mercator projection.
The Equirectangular projection is like dropping the spherical globe into a cylinder, making tiny holes at the poles and stretching the sphere out so the points at the poles wrap around the top and bottom of the cylinder. Then you just slice the cylinder at the antimeridian and unroll it into a rectangle.
Notice that on the Equirectangular map, the height of each circle is the same but the width changes as the map gets more stretched out near the poles. In fact, as you get to a pole, you have stretched a single point out into the entire width of the map!
To remedy the horizontal stretching, the Mercator Projection stretches the globe out in the vertical direction an equal amount. This is good because it helps preserve the shape of small objects. It’s also great if you’re a sailor as you can draw a straight line on a Merctor map and if you sail along it, you will maintain a constant heading. Really useful for navigating a ship in the 1600s. In fact, Mercator was in the business of selling maps. He described his map using this projection method as a “new and augmented description of Earth corrected for the use of sailors”. Today the Mercator projection is still used to navigate the high seas.
You can see the effect of this distortion when using Google Maps. If you move north or south from the equator and stay at the same zoom level, objects will become larger 😯…😮.
Below are embedded maps of Singapore and Anchorage, Alaska at the same zoom level. Notice how the cars in Alaska are bigger than the ones in Singapore because they’ve been stretched by the Mercator projection.
In fact, this effect leads to Infinite distortion. Yes, the reason you couldn’t see the circle on the poles before is that they are cut off! The infinite distortion means we have an infinitely large map. Existential questions aside, we can thus reason that all Mercator maps are trimmed.
Every map you see in 2D is some kind of tradeoff between different types of distortion. It’s not always immediately obvious what tradeoffs are being made because we have been conditioned to seeing the world as a 2D projection of a 3D object. i.e. A globe unrolled onto a piece of paper.
To help my understanding of how projections distort the globe I came up with a little tool that allows you to rotate a globe and see how the rotated globe translates into a particular map. Here is that tool comparing the globe to the Mercator projection. You can drag either map to rotate the earth and recenter the rotation with the button in the top left.
This representation helps gain understanding of how projections distort area. Projections also distort shape. This view better illustrates the distortion of shape.
The idea here is to split the globe up into similarly shaped and sized tiles. Each tile has similar area and shape on the globe so it’s easy to see the distortion on the map. Traditional graticules are neither similar in size or shape on a globe and can be misleading.
In fact, both representations give you an idea of how a map projection distorts shape and area.
Armed with these weapons you can fight back against the tyrannical cartographers of times gone by. Turn your nose up in disgust at density metrics on Mercator maps, and make up your own mind as to which projection you like best.
My favorite is below, the Goode Homolosine.
It is indeed very Goode; as an equal-area projection, it preserves area across the map. This is good for showing distribution or density. It also, in my opinion, does a good job of minimising distortion thanks in part to it’s interruptions (cuts).
Now, feel free to use this tool to play around and get a better understanding of map projections and maybe the world we live on.
The source for this blog can be found in my blog repository, the spinny map thing is a polymer web component which you can reuse. It is also on GitHub in the polymer-globe repository.
Credit to Mike Bostock for d3. Specifically for the two blocks incorporating Versor Dragging for Orthographic and Mercator projections.
Credit to Jason Davies, specifically for his Versor Dragging example.
Thanks to Jörn Hees for reading this several times despite having a PhD to finish.
]]>Here is a Mercator map in a form you are familiar with. I have added 5˚ circles drawn on the surface of the planet. Each circle has a radius of around 555km.
Here is a slightly different looking Mercator map. The only difference with the one above is that I have trimmed less of the top and bottom of the map off. On this one I have drawn 0.1˚ circles. Each of these circles has a radius of about 11km.
This helps to illustrate the infinite nature of the Mercator projection. The red areas at the top and bottom are in fact the same red circles as on the rest of the map but drawn over the poles. They are streteched out to infinite proportions by the Mercator projection.
All the circles on each respective map have the same radius and the same area on the spherical earth.
]]>