Choropleth Map: US States

This example shows how to create a choropleth map of states in the US using data from the National Science Foundation about venture capital spent in the US in 2012.

I'll only explain the differences to the example choropleth map of the world, where you can learn about the meaning of the other settings.

Since this is a map of the US, we load the appropriate TopoJSON file and set the map object to use the d3.geoAlbersUsa projection. The unitId used in this TopoJSON source is the FIPS code. Since we don't use the default projection (d3.geoNaturalEarth) we need to set the scale so the map fits well into the layout, in this case 1000 is a good value.

The remaining code should be straight-forward, provided you read the explanation of the choropleth world map example.

var map = d3.choropleth()
    .geofile('/d3-geomap/topojson/countries/USA.json')
    .projection(d3.geoAlbersUsa)
    .column('2012')
    .unitId('fips')
    .scale(1000)
    .legend(true);

d3.csv('/data/venture-capital.csv').then(data => {
    map.draw(d3.select('#map').datum(data));
});

Data

See an excerpt of the data used in this map below. Currently CSV is the only supported data format for creating choropleth maps with d3-geomap.

,State,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,fips
0,Alabama,0.77,0.59,2.3,0.67,0.46,0.23,0.27,0.13,0.12,0.19,0.14,0.26,0.0,0.02,0.13,US01
1,Alaska,0.0,0.0,0.14,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,US02
2,Arizona,1.51,2.14,0.21,1.16,1.11,0.39,0.51,0.06,1.1,0.78,0.8,0.44,0.34,0.89,0.83,US04
3,Arkansas,0.11,0.39,9.15,0.15,0.13,0.01,0.04,1.39,0.42,0.0,0.0,0.0,0.05,0.0,0.05,US05
4,California,7.14,19.14,32.61,12.46,6.87,5.86,5.95,6.52,6.99,7.88,7.51,5.06,5.95,7.92,7.08,US06
...

Example Maps