The document discusses tools for visualizing data on interactive maps using technologies like leaflet.js and spruce-leaf, emphasizing their open-source nature and mobile compatibility. It highlights the need for a common identifier between geographic data and CSV data for effective mapping, along with considerations for color selection based on data type. Additional resources, including links to tools and examples, are provided for further exploration.

1. Visualising data on
interactive maps
Anna Pawlicka
Data Engineer

2. A picture is worth 1000 words

3. A picture is worth 1000 words

4. Leaflet.js
• Open-source Java-Script library
• Mobile phone friendly
• Interactive

5. 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

6. Data
• You will need:
• Geometry: TopoJSON file
• Data to map: CSV file
• Both need a common identifier

7. Colours
• Things to consider:
• Number of data classes
• Nature of your data: sequential, diverging, qualitative
• Perfect tool for all that: ColorBrewer

8. Specification

9. Example

10. 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