Cartographer.js

Choropleth Demo - load from Google Spreadsheets

A Google Spreadsheet has been created containing Census population projections. Here we load a JSON representation of the spreadsheet, parse the data, then render a map showing 2008 population projections.

var cartographer; 

function getSpreadsheet( key, wsid ) {
  // Retrieve JSON feed from Google Spreadsheets.
  // Contains Census data about US state populations.
  var script = document.createElement( 'script' );
  script.setAttribute( 'src', 'http://spreadsheets.google.com/feeds/list'
    + '/' + key + '/' + wsid + '/public/values' +
    '?alt=json-in-script&callback=loadMapJson' );
    script.setAttribute( 'id', 'jsonScript' );
    script.setAttribute( 'type', 'text/javascript' );
  document.documentElement.firstChild.appendChild( script );
}

function loadMapJson( json ) { 
  var data = [];
  for( var i = 0; i < json.feed.entry.length; i++ ) {
    var entry = json.feed.entry[i];
    var code = entry["gsx$code"].$t;
    var population = entry["gsx$_cu76f"].$t;
    if( code && code != "--" ) { 
      data.push( { region:code, val:population } );
    }
  }
  cartographer.choropleth( data, { colorScheme: "PuBuGn", reverseColors:true } );
}

function load() {
  if( GBrowserIsCompatible() ) {
    var map = new GMap2(document.getElementById("map"));
    map.enableScrollWheelZoom();
    map.setCenter(new GLatLng(18, 0), 2);
    map.addControl(new GLargeMapControl());
    map.addControl(new GHierarchicalMapTypeControl());
    cartographer = new Cartographer( map, { colorize:"#000", colorizeAlpha:.2 } );
    getSpreadsheet( "tH5MLY6rgbfuW7Dk4A2J6IA", "od6" );
  }
}

See also the basic choropleth demo or the county choropleth demo.