Putting Data On The Map

These slides available at clients.stamen.com/talks/ffnyc/.
Demo files available at clients.stamen.com/talks/ffnyc/demo.tar.gz (updated July 7 2005 10:25am EDT).

Example: Mappr

Example: AirTreks

Example: MoveOn Virtual Town Hall

Where To Start

  1. Acquire
  2. Translate
  3. Project
  4. Transform
  5. Plot
  6. Interact

Demo: MapDemo.swf, code samples: demo.tar.gz (updated July 7 2005 10:25am EDT).

Acquire: Data sources

Acquire: Maps

Translate: Geo Data

What does geospatial data look like?

Translate: Flash Geo Data

Simplest case: 3-member tuples with a latitude, longitude, and identifiers.

var lower48MapCityData : Array =
    [
        {
          name : "San Francisco, California",
          lat  : 37.77,
          long : -122.43
        },
        
        {
          name : "Bethesda, Maryland",
          lat  : 39.00,
          long : -77.11
        }
    ];

Translate: XML Geo Data

Modified example from Mappr. We do the projection server-side (more on that in a minute), using a Lambert Azimuthal Equal Area projection centered on 45°N 100°W.

<?xml version="1.0" encoding="utf-8" ?>
<points>
  <point name="San Francisco, California">
    <geo latitude="37.77" longitude="-122.43" />
    <projected x="-262.14" y="73.43" />
  </point>
  <point name="Bethesda, Maryland">
    <geo latitude="39.00" longitude="-77.11" />
    <projected x="262.65" y="53.86" />
  </point>
</points>

Project: Definition

Project: Example Step 1

Start with a 3-dimensional globe:

Project: Example Step 2

Raw projection, centered on Europe:

Project: Example Step 3

A specific map based on part of a projection:

Transform: Why

Transform: How

Plot: Optimize

Plot: Ambiguity

Plot: Niceties

Interact: Points

Interact: Map

The End

Copy of these slides available at clients.stamen.com/talks/ffnyc/. Demo files available at clients.stamen.com/talks/ffnyc/demo.tar.gz (updated July 7 2005 10:25am EDT).

Questions?