Choropleth map using d3

Choropleth maps are thematic maps in which areas are shaded according to the strength of a particular feature. Its is a good visualisation to quickly differentiate different regions based on the the property of interest.

Here we generate a choropleth map showing district-wise male and female literacy. This is based on similar maps by Mike Bostock. The district map of India is from DIVA GIS while the disputed areas of Jammu and Kashmir have been merged from Natural Earth. The district-wise literacy data is that of the 2011 Census.

The geojson / topjson polygons are rendered to the svg element using d3

svg.selectAll(".district")
            .data(districts.features)
          .enter().append("path")
            .attr("class", "district")
            .style("fill", function(d) { return d.color; })
            .attr("d", path)

The color filling is done by using d3.scale.threshold() function

function colorCode(data, filter) {
    var color = d3.scale.threshold()
                  .domain([65, 72, 78, 85])
                  .range(["#111", "#222", "#333", "#444", "#555"]);
    data.forEach(function(d) { 
        if (isNaN(d.properties[filter])){d.properties[filter]=77;}
        d.color       = color(d.properties[filter]);
    });
}

The map above clearly shows the regions where the literacy rate is high concentrated around the western coast and some states in the north east. The differences are even more stark when we see the female literacy rate alone.

Here we see that only the state states of Kerala, Mizoram and Tripura have very high literacy rates.

The code and the results can be viewed at GitHub or bl.ocks