Thematic Cartography in JavaScript

By Zachary Forest Johnson

Contact: zach.f.johnson@gmail.com
Presentation URL: http://indiemaps.github.com/presentations/nacis/2011/js-thematic/index.html
Code URLs:
- OpenLayers: https://github.com/indiemaps/OpenLayers-Symbology
- Polymaps: https://github.com/indiemaps/Polymaps-Thematic

Intro

The goal:

Thematic mapping in online mapping frameworks

Frameworks

What is a web mapping framework?

loads data in various geo formats
map rendering
handle coordinate systems, transforms, etc.
map navigation (pan, zoom, search)

More advanced

geocoding
transform vector data to various map projections
GIS functions, such as area, intersect, buffer, etc.
built-in styling methods for vector data

Big name

Google (2005)
Yahoo (2006)
MapQuest (2007)
Google Earth web API (2010)

Flash-specific

Modest Maps
AF Components
Open Scales

OpenLayers (2005)

Polymaps (2010)

Web mapping with web standards primer

Web standards?

Data

KML

Example:

GeoJSON

Example:

GeoJSON is not just JSON

http://geocommons.com/overlays/78664.json http://geocommons.com/overlays/78664/features.json?geojson=1

Styling

SLD / SE

JS / Programmatic

CSS

Projections

My classes

API

Choropleth
Proportional symbol
Dot density
Noncontiguous cartogram

OpenLayers

Polymaps

Other libraries / approaches

Mapfish

Geocommons

API

Examples

Visualization libraries

Protovis

D3.js

Where is this heading?

Combining visualization libraries with mapping frameworks

Protovis + Google

D3.js + Polymaps + Hexbin.js

Go Brewers!