Spatial Analysis

A World of Projection Distortions

By John Branigan on October 21st, 2013

A World of Projection Distortions

An (artistic) exploration of common map projections

For the past couple of years, Azavea has been holding an annual “Hack Day”, where the whole company takes the day to work on projects together around a particular theme.  Last year was “Sensor Hack Day“.  This year, it was “Art Hack Day”, during which one of the goals was to make art out of data. Other goals were to do something different… together… in a way that mixes teams… to create something new… that is related to our work in some way… while having fun. It’s project days like this that paved the way for Azavea to be honored by the B Corporation best companies for worker impact.

Several projects were developed, including:

  • Sounds of the City – feeding crime activity through a multi-band audio synthesizer
  • HTML5 Sound Experiments – wiring up a stock market feed to new sound features in HTML5
  • Chess Visualization – plotting chess tournaments on a spinning globe in Processing (with lots of 80s-style visual effects!)
  • Amtrak GTFS Animation – using a Leaflet plugin written by Aaron Ogle to animate Amtrak data in space and time
  • Mandelbrot set rendered with Processing
  • Dancing graphics on Android
  • Timezone map with cities in CartoDB

The day was a big success.  Here’s what I came up with: http://sandbox.azavea.com/projection-overlays (the SVG files are large and while they take some time to draw, the unintentional effect is quite pleasing).

 

I think about projections a little more than most people. When pondering the effects of projection distortion in web mapping, I came upon this question: What would it look like if the same geographic features were projected to different coordinate systems, and then overlaid on each other using the same center and scale? In my imagination, it would look like a rough, hand-drawn sketch, with slight distortions in shape. This was an idea for an Azavea Art Hack Day! The outcome was much more dramatic than I’d expected.

To me, art is a delivery system for intellectual content, as well as aesthetic appeal. So while these projection overlay images look pretty cool, what are they saying? You may be familiar with criticisms of the Mercator projection. It preserves rhumb lines, which are useful for maritime navigation, but at small scales does not preserve shape, area, or distance. In fact it distorts these aspects of the planet significantly! For example, a distance measurement from the USA to Australia can be off by as much as ten thousand miles.

 

The distortion of the Mercator projection (and now Google’s Web Mercator “projection”) somewhat subliminally informs our global perspective. It was presented to us in sixth grade geography class, and is now the pervasive default in online mapping. The ramifications of this widely used projection can be argued to border on social injustice, promoting an image of dominance of the traditional locations of Western Culture by enlarging them and placing them at the top of the map.

The content I seek to convey is not prescriptive, but descriptive. My intent is to nudge the idea that the world is not necessarily what it looks like, as we usually see it (understatement). I also wanted to make a pretty map.

 

Extras and references:

Here’s a telling game that illustrates my point about the Mercator projection interactively. This was part of the inspiration for my Art Hack Day idea.

https://gmaps-samples.googlecode.com/svn/trunk/poly/puzzledrag.html

 

And I can’t let you go without linking to this popular comic about projections: http://xkcd.com/977/

 

Here’s a bit about how I made these overlays:

  • Process
    • Load all data into ArcGIS Desktop – one data frame per projection
    • Set center and scale to be the same for each projection
    • Export to SVG (be careful that the data frame window stays the same size throughout this process)
    • Note: this was a time consuming process that took a few hours – a good developer could do it better
    • Load all SVGs into an HTML page
    • Ask an awesome Front-End Developer for help with the fancy interactivity

 

All of the SVGs and the code we used to make the web pages are also on GitHub: https://github.com/jbranigan/projection-overlays