Map Projections in the Web

Following our tutorial on creating maps in the browser–Get Started Creating D3 Maps–I thought it would be fun to explore map projections in the web with JavaScript.  D3 in particular gives us the opportunity to be very creative in how we render geospatial data with the ability to choose from and customize many different projections.

See the Pen D3 Projected Halftone Pattern by Jacob Wasilkowski (@jwasilgeo) on CodePen.


Reduce those dimensions

Locations of our geospatial data exist somewhere on our three-dimensional planet, but we have to make two-dimensional maps for our flat electronic screens (or pieces of paper!).  Deciding which map projection to use is an exercise in telling your data how it needs to bend, twist, rip, and transform from a three-dimensional reality to a two-dimensional medium.

Different map projections exist for different reasons and any choice made is a trade-off for which property you’d like to preserve from your original data, including area, shape, angle, or distance.  For example, if you need to maintain the correct areas of countries, then you may have to give up caring about their shapes becoming distorted.  (This would be called an equal-area projection, by the way.)  There is no perfect map projection to fit all situations.

Center or rotate a web map?

Most of the web maps we interact with use some variation of the Mercator projection. It is known as a conformal projection and nearly always is rotated in a way that is visually very familiar and comfortable to us: north is up, south is down, and land masses closer to the poles are distorted in area and appear much bigger than they actually are.

Moving around on this kind of web map changes the center location, which is similar to shifting a paper map around on a table.  When you navigate up to view Greenland in a web map, it would be like moving a paper map down, right?  Greenland’s area is still distorted and bloated.

But when you interact with a globe in real life you rotate it.  The same is actually possible for all map projections, and in D3 we can rotate along 3 different axes.  If the world’s landmasses look unfamiliar when rotating a map’s projection it doesn’t mean we are doing something wrong.  Perhaps unconventional, but not necessarily wrong.  Our three-dimensional data is simply being instructed how to reshape itself onto a two-dimensional map.  If we were to rotate the same example web map to Greenland its area would be much more accurate, but at the cost of other landmass areas becoming distorted.

Here’s a demo showing the differences between centering and rotating.  The top row uses the Mercator projection while the bottom uses the Orthographic projection which resembles a globe (but a flat globe in 2-D).

See the Pen D3 Map Projections: Centering vs. Rotating by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Circles, circles everywhere

What if we were gods and could sculpt perfectly circular islands of the same size and then place them evenly around the planet?  I suppose even on our best days we don’t have this power–sorry–but we can at least draw them on a map.  These regularly spaced circles, called Tissot’s indicatrices, show the unique distortions of each projection by stretching, warping, and also moving the circles around.

The regions in the next demo that contain evenly distributed, small circles exhibit very little or no distortion.  But as the circles grow, morph into other shapes, or move away or closer together, then the distortions of a projection are uniquely affecting the sizes, angles, and distances between geographical features throughout the map.

See the Pen D3 Map Projections by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Which one is your favorite?  Are any of these cool enough to be a tattoo?

Go make some maps

If you want to experiment with map projections, visit Get Started Creating D3 Maps and start making changes to the Canvas demo or SVG demo.

Look for the JavaScript code block starting with var projection = d3.geoMercator() and replace it with another projection documented at d3-geo, d3-geo-projection, or perhaps d3-geo-polygon.

Learn more

Have fun distorting the shape of the world!

Get Started Creating D3 Maps

JavaScript is fun, and D3 is great.

At Petrichor Studio we like to use D3 for our interactive, web-based visualizations.

As I promised recently, we’ll spend time talking about making maps with this wildly popular JavaScript visualization library.

D3 is sometimes known for imposing a learning curve on dataviz folks and JavaScript developers, but I am convinced that once you’ve tried it out several times–regardless of success or failure–familiar patterns will start emerging in the code.  There are plenty of wonderful resources and blogs that were crucial in helping me begin to understand how to harness D3, and I have included some links at the end of this post in case they might help you out, too.

Below are a couple code samples to help you get started making a simple world map in your browser.  One approach shows you how to render GeoJSON data in your browser as graphics using SVG, while the other approach uses Canvas.  They can be compared side-by-side and I encourage you to identify their similarities and differences.

