App development: Pie chart cluster markers

The first in a new series of blogs from the teams behind many of our apps, maps and services, sharing their experiences in software engineering, cartographic design, user experience and more. We start with a tale of collaboration, a rapid feedback process and pies! 

It’s never good to be faced with a new problem deep into a project, but it is very satisfying when an effective solution is developed swiftly. During a recent app development sprint, one of our software engineers hit upon one such problem.

The problem

The app in question allows the user to select a group of properties which are rendered as point features on the map. Following standard web map convention, these points are aggregated, or clustered, as the user zooms out. This is to make the map more legible and to improve performance; it saves rendering potentially thousands of points in a single map view. Clustering is a fantastic and much-used technique in web mapping applications. Lots of effort has been put into developing slick clustering behaviour and designing effective markers. It works perfectly well if your points are all representing the same phenomena – and that’s where we ran into a problem.

The app we’re developing splits the point features into four discrete categories, therefore, if we apply standard clustering behaviour, we are effectively grouping these categories into one and hiding a level of information from the user. The user will still see a total value to show how many points are aggregated into each cluster – but in this instance they are also interested in how that total is split amongst the four categories.


Standard clustering behaviour

Cue an informal meeting between software engineer, cartographic designer and UX designer; a mini brainstorm…

The solution – enter the pie!

After a short while playing the scenario over in our heads we talked through some possible solutions…then pie charts were mentioned; a lightbulb moment! Pie charts are circular graphics (like standard cluster markers) divided into slices to illustrate numerical proportion (which is exactly what we are trying to illustrate per cluster.)

Our cartographic designer set to work on mocking up a few different options for the design of pie-chart cluster markers, we even used Twitter for some rapid feedback – who doesn’t love an animated GIF on social media? We tried several versions to see which was most legible against the backdrop mapping and settled on the eighth iteration because it conveyed the information most clearly. This was then passed back to the engineer to code up so we could check the live example.

We have also added hover and click behaviour so the user can interrogate the data from within a single cluster to get a concise breakdown of the features. While the pie chart itself provides a quick visual aid showing the proportional breakdown, hovering over a marker will display a complete list.


Our new pie-chart cluster markers in action

Pie charts have been used on maps for a long time, since at least 1858 when Charles Joseph Minard used the technique to represent the amount of cattle sent from all around France that was destined for consumption in Paris.


Charles Joseph Minard’s map from 1858

A combination of charts and maps is not uncommon, sometimes the chart is directly on the map and often they are separate supporting elements (very common on dashboards.) We have used this technique before in static map design but this was the first time we have applied it dynamically to a web map and we are very pleased with the result. This was a great example of UX, cartographic design and software engineering working in harmony to design and implement an elegant solution to a complex problem – and it all happened in a short period of time, not disrupting the sprint. We are sure that the user will find this a valuable feature and we are eagerly awaiting their feedback.

You may also like

Adding value and removing friction in our flagship mobile app, OS Maps

Leave a Reply

Your email address will not be published. Required fields are marked *

Name* :

Email* :