Geospatial Visualization in the Browser

An Overview

Rob Schley

rob@oseberg.io

RobSchley on Twitter and GitHub

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.

Visualization Basics

Plotting Choropleth

Visualization Basics

Heat Map Bubble Map

Visualization Basics

3D Chart Paths

The Majors

• Google

• Bing

• Yahoo

• MapQuest

• Here

• Apple Maps

• Open Street Maps (OSM)

Detailed comparison in Wikipedia.

The Majors: Pros

• High quality imagery and data

• Compatible with most browsers

• Great features (zoom, pan, search, overlays, routing)

• Familiar

• Stabile

• Available

• Customizable

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)

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…

How Do You Choose?

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

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?

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.

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.

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.

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.

Technical Details

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.

Projection: What?

Global Geodetic System (WGS 84, EPGS:4326)

This is the standard projection. Used by GPS and other high-precision systems.

Projection: What?

Albers USA

Moves Hawaii and Alaska into view. Common for US centric data.

Colors: They’ll Play Tricks on You

Color Brewer

When visualizing data, colors must be selected carefully. Use existing schemes.

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.

That’s just scratching the surface.

Examples!

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

Suggestions!

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

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

Questions?