The overall pattern goes like this

  1. Set up the element that will render the graphics of your map.  Choose <svg> or <canvas> and give it an initial width and height.
  2. Establish the map projection.  We want to make a two-dimensional map, but our geographical features exist on a three-dimensional planet.  We’re going from longitude/latitude coordinates to a flat map and D3 needs to know how that should happen.  Read up on Map Projections in the Web when you’re ready.
  3. Create a D3 geographic path generator and tell it about the map projection.  This is the workhorse that instructs SVG or Canvas how to create two-dimensional graphics out of GeoJSON data.
  4. Load your spatial data.  The samples below use a network request to load publicly available world country geometries in the TopoJSON format.  TopoJSON is more or less a special format of GeoJSON.  It just takes 1 extra step to convert from TopoJSON to regular GeoJSON.  No big deal.
  5. Use the geographic path generator to convert your data into graphics.  The longitude/latitude coordinates will be drawn as map graphics in the <svg> or <canvas> element.

Simple D3 Map using SVG

See the Pen Simple D3 Map using SVG by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Simple D3 Map using Canvas

See the Pen Simple D3 Map using Canvas by Jacob Wasilkowski (@jwasilgeo) on CodePen.

If you are just getting started with D3 the best advice I can give is simply what worked for me: read other people’s tutorials and code samples, all while experimenting on your own until perceived failures become replaced with tiny successes. The tiny successes will become bigger over time and failures won’t seem so scary or annoying anymore.

Good luck! We’ll revisit these topics in more depth by focusing on Map Projections in the Web.

Helpful resources

Formula 1 World Circuits

It’s time to go retro racer in 2018.

Formula 1 screenshot

Check out this animated map of Formula 1 World Circuits!

Even though it is already May, the college basketball excitement and hype of March Madness inspired me to do a sports-related data visualization or mapping project.  It was a lot of fun working with animations for the gerrymandering topic in What’s Your Vote Worth?, and it eventually crossed my mind to explore Formula 1 circuits.

What we do here is stack all the circuits on top of each other, like misshapen pancakes, and show you only 1 at a time.  Even though they’re scattered throughout several continents, here they share the same space and the same map scale.  Then, we continually move on to another circuit by morphing between the current shape and the next shape in the pancake stack.  The world reference map is also updated to provide geographical context.

An argument for doing this (other than just because I can) would be that you can directly compare the circuits’ shapes, sizes, and orientations, without having to find and navigate to each circuit separately as with a traditional web map.

I wanted to style this with an 80’s retro racer vision of a neon, cyberpunk future we’re all speeding towards, so we employed SVG and CSS effects along with an awesome font to achieve the final look.  (Thanks, Sarah!)

The stacking and morphing is all done on-the-fly in JavaScript with some neat map projection and shape animation techniques.  We’ll walk through how D3js and flubber were used to make all this come together in upcoming blog posts.

https://petrichor.studio/2018/05/formula1/

“Bring Up State” Animation Effect with D3

*Check out our What’s Your Vote Worth? data viz storytelling to see this effect in action.

Tired of falling down into web maps?

Zooming in, zooming in, and zooming in from outer space down to the Earth’s surface got you feeling sad?

Here’s another idea: demand that geographic features come up to you. Web maps typically require you to zoom in and may give the sensation of “falling down” or “diving in” towards the Earth’s surface. Why not make this everyday interaction become more user-focused?

Click on a state to get started.

See the Pen Bring Up State – D3 by Jacob Wasilkowski (@jwasilgeo) on CodePen.

In this JavaScript code sample written with D3js, called “Bring Up State”, we serve—provide, give, deliver—a state polygon that has been clicked on to give it full focus. This is the opposite from expecting your audience to freely zoom in as with traditional web map experiences. This sample goes one step further by fading away the remaining states in the background to alleviate visual clutter and bring attention to the current state. Take a look at the code to see how it is all glued together.

Just click—no need to fly down closer to the Earth—and the visualization will do the heavy lifting of bringing up the geographical feature directly to you.