Matching visual hierarchy to information hierarchy

If you want your map to be successful in portraying it’s story or message then it’s important to start with user requirements.

It’s important to fully understand the users requirements in terms of information hierarchy and match the visual hierarchy accordingly – that is to say that they will notice the MOST important information first and the LEAST, last. In cartography this is often referred to as figure/ground.

At work recently I was involved in the cartographic design of one of our latest apps – here is a blog post explaining our pie chart clustering solution that forms part of it.

The app displays point features on a map and groups them into four discrete categories. In this post I will explain my thought-processes and reasoning for choosing the colours that I did; matching the visual hierarchy to the information hierarchy.

The data could be categorised and styled in various different ways but the user in this instance is MOST interested in whether or not the features are A or B. They can also be either 1 or 2 but this information is of SECONDARY importance. It is also MORE important to highlight 1 before 2. Therefore the user’s information hierarchy looks like this:

info-hierarchy
The user’s information hierarchy

Although A1 and B1 have equal importance they need to be distinguishable from each other and have more visual importance than A2 and B2.

Here are the colours that I chose:

colour-hierarchy
Matching colours to the information hierarchy

My first consideration was choosing two colours that are easily distinguishable and for this purpose also accessible – meaning they are discernible to those with colour vision deficiencies (CVD). For this I used the preview modes in Adobe Illustrator which simulate different CVD but there are many tools available (QGIS has this function which is cool for map-makers). So, this gave me the colours for A and B.

cvd-filters
Previewing the colours to ensure accessibility for CVD

I then used the saturation and brightness levels to separate the 1’s from the 2’s. This gave me the corresponding colours I required whilst making them appear LESS visually important.

In the app we then applied these colours to simple circle symbols and use an 15% transparency. We have also applied a thin outline to the circle symbols to subtly lift them from the basemap.

pie-chart-clustering

I would highly recommend Colorbrewer for grabbing colour palettes and I have personally found this resource very useful recently. The colours I have used above are from the Material palette.

This is just one example of the MANY thought processes that cartographic designers go through to ensure that our maps are successful in meeting their user requirements.

The Results Are In…

I’m very late in sharing the results of my short carto survey but hey, better late than never.

I was really pleased to get 100 responses in just over 2 weeks. A huge thanks to all those who filled it in and equally those who shared it! Twitter is an awesome tool for spreading the word.

Here are the full results:

https://www.surveymonkey.com/results/SM-3JMS827J/

These were the top 5 most popular carto topics:

  • Interactive web maps
  • Maps and data visualisation
  • Cartographic technology / software
  • Cartographic Design Principles
  • Cartographic tips and tricks

These results are going to be extremely useful to me in the next month as I prepare to present a webinar, a workshop and a presentation.

Shortest Ever Cartography Survey

I have created the Worlds shortest survey about cartography and I would love your help in filling it in…it will literally take one minute! Once filled in please also share the link via any mailing lists or social media:

https://www.surveymonkey.com/r/T5Q2TL5

About the survey

I am putting together some learning material for those wanting to know more about Cartography and Cartographic Design. The content will be used for various things from Maptime, Ordnance Survey workshops and other training events.

There are SO MANY elements to map-making so I would be extremely grateful if you could help me define the topics of most interest.

I will end the survey on Friday 27th Nov 2015 and I will blog about the results which I think will be very interesting, as well as super useful!

Thanks in advance 🙂
Charley

The art of cartography

Many definitions of cartography refer to it as a mix of science and art. This post will focus on the art element.

The artistic side of cartography is what attracted me to it as a career path – it is a method of visual communication through which you can exercise your creativity. It is the creative process that I really enjoy – taking something from an idea right through to completion.

There is no such thing as right or wrong with regard to maps – they are an interpretation of geographic phenomena which can be either accurate or pure fantasy. There are strong links between the worlds of art and cartography and some of my favourite map designs sit in this space.

This article has some great examples of ‘creative cartography’ from 15 artists

Here are some examples of artistic maps that I have enjoyed recently:

This slideshow requires JavaScript.

Yarr, Pirate Maps

Stamen Maps – Watercolour

Below The Boat

You can also find more examples on my pin board

2/8/2013Just found this article with some awesome examples of map art

Small data

‘Big data’ is a current technology trend. It is a new industry in itself and concerns the capture, storage,search, sharing, transfer, analysis,and visualisation of large and complex datasets.

“90% of the data in the world today has been created in the last two years alone.” – IBM

One of the challenges with big data is visualisation – how do you visualise such vast amounts of data and make it legible and useful? The geospatial industry has an obvious role to play here and lots of companies have been set up to answer such questions with CartoDB being one good example.

Maps showing large datasets are getting a lot of publicity (I have posted quite a few in previous posts) so I wanted to just showcase a few great maps which depict either a single theme or  a small amount of data…

This slideshow requires JavaScript.

You can see more maps that I pin here

MapBox: Carto awesomeness

MapBox is awesome!

Since being founded in 2010 the company has quickly become a poster-boy for online mapping, especially where OpenStreetMap is concerned. With their tagline ‘Fast and beautiful maps’ and their dedication to using and developing open source software and open data, MapBox is now one of the most talked-about brands in the mapping industry.

I believe that a big reason for this rapid rise to awesomeness is their commitment to design. High quality design is at the forefront of everything they do – from their great website and slick, intuitive UX to their beautifully crafted maps including MapBox Streets as used by Foursquare.

