The Digital Agency for International Development

WaterAid map launches

By Jay Alvarez on 10 June 2014

Aptivate and WaterAid teamed up to create an interactive map to reveal Africa's access to water and sanitation. It was launched on the WaterAid site during Africa Water Week with great success.

Low bandwidth infographics

The map is aimed at an African audience of policy-influencers. It was designed,  built and project-managed by our team, with product owner Joe Downie at WaterAid, who embraced the agile spirit from the start.

Implemented speedily using the lightweight SVG graphics library D3.js, and focusing on low-bandwidth development, the map launched at the end of May and was featured on news and social media sites in Africa as well as being picked up by the Guardian and BBC Africa's Facebook page

Who picked it up?


We are very excited to have worked on this project and are undertaking more of this kind of infographics work. We are currently working on the larger re-design of WaterAid's WASHwatch online platform for monitoring government policy commitments and budgets for water supply, sanitation and hygiene (WASH). The up-coming interfaces and infographics will hopefully make the site more appealing and user friendly for the intended audiences - we'll blog about this again when the new site goes live.

Maps of all flavours

It seems that everyone wants interactive maps and we are currently working on several other projects for 3ie, INASP and CDKN as well as the DFID Yemen independent monitoring programme.

For us, the choice of technology varies widely and we are exploring different Javascript and SVG libraries to enable this. Issues affecting choice include bandwidth and browser compatibility along with budget limitations in terms of development time.

We are currently exploring Leaflet, Mapbox, D3.js, Geochart, and jvectormap. All of these new techniques allow development and style flexibility, as well as comprehensive interaction with the maps, but are also heavier in terms of file download and scripts. We are currently looking at 100-300k for a map in addition to the regular page size.

Re-evaluating HTML Image Maps

A while back we worked with Association of Commonwealth Universities and Chevening to create some very low-bandwidth maps using a combination of HTML image maps and Javascript hailing back to 1993, with more recent HTML5 and CSS3 elements to give that Web 2.0 feel.

The development process was more laborious but provided a hand-crafted solution with a bandwidth footprint of only 50-80k. There may be call for working on a more automated mapping application that uses these technologies more efficiently.