D3 Examples - Extradition Treaties

Extradition Treaties

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;
}
​
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
​
.fill {
  fill: #fff;
}
​
.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 parseDate = d3.time.format("%Y-%m-%d").parse,
    formatDate = d3.time.format("%x");
​
var width = 960,
    height = 500;
​
var projection = d3.geo.naturalEarth()
    .scale(167)
    .translate([width / 2, height / 2])
    .precision(.1);
​
var color = d3.scale.linear()
    .domain([new Date(1900, 0, 1), new Date(2000, 0, 1)])
    .range(["purple", "orange"])
    .clamp(true)
    .interpolate(d3.interpolateHcl);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
​
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
​
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
​
queue()
    .defer(d3.json, "/../../data/world-50m.json")
    .defer(d3.tsv, "treaties.tsv", type)
    .await(ready);
​
function ready(error, world, treaties) {
  if (error) throw error;
​
  var treatiesById = d3.nest()
      .key(function(d) { return d.id; })
      .sortValues(function(a, b) { return a.date - b.date; })
      .map(treaties, d3.map);
​
  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);
​
  country.filter(function(d) { return d.id === 840; })
      .style("fill", "#000")
    .append("title")
      .text("United States");
​
  country.filter(function(d) { return treatiesById.has(d.id); })
      .style("fill", function(d) { return color(treatiesById.get(d.id)[0].date); })
    .append("title")
      .text(function(d) {
        var treaties = treatiesById.get(d.id);
        return treaties[0].name + "\n" + treaties.map(function(d) { return formatDate(d.date); }).join("\n");
      });
​
  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
}
​
function type(d) {
  d.id = +d.id;
  d.date = parseDate(d.date);
  return d;
}
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
​
    