Unemployment
The Census Bureau publishes a treasure trove of interesting data about these United States. Here we show unemployment rates (as of September, 2009) of 3,134 counties using a choropleth map; darker counties have higher unemployment. Unlike static maps, you can zoom in for higher resolution, and mouseover to read county names and values. You can also experiment with different color scales, such as OrRd, YlGnBu and RdBu.
The map background is a monochrome image layer from CloudMade. Register a developer account with CloudMade for your own API key. We’re hosting GeoJSON tiles for states and counties on Google App Engine, and as with image tiles, you can always roll your own! Thanks to Nathan Yau of FlowingData for the inspiration and nicely-formatted CSV data source.
This example also uses a data visualization library called Protovis for computing quantiles. Protovis is optional and not required to use Polymaps.
Note that we’re not using Protovis to render anything—just data processing.
Source Code
var po = org.polymaps;
// Compute noniles.
var quantile = pv.Scale.quantile()
.quantiles(9)
.domain(pv.values(unemployment))
.range(0, 8);
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.center({lat: 39, lon: -96})
.zoom(4)
.zoomRange([3, 7])
.add(po.interact());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/20760/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.geoJson()
.url("http://polymaps.appspot.com/county/{Z}/{X}/{Y}.json")
.on("load", load)
.id("county"));
map.add(po.geoJson()
.url("http://polymaps.appspot.com/state/{Z}/{X}/{Y}.json")
.id("state"));
map.add(po.compass()
.pan("none"));
function load(e) {
for (var i = 0; i < e.features.length; i++) {
var feature = e.features[i];
if (feature.data.id.substring(9) == "000") continue; // skip bogus counties
var d = unemployment[feature.data.id.substring(7)];
feature.element.setAttribute("class", "q" + quantile(d) + "-" + 9);
feature.element.appendChild(po.svg("title").appendChild(
document.createTextNode(feature.data.properties.name + ": " + d + "%"))
.parentNode);
}
}
map.container().setAttribute("class", "Blues");