D3 Examples - World Choropleth

World Choropleth

This map shows the number of students in each country enrolled in the online class "Python for Data Journalists" taught by Ben Welsh and the California Civic Data Coalition in 2017. More than 2,700 total students from more than 120 countries participated in the month-long course.

The code uses d3 version 4 and a threshold scale. It is based on previous choropleth maps published by Mike Bostock.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #map {
  position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
  }
  .countries {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
  }
  .legendThreshold {
      font-size: 16px;
      font-family: sans-serif;
  }
  .legendTitle {
    font-weight: bold;
    font-size: 30px;
    fill: grey;
  }
  .chart-title {
    font-weight: bold;
    text-anchor: middle;
  }
  .caption {
      fill: #000;
      text-anchor: start;
      font-weight: bold;
  }
</style>
<div id="map">
<svg></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<script>
// The svg
var svg = d3.select("svg"),
    width = d3.select("#map").node().clientWidth,
    height = d3.select("#map").node().clientHeight;
svg
  .attr("width", width)
    .attr("height", height)
// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
    .scale(width / 2 / Math.PI)
    .translate([width / 2, height / 2])
var path = d3.geoPath()
    .projection(projection);
​
// Data and color scale
var data = d3.map();
var colorScale = d3.scaleQuantize()
    .domain([0,1])
    .range(d3.schemeReds[5]);
​
// Legend
var g = svg.append("g")
    .attr("class", "legendThreshold")
    .attr("transform", "translate(20,200)");
g.append("text")
    .attr("class", "chart-title")
    .attr("x", width/2)
    .attr("y", -100)
    .text("% of total coal capacity with lower running cost than new renewables");
  
var legend = d3.legendColor()
        .labelFormat(d3.format(".0%"))
    .shapePadding(4)
    .scale(colorScale)
        .title("2018");
  
svg.select(".legendThreshold")
    .call(legend);
​
// Load external data and boot
d3.queue()
    .defer(d3.json, "https://enjalot.github.io/wwsd/data/world/world-110m.geojson")
    .defer(d3.csv, "mooc-countries.csv", function(d) {
  data.set(d["alpha-3"], +d["%_cheaper_2018"]); })
    .await(ready);
​
function ready(error, topo) {
    if (error) throw error;
​
    // Draw the map
    svg.append("g")
        .attr("class", "countries")
        .selectAll("path")
        .data(topo.features)
        .enter().append("path")
            .attr("fill", function (d){
    
                // Pull data for this country
                return colorScale(data.get(d.id) || 0);
            })
            .attr("d", path);
}
</script>
    