This document provides an overview of geospatial visualization in the browser. It discusses how visualizing geographic data can make it significantly easier to understand. It then covers the major mapping platforms like Google Maps and their pros and cons. Other visualization options are presented like Mapbox, CartoDB, and Leaflet.js. Key considerations for choosing a platform are explored, like the size of the dataset, interactivity needs, compatibility requirements, and technical details around projections, rendering, and more. Examples of different types of geospatial visualizations are briefly presented. The document concludes with suggestions on where to start for basic versus complex maps and visualizations and provides additional resources.

1. Geospatial Visualization in the Browser
An Overview
Rob Schley
rob@oseberg.io
RobSchley on Twitter and GitHub

2. The Motivation
• Our brains are optimized for processing visual information
• Some data is significantly easier to understand when put into
a geographic context.
• Geographic data is extremely difficult to understand without
visuals.

3. Visualization Basics
Plotting Choropleth

4. Visualization Basics
Heat Map Bubble Map

5. Visualization Basics
3D Chart Paths

6. The Majors
• Google
• Bing
• Yahoo
• MapQuest
• Here
• Apple Maps
• Open Street Maps (OSM)
Detailed comparison in Wikipedia.

7. The Majors: Pros
• High quality imagery and data
• Compatible with most browsers
• Great features (zoom, pan, search, overlays, routing)
• Familiar
• Stabile
• Available
• Customizable

8. The Majors: Cons
• Proprietary licenses
• Hard to use with Big Data
• Limited to the features they support
• Limited customization
• Limited visualizations
• Designed for particular use-cases (search, route)

9. Other Options
Tools
• Mapbox
• CartoDB
• Open Layers
• Leaflet.js
• Cesium
• D3
• jQuery Geo
• GeoExt
• Turf
• Highmaps
• Many, many more…
Technical Details
• Projections
• Encodings
• Standards
• Coloring
• Tile providers
• Rendering
• Browser Compatibility
• Cost
• Support
• Scalability
• Many, many more…

10. How Do You Choose?

11. Use Cases
• Public data vs Proprietary data
• < ~5k data points vs > ~5k data points
• All browsers vs Select browsers
• Directed vs Exploratory
• Static vs Interactive
• Cloud hosted vs Privately hosted
• Little expertise vs Significant expertise
• Tiles vs Vectors
• OS License vs Proprietary License
• Some customization vs Extensive customization
• Simple visualizations vs Advanced visualizations

12. Data: How Much?
• Most options will be able to handle relatively small datasets
–For our purposes, relatively small is < ~5k points.
• If you have small to medium size datasets, do you need to
show it all at once?
–No: Good. Look at search and/or clustering to drill into data.
–Yes: Bad. Too much noise, won’t be able to understand.
• If you have medium to large datasets, how many data points
do you need to show at once?
–What are your compatibility requirements?

13. Data: How Sensitive?
• Most geospatial visualizations use publicly available data.
– The tools are designed around this expectation.
– They want you to give them your data.
• If your data is sensitive, proprietary, throttled, or access
controlled in any way:
– For internal use only: Many options available.
– For customer/client use: Only a few options available.

14. Directed or Exploratory?
Directed
• Plotting data in developed areas, providing directions, and
other common information (hours of operation, etc)
• Choropleth, Bubble, Heat maps usually use neighborhood,
city, county, state, congressional boundaries to visualize data
Exploratory
• Used for ad-hoc data analysis.
• Lots of layers, filters
• Searching broad categories of data but drilling down into
points of interest.

15. Static or Interactive?
Static
• Static maps can be useful
• Static maps can be combined with dynamic visualizations
• Can just use simple interactions like mouse hover and click.
Interactive
• Interactive maps are necessary with medium to large
datasets.
• Interactive maps are absolutely critical for exploratory maps.
• Zoom, pan, select, highlight, rotate, drill into clusters, etc.
• Not all interactions are relevant for all use cases.

16. What About Compatibility?
Desktop
• SVG: IE 9+, everything else relatively modern.
• Canvas: Pretty much identical to SVG.
• WebGL: IE 11+ (mostly) and Chrome have full support.
Everything else, partial or no support.
Mobile
• SVG: Yes.
• Canvas: Everything but Opera Mini
• WebGL: Yes for iOS Safari, partial support in Firefox, Android
Browser and Chrome for Android.

17. Technical Details

18. Projection: What?
Web Mercator (aka Google Mercator, Spherical Mercator, OSGEO:41001, etc.)
This is the one that most maps use. Based on the projection most of us grew up with.

19. Projection: What?
Global Geodetic System (WGS 84, EPGS:4326)
This is the standard projection. Used by GPS and other high-precision systems.

20. Projection: What?
Albers USA
Moves Hawaii and Alaska into view. Common for US centric data.

21. Colors: They’ll Play Tricks on You
Color Brewer
When visualizing data, colors must be selected carefully. Use existing schemes.

22. Rendering: When Performance Matters
SVG vs Canvas (2D) vs WebGL (2+D) vs Tiles vs Vector Tiles
There are many ways you can render visualizations. There is no silver bullet.

23. That’s just scratching the surface.

24. Examples!

25. Examples
Government Benefits Choropleth
Plotting/Clustering in Leaflet
Map of History
Doarama 3D routes
Cyber Attack Visualization
Health and Wealth of Nations
Vector Fly over with Zoom and Easing

26. Suggestions!

27. Suggestions: From Simple to Complex
Basic Maps and Visualizations
• Start with Google Maps if you can
• If you need more advanced map features, look at Mapbox.js
• If you need to display lots of data, look at Mapbox GL
• If you need 3D support, look at CesiumJS
Advanced Maps and Visualizations
• Mapbox.js or Mapbox GL
• D3 or Highmaps
• Switch from SVG to Canvas for faster rendering
• Simplify Geometry

28. Resources: Let’s Dive In
Maptime Lessons & Resources, Leaflet Tutorials, Mapbox
Examples, Color Schemes for Maps, GIS Predictions for 2015,
GeoJSON is pretty important, TopoJSON is an extension of
GeoJSON. Tile Map Service Specification (TMS) may be
helpful.
D3 has awesome tutorials and examples! Their API also covers
some general topics (like projection) in good depth. Mike
Bostock’s work is really awesome!
If you’re new to Data Visualizations, check out Stephen Few

29. Questions?