Visualising data on interactive maps

Anna Pawlicka Data Engineer

A picture is worth 1000 words

A picture is worth 1000 words

Leaflet.js

• Open-source Java-Script library

• Mobile phone friendly

• Interactive

Spruce-leaf

• Visualisation grammar for choropleth maps

• Uses JSON format to describe data and map

• Joins geography with your data

• Colours the areas according to some values in your data

• Adds legend and info box

Data

• You will need:

• Geometry: TopoJSON file

• Data to map: CSV file

• Both need a common identifier

Colours

• Things to consider:

• Number of data classes

• Nature of your data: sequential, diverging, qualitative

• Perfect tool for all that: ColorBrewer

Specification

Example

Links

• Spruce-leaf grammar: https://github.com/MastodonC/spruce-leaf

• Spruce-leaf examples: https://github.com/MastodonC/spruce-leaf-examples

• ColorBrewer: http://colorbrewer2.org/

• Geographies:

• http://www.ordnancesurvey.co.uk/

• http://geocommons.com/

• https://github.com/samuelleach/uk-atlas