All tools developed by MapBox fit their brand identity and are easy-to-use, including TileMill, their open source map design studio. TileMill is somewhat revolutionary in its approach to map-making and sharing. Although its styling language, CartoCSS, is not the first of its kind it, it is certainly the finest example of CSS-based cartography and makes creating cool maps relatively simple, allowing Photoshop-like effects.

Map-making was, for many many years a specialist craft, largely dominated by National Mapping Agencies and other large cartography houses. With the recent boom of open source geo tools and open geodata, mapping has become democratised to the point where anyone with a computer and internet access can now make maps and carry out basic analytics.

MapBox have really embraced these recent developments and are continually pushing the boundaries. As a cartographer it is great to see a company that values cartographic design as a core asset. (It amazes me that so much GIS and web mapping software ignores quality design!)

I will continue to follow MapBox keenly and also use and recommend their mapping tools to fellow mapmakers.

Dark maps trending

Have you noticed the amount of maps with black or dark backgrounds that you see online these days!? It is a common trend to use light-on-dark to create a striking visual hierarchy and most of the maps that go viral tend to have adopted this style. I’m sure that has something to do with the aesthetic appeal and the initial impact of these maps. Using a dark background leaves room for many light colours which can create great contrast for any overlays that immediately become the maps focal feature as they often appear to glow.

Here are some examples:

The majority of traditional maps use white (or similar) as the background colour and this can be largely attributed to the distribution mechanism which would usually be paper. The majority of paper is white and it also brings cost savings with regard to ink usage – it wouldn’t be wise to smother a sheet of white paper with dark ink!

With modern mapping technologies and the internet as the main method for sharing maps, any print concerns that restricted design decisions in the past are no longer an issue. Many maps these days will never be printed, just pored over on PC screens and mobile devices.

There is something cool, aesthetically pleasing and eye-catching about dark maps.

It may just be that this bold technique portrays a certain element of rebellion – a refreshing break from tradition.

London: All mapped out

Last week my brother and I went to London to see Neil Young & Crazy Horse at the O2 Arena. The doors opened at 18:30 and we arrived in the capital via Waterloo station at 15:00, giving us a few hours to fill. Filling time in London is never a problem – there is so much to see and do and you can lose hours just soaking up the culture and people-watching. We decided to take a casual stroll along the southside of the River Thames, east towards Bank – after stopping for a couple of beers we ended up as far as London Bridge.

As a carto geek I do always keep an eye out for maps when out and about, but during our walk I was constantly struck by how many maps there were. I expected tube maps to adorn almost every wall of the underground stations and the fantastic pedestrian way-finding system known as Legible London, but in addition to those I saw a new map round nearly every corner we turned, and each had a unique, eye-catching design.

Now it shouldn’t really be too surprising in such a dense tourist trap to find maps as ‘The Big Smoke’ does resemble an urban maze and would otherwise be impossible to navigate, but I didn’t expect to see so many. It really drove home to me how location aware we are nowadays and how maps are well and truly engrained in the public consciousness. Since the advent of web mapping and the growth of location-aware mobile devices, maps have become ubiquitous in our society.

As a cartographer it was really great to see so many diverse examples of cartographic design and to witness the power of mapping – the power to keep a bustling city on the right path!

I have made a simple map using ‘OS VectorMap District – Full Colour raster’ to highlight the route that my brother and I walked:

Walk in London
Walk in London – click to enlarge

Rewarding excellence in cartographic design

Ordnance Survey are proud members of The British Cartographic Society (BCS) and have been sponsoring the society’s annual symposium for many years. Every year the CartoDesign team ensure that OS has a strong presence at the event, from providing an exhibition stand to presenting and hosting workshops.

OS have also provided an award since 2005 which until last year was titled ‘The Ordnance Survey MasterMap Award for Better Mapping’ and aimed to “encourage innovative and stimulating map products derived from, and composed mainly of, Ordnance Survey’s MasterMap data.”

This award ran for 8 successful years in which time a diverse range of entries were rewarded.

This year welcomes a change to the format of the Ordnance Survey Award. 2013 is the debut year for ‘ The OS OpenData Award‘ that seeks “to encourage excellence in cartographic design and the innovative and exciting use of OS OpenData.”

Enter HERE before the end of July.

This award is open to anyone, anywhere, whether or not you are a member of BCS. All you need to do is enter a map that is comprised of at least one OS OpenData product and there is an obvious focus on cartographic design.

As an extra incentive the winner will receive an Apple iPad! So…what are you waiting for? Go HERE to grab your free-to-use data and make a cool mapsterpiece!

To see examples of OS OpenData in use take a look at the showcase HERE

I am a big fan of the iCoast basemap which is made using OS VectorMap District and a unique colour palette…

iCoast - Explore the Dorset coast
iCoast – Explore the Dorset coast

Sharing some great tutorials

I want to share some of the great tutorials that I have come across from fellow map makers on the web. I haven’t necessarily worked through all of these but from just reading them have either learnt new tips and tricks or just been really impressed and inspired.

Using MapBox and TileMill with OS OpenData by my friend and colleague Jack Harrison (@jhrrsn)

Glowing Hot Maps – QGIS Meets GIMP by Anita Graser aka Underdark (@underdarkGIS)

Global Connectivity Revisited: mapping out 58,288 flight routes by Michael Markieta aka (@MichaelMarkieta)

Styling data in TileMill by MapBox (@MapBox) – this is just one section of the fantastic TileMill documentation

Point Stacker example by OpenGeo (@OpenGeo)

And here is a map I made by following Michael Markieta’s fantastic tutorial on mapping OpenFlights data…

A world connected
A world connected