Three Interactive Data Maps

Data-driven, Interactive & Animated

If you’ve ever spoken to onto the DL team about a project there’s a fair chance we’ve tried to get a map into it somewhere. We like maps. We like the way they can provide scale, context, and navigation in one view. Those are hard things to design for interactive interfaces.

Below are three maps that we’ve built over the past year. They’re very different in design and application.

Simple Animated Map

Animated Map

View live demo >

This map was developed as part of the International Women’s Development Agency’s 2016 digital annual report. It was designed to show the reach of programs undertaken by the IWDA, how they link to one another, and also give a little bit of detail on each, with a link out to the various program websites.

It uses d3.js to animate the map and was fully customised in-house. As we knew that the map would be featured within a microsite rather than as a standalone piece, the interactions were created as a rolling animation to seamlessly lift and integrate with the overall annual report site design.

Interactive Data Map

Data Map Victoria
View live demo >

This was an internal sample project that used Victorian road traffic accident data from the Australian Bureau of Statistics. It uses the Google Maps API with a d3.js overlay for the charts and data visualisation.

The contrast here is between simple charts detailing demographics on the left and the complex spread of data points and nodes on the map. The map gets less cluttered as you zoom and drill down to locations with the capability to expose individual accidents at that level.

3D Global Trade Routes Map

Interactive 3d Map
View live demo >

This was made with a Web GI interface and connects to a dataset to show the flow of international supply chain across a 3D globe. The purpose of this was mainly to showcase the capacity of this particular interface, show a flow between trade locations around the world and use the map itself as the navigation for a more explorative user experience.

It illustrates a complex concept of global trade routes simply and elegantly and managed to have a really cool interactive element in controlling the 3D globe.

We have a couple more mapping projects coming up and we look forward to sharing them with you.

Subscribe to Email Updates

Free Stuff of Ours

Click the images to download

A Free Ebook On Charts

Free Dashboard Design

Free Tableau Dashboard

Recent Blog Posts