Cartographer.js

Choropleth Demo

To build a choropleth map, build an array of objects that contain region and val attributes. Color choices will be determined automatically based on the color scheme and values you specify. In this example, counties are colored according their first letter.

var countyNames = (new String("AITKIN,ANOKA,BECKER,BELTRAMI," + 
"BENTON,BIG-STONE,BLUE-EARTH,BROWN,CARLTON," + 
"CARVER,CASS,CHIPPEWA,CHISAGO,CLAY,CLEARWATER," + 
"COOK,COTTONWOOD,CROW-WING,DAKOTA,DODGE,DOUGLAS," + 
"FARIBAULT,FILLMORE,FREEBORN,GOODHUE,GRANT," + 
"HENNEPIN,HOUSTON,HUBBARD,ISANTI,ITASCA,JACKSON," + 
"KANABEC,KANDIYOHI,KITTSON,KOOCHICHING,LAC-QUI-PARLE," + 
"LAKE,LAKE-OF-THE-WOODS,LE-SUEUR,LINCOLN,LYON," + 
"MAHNOMEN,MARSHALL,MARTIN,MCLEOD,MEEKER,MILLE-LACS," + 
"MORRISON,MOWER,MURRAY,NICOLLET,NOBLES,NORMAN,OLMSTED," + 
"OTTER-TAIL,PENNINGTON,PINE,PIPESTONE,POLK,POPE,RAMSEY," + 
"RED-LAKE,REDWOOD,RENVILLE,RICE,ROCK,ROSEAU,SCOTT," + 
"SHERBURNE,SIBLEY,ST.-LOUIS,STEARNS,STEELE,STEVENS," + 
"SWIFT,TODD,TRAVERSE,WABASHA,WADENA,WASECA,WASHINGTON," + 
"WATONWAN,WILKIN,WINONA,WRIGHT,YELLOW-MEDICINE")).split(",");

var countyData = [];

for( var i=0, ii=countyNames.length; i < ii; i++ ) { 
  var name = countyNames[i];
  var code = "MN-" + name;
  countyData.push( { region:code, val:name.charCodeAt(0), label: Cartographer.regions[code].name + " County, " + "MN" } ); 	
}

var cartographer = Cartographer( map, { colorize:"#000", colorizeAlpha:.3 } );
cartographer.choropleth(countyData, { colorScheme:"YlOrRd"});

Currently, US states and counties are supported. For state-level data, use the code US followed by the ISO 3166-2 state level code, e.g. "US-MN" or "US-CA". For county data, use the two-letter state code followed by the county name in all uppercase, with spaces replaced by hyphens, e.g. "MN-ST.-LOUIS" or "MN-HENNEPIN".

See also the all counties demo (warning, this might be slow), the basic demo, or the state populations demo.