Choropleth Map: World

This example shows how to create a choropleth world map with d3.geomap.choropleth. This example displays world population data from downloaded from the World Bank databank.

You can set various properties of the map when instantiating a map object. First specify the topojson file to load, then set the color scheme, choose the YR2010 column as the one to display, set the format according to the format function defined first, display a legend, and set the unitId to Country Code. Let's go into more details about the individual settings.

d3.geomap comes with support for color schemes from the ColorBrewer project. We choose the sequential multi-hue scheme Yellow - Green - Blue appropriate for the population data displayed and for best accuracy the maximum number of bins for sequential schemes from ColorBrewer, which is 9.

The value in the call to the column method specifies which column of the CSV file to display on the map based on the header row in the CSV. d3.geomap.choropleth requires this header row to be present.

The format function defines how to format values in the map legend and in tooltips when moving the mouse over a country.

The legend can currently be set to true and false. If true it will look like the one in the example. If you don't want to display a legend or prefer another type of legend you have to set legend to false and draw your own.

Finally the unitId specifies which column in the CSV file contains the ID values of the geographic units displayed on the map. In this case the units are countries and the ID is the 3 letter Country Code defined in ISO 3166-1 Alpha 3. This is the same ID as used in the topojson file. If you use a different topojson file with another code, e. g. the ISO 2 code, you need to make sure to include this in the CSV and set the unitId accordingly.

After setting up the map, we need to load the CSV file, select the div with the id map set the selection datum to the loaded CSV and call the map.draw method defined in d3-geomap. You have to provide the map object itself as the 2nd argument to call.

See the complete JavaScript code needed to render the map below.

var format = function(d) {
    d = d / 1000000;
    return d3.format(',.02f')(d) + 'M';
}

var map = d3.geomap.choropleth()
    .geofile('/d3-geomap/topojson/world/countries.json')
    .colors(colorbrewer.YlGnBu[9])
    .column('YR2010')
    .format(format)
    .legend(true)
    .unitId('Country Code');

d3.csv('/data/sp.pop.totl.csv', function(error, data) {
    d3.select('#map')
        .datum(data)
        .call(map.draw, map);
});

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.

Series Code,Country Code,YR2004,YR2005,YR2006,YR2007,YR2008,YR2009,YR2010,YR2011,YR2012,YR2013
SP.POP.TOTL,AFG,24018682,24860855,25631282,26349243,27032197,27708187,28397812,29105480,29824536,30551674
SP.POP.TOTL,ALB,3014579,2992724,2968028,2940880,2912559,2884303,2856673,2829337,2801681,2773620
SP.POP.TOTL,DZA,33461345,33960903,34507214,35097043,35725377,36383302,37062820,37762962,38481705,39208194
SP.POP.TOTL,ASM,59262,59117,58652,57919,57053,56245,55636,55274,55128,55165
SP.POP.TOTL,ADO,79060,81223,81877,81292,79969,78659,77907,77865,78360,79218
...

Example Maps