Fun with Triangles

Being the Map Man for South African Airways

How I built an interactive flight route map for South African Airways.

I can make maps

While working at Black Diamond, I was often referred to as The Map Man. Countless times I’d be tasked with creating interactive maps for clients. One of these times was while building a trade-facing portal for South African Airways.

As well as having a lead role in the UX, wireframing, design and build of the portal, arguably the most interesting part of the website was the map to show the routes that the airline offers. They wanted something interactive and visual, while still being able to edit it in the CMS.

D3.js

Interactive map
The map I created showed how all of the airports were connected. See live version.

D3 is a Javascript library that is well known for being helpful when visualising data. Graphs are often what spring to mind with D3, but it also handles map data very well. The map I built for South African Airways was not created from a image drawn in illustrator or any other graphical program. It’s generated from real world cartographical data, using D3. The process goes something like this:

  1. Download map data for the whole world from Natural Earth. This data includes a crazy amount of detail with locations for cities, landmarks and airports.
  2. Run a few commands to filter out all the countries you don’t want
  3. Run a few more commands to keep only the map features you want (airports, in this case)
  4. Load this data to the page and draw a map, using the power of D3

What’s neat about using real world data is that it’s completely accurate, you’re dealing with coordinates, not pixels. All the airports are in exactly the right place without any guesswork.

Another advantage to having the data originally in text form is that it’s readily available to use when the visual element isn’t suitable. For instance, the mobile version of this page is simply an expandable table of the data.

The map renders as a vector, so it also has the bonus of looking super sharp on any screen at any size, with some fun animations to boot.

Giving power to the client

Spreadsheet and map
A simple spreadsheet turns into the fully featured map.

Using this generative approach allowed the client to have control over their new shiny map, without having to use any specialist graphical software. The client simply uploads a spreadsheet of airport codes and the map is generated, with the airports and connections automatically in place.

Let’s make a map!

Selection of maps
Maps I’ve made for clients such as Brand USA and Visit California.

I’ve made a bunch of interactive maps, for all sorts of clients. I’d love to have a chat with you about that map you need making.

Read More see all projects →

Getting Trippy with Canvas and MIDI

How I teamed up with a techno producer to build a fully audio reactive visual system that runs on web technologies.

Making it Swooshy for Santa Monica

I created an animated microsite to promote health and wellbeing in Santa Monica.