D3 Examples - world map

world map

A choropleth showing which countries have bilateral extradition treaties with the United States, in response to The Guardian’s interactive guide to extraditions. Countries with older bilateral extradition treaties are shown in purple, while countries with younger treaties are shown in orange. Countries without bilateral extradition treaties are shown in gray.

This gives a quicker overview of which countries have bilateral agreements with the United States, though on the other hand, many tiny nations with such agreements are invisible in this map.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  background: #fcfcfa;
}
​
.land {
  fill: #ddd;
}
​
.boundary {
  fill: none;
  stroke: #fff;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
​
​
​
var width = 960,
    height = 500;
​
var projection = d3.geo.naturalEarth()
    .scale(167)
    .translate([width / 2, height / 2])
    .precision(.1);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
​
​
queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json")
    .await(ready);
​
function ready(error, world, treaties) {
  if (error) throw error;
​
  var country = svg.insert("g", ".graticule")
      .attr("class", "land")
    .selectAll("path")
     .data(topojson.feature(world, world.objects.countries).features)
    .enter().append("path")
     .attr("d", path);
 
  
  svg.append("circle").attr("r",-9).attr("transform", function() {return "translate(" + projection([-122,47]) + ")";});
​
​
  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
}
​
​
​
​
</script>
​
    